如何將視圖模型綁定到視圖

Question

我有麻煩我的綁定View Model我View 。 我是MVVM的初學者，但是我相信我（幾乎）正確地實現了我的系統。 我有一個Model ，其中包含的數據，這是我在我的我越來越View Model ，然后在我的網頁導航到，我試圖抓住該View Model數據，並將其綁定到View 。

我的問題是我的View有一個ListBox ，每個項目有3個對象，對於ListBox中的每個項目，我似乎都無法正確地綁定到它。

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列出三個屬性ItemViewModel

void addToFavorites_Click(object sender, EventArgs e)
{
    var favoriteItem = 
        new ItemViewModel{
            Favicon = "", 
            Name = "", 
            Address = TheBrowser.currentUrl() };
        Settings.FavoritesList.Value.Add(favoriteItem);            
}

其中，使用包含3個對象的ItemViewModel填充FavoritesList 。 該列表已正確填充，因為在調試過程中我可以在FavoritesList列表中看到實體，但是在調用view model中的這些實體以顯示在view ListBox中時遇到問題？

我相信綁定錯誤，但是不確定如何解決？

Answer 1

除了將DataContext設置為視圖模型（如創建ContextBinding XAML的注釋鏈接中所述）外，還需要使視圖模型實現INotifyPropertyChanged （包括ItemViewModel ，它不會在問題中顯示）

Answer 2

在XAML中，您綁定到Name和Address路徑，您是否在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>