如何在视图中引用ViewModel

Question

我试图在视图的xaml中引用ViewModel中的一个类，但我收到一个错误，说Object reference not set to an instance of an object。尝试将ViewModel设置为ListBox的Resource时出错。此外，当尝试设置ListBox的ItemsSource属性时，会出现另一个错误，说明The resource "effects" could not be resolved。

主页.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

您可以通过设置视图DataContext将ViewModel绑定到视图。直接的方法是将其设置在代码背后的构造函数中：

// Constructor
public MainPage()
{
    InitializeComponent();
    DataContext = new EffectItems();
} 

然后，您可以使用默认绑定将列表的ItemsSource设置为DataContext：

ItemsSource="{Binding}"