Navigation mit WPF und Mvvm

Heute wollen wir uns eine einfache Navigation mit Mvvm und WPF anschauen. Diese erlaubt uns, rein mit ViewModellen und Data Binding, zwischen verschiedenen Seiten der UI zu navigieren.

Das Projekt gibt es am Ende des Projektes zum Download. Ziel ist die Navigation zwischen den einzelnen Seiten der UI ohne Code-Behind. Unsere UI ist einfach gestrickt:

Mit den Buttons auf der linken Seite können wir zwischen den Seiten der Anwendung wechseln. Die Anwendung besteht aus dem ViewModel für das Hauptfenster und 3 ViewModels für die einzelnen Seiten.

Die ViewModels für die Seiten sind von AViewModel abgeleitet, welches wiederum von ViewModelBase abgeleitet ist. Man sieht bereits, die Anwendung verwendet das MvvmLight Framework.

public class AViewModel : ViewModelBase
{
    private string _name = "";

    public string Name
    {
        get
        {
            return _name;
        }
        set
        {
            Set(() => Name, ref _name, value);
        }
    }
}

Die Eigenschaft „Name“ verwenden wir für die Navigation über die Buttons und setzen wir im Konstruktor des jeweiligen ViewModels:

public View1ViewModel()
{
    Name = "View 1";
}

ViewModel des Hauptfensters

Schauen wir uns nun das ViewModel des Hauptfensters an:

public class MainViewModel : ViewModelBase
{
    private RelayCommand<AViewModel> _changePageCommand;
    private AViewModel _currentPageViewModel;

    private List<AViewModel> _viewModelList = new List<AViewModel>();

    public List<AViewModel> ViewModelList
    {
        get
        {
            return _viewModelList;
        }
    }

    public AViewModel CurrentPageViewModel
    {
        get
        {
            return _currentPageViewModel;
        }
        set
        {
            Set(() => CurrentPageViewModel, ref _currentPageViewModel, value);
        }
    }

    public RelayCommand<AViewModel> ChangePageCommand { get; private set; }   

    public MainViewModel()
    {
        ChangePageCommand = new RelayCommand<AViewModel>(p => ChangePageAction(p));

        _viewModelList.Add(ViewModelLocator.Instance.View1);
        _viewModelList.Add(ViewModelLocator.Instance.View2);
        _viewModelList.Add(ViewModelLocator.Instance.View3);

        _currentPageViewModel = _viewModelList[0];
    }

    private void ChangePageAction(AViewModel viewModel)
    {
        CurrentPageViewModel = ViewModelList.FirstOrDefault(vm => vm == viewModel);
    }
}

Wir haben hier einen Command zum Wechseln der Seite. Eine Eigenschaft, welche das aktuelle ViewModel enthält, sowie eine List der verfügbaren ViewModels. Im Konstruktor legen wir die Liste an, setzen das erste ViewModels als Default und erstellen den Command.

Der Command nimmt einfach den Parameter, welcher vom Typ AViewModel sein muss, und weist dieses aus der Liste der Eigenschaft „aktuelles ViewModel“ zu.

XAML-Code des Hauptfensters

Soweit so gut, schauen wir uns nun die GUI an. Die verfügbaren Seiten, bzw. deren Buttons, stellen wir über ein ItemControl dar:

<ItemsControl DockPanel.Dock="Left"
              ItemsSource="{Binding ViewModelList}"
              Margin="10"
              MinWidth="150">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button Content="{Binding Name}"
                    Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
                    CommandParameter="{Binding }"
                    Margin="0,10,0,0"
                    HorizontalAlignment="Stretch"></Button>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Neue Seiten können so einfach über die Liste des ViewModels hinzugefügt werden. Der Button wird an das Command des ViewModels gebunden. Als Parameter wird das aktuelle ViewModel übergeben.

Die Darstellung der Seiten erfolgt in einem ContentControl:

<ContentControl x:Name="Content" Content="{Binding CurrentPageViewModel}"></ContentControl>

Dieses wird an das aktuelle ViewModel für die jeweilige Seite gebunden. Damit das ControlControl weiß, was es darstellen soll, erstellen wir für jedes ViewModel ein DataTemplate.

