Solution Explorer

MVVM Tutorial – Part 6 (View Nr. 2)

Solution Explorer

Solution Explorer

Da eine Tabelle nicht immer die schönste Art der Darstellung ist, wollen wir in diesem Teil eine zweite View bauen, die sich auf eine Liste und eine Detailansicht stützt. Dazu brauchen wir dieses Mal kein neues Projekt, sondern fügen einfach Dateien in unser vorhandenes View Projekt hinzu. Als erstes erstellen wir die Detailansicht, also ein View für ein PersonViewModel. Im zweiten Schritt erstellen wir dann eine zweite View für unser PersonListViewModel erstellen, welche eine Liste und daneben unseren Detailbereich anzeigt.

Los gehts also mit der PersonView, welche auch wieder ein WPF UserControl ist.

<UserControl x:Class="View.PersonView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             Background="White">
    <StackPanel Orientation="Horizontal">
        <StackPanel>
            <TextBlock Text="Name:" />
            <TextBlock Text="Address:" />
        </StackPanel>
        <StackPanel Width="300">
            <TextBox Text="{Binding Name}" />
            <TextBox Text="{Binding Street}" />
            <StackPanel Orientation="Horizontal">
                <TextBox Text="{Binding PostalCode}" />
                <TextBox Text="{Binding City}" />
            </StackPanel>
        </StackPanel>
    </StackPanel>
</UserControl>

Die Hintergrundfarbe nutzen wir hier, damit wir in unserer End-GUI schön sehen können, wo unsere PersonView sich befindet (transparent auf weiß sieht man nicht gut). Diesmal benutzen wir außerdem nicht das Grid zum Layouten, sondern verschachtelte Stackpanels. Ein Stackpanel ordnet die Elemente, die in dem Panel sind auf möglichst kleinem Raum untereinander oder nebeneinander an. Wenn nicht weiter angegeben, sind Stackpanels vertikal angeordnet. Wer beide Richtungen will, nimmt ein Wrappanel.

Nun bauen wir uns noch PersonListView2 (PersonListView können wir einfach behalten). Um die Liste anzuzeigen benutzen wir diesmal eine ListBox, in der nur die Namen der Personen angezeigt wird. Die jeweils ausgewählte Person wir dann in unserer PersonView angezeigt.

<UserControl xmlns:my="clr-namespace:View"  x:Class="View.PersonListView2"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid Background="LightGray">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="30" />
        </Grid.RowDefinitions>
        <ListBox ItemsSource="{Binding Persons}" DisplayMemberPath="Name" Name="personList"/>
        <Button Command="{Binding AddPersonCommand}" Content="Add Person" Grid.Row="1"/>
        <my:PersonView Grid.Column="1" DataContext="{Binding ElementName=personList, Path=SelectedItem}" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
</UserControl>

Der DataContext des PersonViews wird hierbei auf die aktuell ausgewählte Person der ListBox gesetzt. Hier benutzen wir also Data Binding nicht von View an ViewModel, sondern innerhalb des Views an ein anderes Element.

Um nun statt der alten PersonListView die neue PersonListView2 anzuzeigen, müssen wir in der MainWindow.xaml unseres StartApplication Projekts nur die Zeile

<my:PersonListView Name="personListView"/>

durch

<my:PersonListView2 Name="personListView"/>

austauschen.

Führt ihr das ganze nun aus, könnt ihr in der Liste eine Person anwählen, welche dann in der Detailansicht angezeigt wird.

Fenster beim Start von StartApplication

Fenster beim Start von StartApplication

Sobald man den Namen einer Person ändert und die TextBox keinen Fokus mehr hat, wird ein Update über das Data Binding ausgelöst und wir sehen, dass sich der Name in der ListBox ebenfalls ändert. Wenn wir eine neue Person erstellen, ist der Name erstmal leer, wesshalb man sie in der ListBox erst nach anklicken sieht (einfach unter die unterste sichtbare Person klicken). Man könnte das Command dahingehend abändern, dass die neue Person erstmal Unbekannt, oder etwas Ähnliches als Namen bekommt. Das soll aber nicht Bestandteil dieses Tutorials sein.

Auch hier wieder die Solution: MVVMTutorial Solution (Model, ViewModelBase, ViewModel, View, StartApplication und View Nr. 2)

Im nächsten (und vorerst letzten) Teil werden wir uns dann noch einmal mit MEF beschäftigen, welches es uns ermöglicht, eine sehr lose Kopplung zwischen den einzelnen Komponenten zu realisieren.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.