Question

I am having trouble binding my View Model to my View. I am a beginner with MVVM, but I believe I am implementing my system (almost) correctly. I have a Model that contains data, which I am getting in my View Model, and then when my page is navigated to, I am attempting to grab that View Model data and binding it to the View.

My issue is that I have a ListBox in my View with 3 objects per item, and I cannot seem to bind to it correctly for each item in my list.

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 (The Model)

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));
        }
    }

..and this is where and how I am saving each item (which should have three properties listed in the ItemViewModel

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

Where FavoritesList is populated using an ItemViewModel containing 3 objects. The list is being populated correctly because during debugging I can see the entities in FavoritesList, but I am having an issue calling these entities in the view model to show up in my ListBox in the view?

I believe I am binding incorrectly but I’m not sure how to fix this?

Answer 1

In your XAML you bind to paths Name and Address do you have these 2 properties defined in your ItemViewModel?

Update after reading your code properly:

You are not updating the datatemplate of the Items of the Listbox. This is what you need to do:

<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>