Commanding with Static Items of Listbox using MVVM

Question

I have a list box in my view with three static items(Name,Age,Gender), and I want my ViewModel to do something when an item in the ListBox is selected. I want to do this without any code-behind, using the MVVM pattern.

My goal is to navigate to a page when an item is selected also the items stated above does not come from an observable list, it is hardcoded in my XAML. How would I do that? Please teach me. If you don't mind to send a sample, that would be a great help. Thanks much in advance.

<ListBox x:Name="lbviewlist">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="SelectionChanged" >
            <Command:EventToCommand Command ="{Binding ViewCommand}"
                PassEventArgsToCommand="True"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <ListBox.Items>
        <StackPanel  x:Name="lbiview1" Orientation="Vertical">
            <ListBoxItem Content="Name" FontSize="35" Margin="10,0,0,0"
                Foreground="OrangeRed"/>
            <TextBlock TextWrapping="Wrap" Text="View name of the patient"  
                FontSize="25"  Margin="10,0,0,0" Foreground="White"/>
        </StackPanel>
        <StackPanel x:Name="lbiview2" Orientation="Vertical">
            <ListBoxItem Content="Age"  FontSize="35" Margin="10,20,0,0"
                Foreground="OrangeRed"/>
            <TextBlock TextWrapping="Wrap" Text="View age of the patient"  
                FontSize="25"  Margin="10,0,0,0" Foreground="White"/>
        </StackPanel>
        <StackPanel x:Name="lbiview3"  Orientation="Vertical">
            <ListBoxItem Content="Gender" FontSize="35" Margin="10,20,0,0"
                Foreground="OrangeRed"/>
            <TextBlock TextWrapping="Wrap" Text="View the gender of the patient"
                FontSize="25" Margin="10,0,0,0" Foreground="White"/>
        </StackPanel>
    </ListBox.Items>                    
</ListBox>

devdigital devdigital · Accepted Answer · 2013-04-22T09:10:04

You can use data binding to bind the SelectedItem of the ListBox to a property on your view model. Then, in the setter of your view model property, you can run the logic you need to when the selected item changes.

<ListBox SelectedItem="{Binding MySelectedItem}" ... />

Update

Ok, firstly I would strongly recommend (no insist) that you use an MVVM framework. If you're doing MVVM, then you need to use a framework.

Next, there's no reason why these list items can't be on your view model. It would certainly make your view a lot cleaner.

Then you can set your ListBox ItemsSource to bind to your view model collection, and then use data templating in your view to render each item in the list consistently.

E.g. your view can end up something like:

<ListBox ItemsSource="{Binding MyItems}" SelectedItem="{Binding MySelectedItem}">
   <ListBox.ItemTemplate>
      <DataTemplate>
          <StackPanel>
             <TextBlock Text="{Binding Value}"  ... />
             <TextBlock Text="{Binding Description}" ... />
          </StackPanel>
      </DataTemplate>
   </ListBox.ItemTemplate>
</ListBox>

Much cleaner, I think you'll agree.

Commanding with Static Items of Listbox using MVVM

1 Answers