This project has moved. For the latest updates, please go here.

Custom Property without Mapping

  • Start by opening the result of the DIY: Simple Scenario (either do it yourself or download it)
  • To turn the current view into a Master-Detail view we need to add an extra property to the Persons ViewModel.
  • Open the Persons.xml mapping file and add the SelectedPerson property;
  <ViewModelClass name="Persons"
                  namespace="PersonLookup.ViewModel"
                  commandClass="MVVM.ActionCommand">
    <Properties>

      <Property name="Collection"
                type="PersonLookup.ViewModel.PersonCollection"/>

      <Property name="SelectedPerson"
                type="PersonLookup.ViewModel.Person"
                isViewModel="true"/>
      
    </Properties>
  </ViewModelClass>
  • Click Transform All Templates. You could examine the code that is generated for this property in the Persons.g.cs.
  • Now add a new User Control PersonDetails to the View folder:
<UserControl x:Class="PersonLookup.View.PersonDetails"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">

    <Grid x:Name="LayoutRoot"
          Background="White">
        <Border BorderThickness="1"
                BorderBrush="Blue"
                CornerRadius="3"
                Margin="2"
                Padding="3">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto"
                                      MinWidth="25" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="First name:"
                           VerticalAlignment="Center"
                           Margin="2" />
                <TextBlock Grid.Row="1"
                           Text="Last name:"
                           VerticalAlignment="Center"
                           Margin="2" />
                <TextBlock Grid.Column="1"
                           Text="{Binding FirstName}"
                           VerticalAlignment="Center"
                           Margin="2" />
                <TextBlock Grid.Column="1"
                           Grid.Row="1"
                           Text="{Binding LastName}"
                           VerticalAlignment="Center"
                           Margin="2" />
            </Grid>
        </Border>
    </Grid>
</UserControl>
  • So far pretty obvious, now add the PersonDetails view to the PersonsOverview:
        <StackPanel Grid.Column="1">
            <Button  Content="Get All"
                     Command="{Binding GetAllCommand}"
                     Margin="2" />
            <TextBlock Text="Selected:"
                       Margin="2,4,2,2" />
            <my:PersonDetails />
        </StackPanel>
  • All that is left is wireing the detail to the master. The first step is attaching the SelectedPerson property of the ViewModel to the SelectedItem of the list box:
        <ListBox ItemsSource="{Binding Collection}"
                 SelectedItem="{Binding SelectedPerson, Mode=TwoWay}">
  • Do not forget the to set the Mode of the Binding to TwoWay. It defaults to OneWay and that makes the SelectedItem wait for a change of the SelectedPerson.
  • The final step is binding the PersonDetails View to the SelectedPerson property too.
            <my:PersonDetails DataContext="{Binding SelectedPerson}" />
  • The reason we're binding to the SelectedPerson property of the ViewModel is twofold:
    1. Even in the xaml of the PersonsOverview the PersonDetails does not 'know' about the list box; the binding does not mention the name of the list box, so when you remove the list box the Persondetails' binding is still valid.
    2. From time to time you will need to know what person was selected by the user from within the ViewModel. The ViewModel should not know anything about the views that are connected to it. So retrieving the SelectedItem from the list box is very bad practice.

Last edited Jun 12, 2010 at 3:06 PM by Erno_de_Weerd, version 1

Comments

No comments yet.