12482

How to bind the view model to the view

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.

<strong>MainPage.xaml</strong>

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

<strong>MainPage.xaml.cs</strong>

public FavoritesPage() { InitializeComponent(); // Set the data context of the listbox control to the sample data FavoritesListBox.DataContext = App.ViewModel; }

<strong>App.xaml.cs</strong>

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

<strong>MainViewModel.cs</strong>

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

<strong>Settings.cs (The Model)</strong>

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

<strong>ItemViewModel.cs</strong>

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?

Answer1:

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

<strong>Update after reading your code properly:</strong>

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>

Answer2:

In addition to setting your DataContext to your viewmodel, (as mentioned in the comment linking to <a href="https://stackoverflow.com/questions/12151618/creating-contextbinding-xaml" rel="nofollow">Creating ContextBinding XAML</a>) , you also need to have your view model implement <a href="http://msdn.microsoft.com/en-us/library/system.componentmodel.inotifypropertychanged.aspx" rel="nofollow">INotifyPropertyChanged</a> (including ItemViewModel, which you don't show in your question)

Recommend

  • Let the user change the resource dictionnary
  • Border Animation wont change color
  • WPF MainWindow toggle property in UserControl via ViewModel
  • wpf datagrid generate rows according to a selected value
  • Windows Phone Style make ListBox ' s Virtualizing disabled . how to recover Virtualizing?
  • Metro: Why is binding from XAML to a property defined in code-behind not working?
  • ListPicker SelectionChanged Event Called Multiple Times During Navigation
  • How to create this shared class member or property
  • create multiple copies of staticresource
  • Serialize ListView Data to send JSON POST
  • Problems with WP8 Slider
  • XAML Trigger Auto-tab when MaxLength is Reached
  • ListBox.SelectedItem
  • Get x:Uid propertry of TextBlock in Metro
  • How to add Text under a MahApps MetroCircleButtonStyle icon?
  • WPF context menu data-bound icon only appears when inspected
  • WPF Resource overriding
  • WPF MVVM Binding a ContentConrol's ContentTemplate's StaticResource
  • UWP C# - Problems with Grid in a Listview
  • Setting Visibility=“Collapsed” doesn't hide the Button. Update: Fixed by myself but I want to k
  • The name 'InitializeComponent' does not exist in the current context in WPF application
  • Listbox SelectionChanged not working with Button in its ItemTemplate
  • Overriding implicit styles in nested controls
  • WPF Animated GIF Use Too Much Memory for Displaying Large GIF Image
  • Drag-and-Drop UWP vs Button Style
  • How change the background color of the dropdown panel of Combobox
  • Generate AST in the form of a dot file
  • Silverlight UI not unsubscribing from PropertyChanged events
  • htmlwidgets side by side in html?
  • How to set textwrapping in Button
  • Remove annotation while keeping plot matplotlib
  • How to change EasingDoubleKeyFrame value at Runtime?
  • Windows phone 8.1 Flyout hide with behaviour issue
  • Custom ttf font makes Spritekit's transition slow in SWIFT
  • Flyout.showAt() ArgumentException based on Content
  • DataGrid: Help accessing a control defined in a CellEditingTemplate
  • Having an issue with my TextBox control template
  • Different Datacontext for Command and CommandParameter
  • Return null in boolean to checkbox state converter in XAML
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight