如何在视图中引用ViewModel

时间:2013-07-11 04:06:40

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

我试图在我的视图的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"没有错误。

1 个答案:

答案 0 :(得分:1)

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

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

    DataContext = new EffectItems();
} 

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

ItemsSource="{Binding}"