How to Reference the ViewModel in the View - windows-phone-7

Question

I am attempting to reference a class in my ViewModel within the xaml of my view, and I am getting an error saying Object reference not set to an instance of an object. THe error occurs when attemping to set the ViewModel as the Resource for a ListBox. Also, when attempting to set the ItemsSource property of my ListBox, another error results stating The resource "effects" could not be resolved.
MainPage.xaml
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.Resources>
//Error occurs here!
<vm:EffectItems x:Key="effects"/>
</Grid.Resources>
//The ItemsSource property thus contains an error as well
<ListBox Name="ListBoxEffects" SelectionMode="Single" ItemsSource="{StaticResource effects}" SelectionChanged="ListBox_SelectionChanged"
toolkit:TiltEffect.IsTiltEnabled="True"
ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Auto">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" ItemWidth="152" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Margin="14,0,0,10" >
<Image Source="{Binding Thumbnail}" Width="128" Height="128" />
<TextBlock Text="{Binding Name}" FontSize="{StaticResource PhoneFontSizeNormal}" VerticalAlignment="Center" HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
I have also tried the following setup which results in the same errors on the same items
<ListBox Name="ListBoxEffects" SelectionMode="Single" ItemsSource="{StaticResource effects}" SelectionChanged="ListBox_SelectionChanged"
toolkit:TiltEffect.IsTiltEnabled="True"
ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Auto">
<ListBox.Resources>
<vm:EffectItems x:Key="effects"/>
</ListBox.Resources>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" ItemWidth="152" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Margin="14,0,0,10" >
<Image Source="{Binding Thumbnail}" Width="128" Height="128" />
<TextBlock Text="{Binding Name}" FontSize="{StaticResource PhoneFontSizeNormal}" VerticalAlignment="Center" HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
ViewModel class
public class EffectItems : ObservableCollection<EffectItem>
{
public EffectItems()
{
Add(new EffectItem(new BlackWhiteEffect(), "data/icons/BlackWhite.png"));
Add(new EffectItem(new SepiaEffect(), "data/icons/Sepia.png"));
Add(new EffectItem(new TiltShiftEffect { UpperFallOff = 0.2f, LowerFallOff = 1.0f }, "data/icons/TiltShift.png"));
Add(new EffectItem(new PolaroidEffect { Tinting = 0.8f }, "data/icons/PolaYellow.png", "Pola"));
}
}
At the top of my page I have xmlns:vm="clr-namespace:AppName.ViewModels" which contains no errors.

Answer 1

You can bind your ViewModel to a View by setting the views DataContext. The straight forward way is to set it in the constructor of the code behind:
// Constructor
public MainPage()
{
InitializeComponent();
DataContext = new EffectItems();
}
Then you can set the ItemsSource of your List to the DataContext by using the default binding:
ItemsSource="{Binding}"