<Window.Resources>
    <DataTemplate DataType="{x:Type vm:View1ViewModel}">
        <local:View1></local:View1>
    </DataTemplate>
    <DataTemplate DataType="{x:Type vm:View2ViewModel}">
        <local:View2></local:View2>
    </DataTemplate>
    <DataTemplate DataType="{x:Type vm:View3ViewModel}">
        <local:View3></local:View3>
    </DataTemplate>
</Window.Resources>

Für jede Seite wird ein UserControl erstellt, welches wir hier im DataTemplate verwenden. Fertig! Mit jedem Button-Klick wird nun zwischen den Seiten der Anwendung gewechselt.

Update: Wechsel des ViewModels innerhalb eines Views

Es gab die Frage, in den Kommentaren, wie man den View aus einem View heraus wechseln kann. Hier gibt es verschiedene Möglichkeiten. Im Grunde müssen wir dem MainViewModel, welcher die Navigation für uns erledigt nur das ViewModel mitteilen, zu welchem gewechselt werden soll. Hier kommen verschiedene Möglichkeiten in Fragen: Events, direkter Verweis und Aufruf oder auch die Messenger-Funktionen von MVVM light.

Letztere habe ich verwendet, um die Funktion zu implementieren. Das Projekt habe ich ebenfalls aktualisiert. In unserem Beispiel wollen wir mit einem Klick auf einen Button von View3 zu Views2 navigieren.

<Button Grid.Row="1"
Command="{Binding ChangeViewCommand}"
Content="Change to view 2"
Margin="50"></Button>

Der Button ist an einen Command gebunden. Dieser versendet eine Nachricht mit dem Messenger von MVVMlight:

ChangeViewCommand = new RelayCommand(() =>
{
    Messenger.Default.Send(new ChangeViewMessage(ViewModelLocator.Instance.View2));
});

Der Messenger verschickt eine „ChangeViewMessage“, welche als Parameter das Ziel-View-Model übernimmt. In unserem Fall übergeben wir das ViewModel von „View2“. Die Nachricht an sich ist eine einfache Klasse:

public class ChangeViewMessage
{
    public AViewModel TargetViewModel { get; private set; }
    public ChangeViewMessage(AViewModel viewModel)
    {
        TargetViewModel = viewModel;
    }
}

Nun registrieren wir uns noch im MainWindowViewModel auf diese Nachricht.

//register message for switching the view
Messenger.Default.Register<ChangeViewMessage>(this, (msg) =>
{
    CurrentPageViewModel = msg.TargetViewModel;
});

Hier können wir dann aus der Nachricht das Ziel-View-Model auslesen und setzen. Damit wird über den Button entsprechend zum anderen View gesprungen.

Update: Anzeige, welcher View gerade aktiv ist

In den Kommentaren kam die Frage, ob man auch irgendwie kenntlich machen kann, welcher View gerade aktiv ist. Im Beispiel wollen wir, dass die Schrift des gerade aktiven Views und Buttons fett wird.

Wie realisieren wir dies? Zuerst erweitern wir unser Template für den Button:

<Button.FontWeight>
<MultiBinding Converter="{StaticResource FontWeightConverter}">
    <Binding Path="DataContext.CurrentPageViewModel"
             RelativeSource="{RelativeSource AncestorType={x:Type Window}}"></Binding>
    <Binding Path="."></Binding>
</MultiBinding>
</Button.FontWeight>

Hier verwenden wir einen MultiBinding und binden das CurrentViewModel und das ViewModel des Buttons an diesen. Jeder Button hat ja sein ViewModel zugeordnet (z.B. der View1 Button hat das View1ViewlModel zugeordnet. Jetzt implementieren wir den Converter:

public class NavigationViewModelFontWeightConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (values[0] == values[1])
            return FontWeights.Bold;

        return FontWeights.Regular;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Dieser prüft, ob das aktuelle ViewModel dem des Buttons entspricht. Die beiden Bindings werden hier als Object-Array übergeben.

Ist das der Fall, dann wird die Schrift auf „Bold“ gesetzt:

Ist dies nicht der Fall und die aktuelle ViewModel im MainWindowViewModel entspricht nicht dem des Buttons, dann wird die Schriftart auf normal gesetzt:

Download des Beispiels

Download