如何在视图中引用 ViewModel答案

【问题标题】：How to Reference the ViewModel in the View如何在视图中引用 ViewModel
【发布时间】：2013-07-11 04:06:40
【问题描述】：

我试图在我的视图的 xaml 中引用我的 ViewModel 中的一个类，但我收到一条错误消息 Object reference not set to an instance of an object。尝试将 ViewModel 设置为 ListBox 的资源时发生错误。此外，当尝试设置我的 ListBox 的 ItemsSource 属性时，另一个错误结果表明 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"，其中没有错误。

【问题讨论】：

你的视图模型类有无参数构造函数吗？除非您使用某种方式的依赖注入，否则如果您的构造函数有参数，您必须自己在某个地方实例化它。
我在上面添加了我的 ViewModel 类，该类在 View 中被引用。我正在尝试重新创建 Codeplex 示例 PicFx picfx.codeplex.com
你能发布完整的错误消息，包括堆栈跟踪吗？您是在 Visual Studio 中设计时还是在运行时收到错误。

标签： windows-phone-7 xaml mvvm windows-phone-8

【解决方案1】：

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

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

    DataContext = new EffectItems();
}

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

ItemsSource="{Binding}"

【讨论】：