如何将视图模型绑定到视图

时间:2012-09-18 01:59:42

标签: c# windows-phone-7 xaml data-binding mvvm

我无法将View Model绑定到View。我是MVVM的初学者,但我相信我正在实现我的系统(几乎)。我有Model包含我在View Model中获取的数据,然后当我的页面导航到时,我试图获取View Model数据并将其绑定到View

我的问题是我的ListBox中有一个View,每个项目有3个对象,而且我似乎无法为列表中的每个项目正确绑定它。

MainPage.xaml中

<ListBox x:Name="FavoritesListBox" ItemsSource="{Binding FavoriteItems}" 
         SelectionChanged="FavoritesListBox_SelectionChanged">

    <StackPanel Orientation="Horizontal" Margin="12,0,12,0">
        <Image x:Name="favicon" Source="{Binding Favicon}" 
               Width="50" Height="50"/>
        <StackPanel>
            <TextBlock x:Name="favoritesName" Text="{Binding Name}" 
                       FontSize="{StaticResource PhoneFontSizeExtraLarge}"/>
            <TextBlock x:Name="favoritesAddress" 
                       Text="{Binding Address}" Margin="12,0,0,0"/>
        </StackPanel>
    </StackPanel>                
</ListBox>

MainPage.xaml.cs中

public FavoritesPage()
    {
        InitializeComponent();

        // Set the data context of the listbox control to the sample data
        FavoritesListBox.DataContext = App.ViewModel;
    }

App.xaml.cs

private static MainViewModel viewModel = null;        

    public static MainViewModel ViewModel
    {
        get
        {
            // Delay creation of the view model until necessary
            if (viewModel == null)
                viewModel = new MainViewModel();

            return viewModel;
        }
    }

MainViewModel.cs

public ObservableCollection<ItemViewModel> FavoriteItems { get; private set; }

    public MainViewModel()
    {
        //FavoriteItems = new ObservableCollection<ItemViewModel>();
        FavoriteItems = Settings.FavoritesList.Value;
    }

Settings.cs(模型)

public static Setting<ObservableCollection<ItemViewModel>> FavoritesList = 
    new Setting<ObservableCollection<ItemViewModel>>(
        "Favorites", 
        new ObservableCollection<ItemViewModel>());

ItemViewModel.cs

private string _favicon;
    public string Favicon
    {
        get
        {
            return _favicon;
        }
        set
        {
            if (value != _favicon)
            {
                _favicon = value;
                NotifyPropertyChanged("Favicon");
            }
        }
    }

    private string _name;
    public string Name
    {
        get
        {
            return _name;
        }
        set
        {
            if (value != _name)
            {
                _name = value;
                NotifyPropertyChanged("Name");
            }
        }
    }

    private string _address;
    public string Address
    {
        get
        {
            return _address;
        }
        set
        {
            if (value != _address)
            {
                _address = value;
                NotifyPropertyChanged("Address");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(String propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (null != handler)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }

..这就是我保存每个项目的地方和方式(应该有ItemViewModel

中列出的三个属性
void addToFavorites_Click(object sender, EventArgs e)
{
    var favoriteItem = 
        new ItemViewModel{
            Favicon = "", 
            Name = "", 
            Address = TheBrowser.currentUrl() };
        Settings.FavoritesList.Value.Add(favoriteItem);            
}

使用包含3个对象的FavoritesList填充ItemViewModel的位置。列表正在正确填充,因为在调试过程中我可以看到FavoritesList中的实体,但我在view model中调用这些实体以显示ListBox中的view时遇到问题{1}}?

我相信我绑定不正确,但我不确定如何解决这个问题?

2 个答案:

答案 0 :(得分:0)

除了将您的DataContext设置为viewmodel之外(如链接到Creating ContextBinding XAML的评论中所述),您还需要让您的视图模型实现INotifyPropertyChanged(包括ItemViewModel,你没有在你的问题中显示)

答案 1 :(得分:0)

在您的XAML中绑定到路径NameAddress您是否在ItemViewModel中定义了这两个属性?

正确阅读您的代码后更新:

您没有更新列表框项目的数据窗口。这是你需要做的:

<ListBox x:Name="FavoritesListBox" ItemsSource="{Binding FavoriteItems}" SelectionChanged="FavoritesListBox_SelectionChanged">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Margin="12,0,12,0">
                <Image x:Name="favicon" Source="{Binding Favicon}" Width="50" Height="50"/>
                <StackPanel>
                    <TextBlock x:Name="favoritesName" Text="{Binding Name}" FontSize="{StaticResource PhoneFontSizeExtraLarge}"/>
                    <TextBlock x:Name="favoritesAddress" Text="{Binding Address}" Margin="12,0,0,0"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>