Как обратиться к ViewModel в представлении

Question

Я пытаюсь ссылаться на класс в моей модели ViewModel в xaml моего представления, и я получаю сообщение об ошибке Object reference not set to an instance of an object. Ошибка возникает при попытке установить ViewModel в качестве ресурса для ListBox. Кроме того, при попытке установить свойство ItemsSource моего списка ListBox появляется другая ошибка, указывающая 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> 

Я также попытался следующие настройки, что приводит к тем же ошибкам на одних и тех же элементов

<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 класса

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")); 
    } 
} 

В верхней моей страницы У меня есть xmlns:vm="clr-namespace:AppName.ViewModels", который не содержит ошибок.

Answer 1

Вы можете связать ViewModel с View, установив представления DataContext. Прямой путь, чтобы установить его в конструкторе кода позади:

// Constructor 
public MainPage() 
{ 
    InitializeComponent(); 

    DataContext = new EffectItems(); 
} 

Затем вы можете установить ItemsSource вашего списка к DataContext, используя по умолчанию связывание:

ItemsSource="{Binding}"