Was ist der beste Weg in MVVM ein Menü zu erstellen, die verschiedenen Seiten anzeigt?

Question

Ich mag eine einfache Anwendung mit dem MVVM Muster bauen.

Diese Anwendung wird zwei Hauptteile hat:

• Menü auf
• Inhalt unten

Die Navigation wird einfach sein:

• jeder Menüpunkt (zum Beispiel "Managt Kunden" oder "View Report") wird füllt der Inhaltsbereich mit einer neuen Seite, die einige besondere Funktionalität

Ich habe dies getan, bevor mit dem Code hinter , wo der Code-Behind-Event-Handler für Menüpunkte waren alle Seiten geladen und der Computer, wurde als Kind eines Stackpanel geladen in angezeigt werden soll. Dies ist jedoch nicht in MVVM arbeiten, da Sie wollen ein Stackpanel nicht manuell füllen, aber die Anzeige z.B. ein "PageItem" Objekt mit einem Datatemplate, etc.

So diejenigen, die eine einfache Klick-Menü Anwendung wie diese mit MVVM gemacht haben, was war Ihre grundlegende Anwendungsstruktur Ich bin in diese Richtung zu denken:

MainView.xaml:

<DockPanel LastChildFill="False">

    <Menu 
        ItemsSource="{Binding PageItemsMainMenu}" 
        ItemTemplate="{StaticResource MainMenuStyle}"/>

    <ContentControl 
        Content="{Binding SelectedPageItem}"/>        

</DockPanel>

, wo das Menü mit einer Sammlung von „PageItems“ gefüllt ist und die Datatemplate zeigt den Titel jedes „PageItem Objekt“, wie die Header jedes MenuItem.

Und die Content wird mit einer Ansicht / Ansichtsmodell Paar gefüllt werden, die die volle Funktionalität hat, aber ich bin nicht sicher, ob zu diesem Thema.

Answer 1

Erstens, ich glaube, Sie sollten die Code-behind halten Event-Handler, gibt es keinen Punkt ist ein einfachen 2-zeiliges Ereignishandler zu einem komplexen Befehl angetrieben Monster ohne praktische Vernunft bei der Veränderung (und nicht testebility sagen, das ist die Haupt Menü, wird es jedes Mal, wenn Sie die App laufen getestet werden).

Wenn Sie nun den reinen MVVM Weg gehen wollen, alles, was Sie haben, es zu tun, um Ihr Menü einen Befehl machst Feuer, zuerst, diesen Stil in einigem Ressource-Abschnitt hinzufügen:

<Style x:Key="MenuItemStyle" TargetType="MenuItem">
    <Setter Property="Command" 
            Value="{Binding DataContext.SwitchViewCommand,
            RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Menu}}}"/>
    <Setter Property="CommandParameter" 
            Value="{Binding}"/>
</Style>

Dieser Stil wird der Menüpunkt eine der SwitchViewCommand auf dem beigefügten View-Modell mit der MenuItem Datacontext als Befehlsparameter Feuer machen.

Die aktuelle Ansicht ist die gleiche wie Sie Ihren Code mit einem zusätzlichen Verweise auf diese Art als ItemContainerStyle (so gilt es für den Menüpunkt und nicht der Inhalt des Datatemplate):

<DockPanel LastChildFill="False">

    <Menu DockPanel.Dock="Top"
        ItemsSource="{Binding PageItemsMainMenu}" 
        ItemTemplate="{StaticResource MainMenuStyle}"
        ItemContainerStyle="{StaticResource MenuItemStyle}"/>
    <ContentControl 
    Content="{Binding SelectedPageItem}"/>
</DockPanel>

Jetzt in der Ansicht Modell Sie benötigen (I verwendet Strings, weil ich nicht über Ihren PageItem Code):

private string _selectedViewItem;
public List<string> PageItemsMainMenu { get; set; }
public string SelectedPageItem
{
    get { return _selectedViewItem; }
    set { _selectedViewItem = value; OnNotifyPropertyChanged("SelectedPageItem"); }
}
public ICommand SwitchViewCommand { get; set; }

Und verwenden, was Befehlsklasse Sie den Befehl Aufruf diesen Code machen verwenden:

private void DoSwitchViewCommand(object parameter)
{
    SelectedPageItem = (string)parameter;
}

Nun, wenn der Benutzer einen Menüpunkt Element das Menü klickt die SwitchViewCommand mit dem Seitenelement als Parameter aufrufen.

Der Befehl wird die DoSwitchViewCommand aufrufen, die die SelectedPageItem Eigenschaft wird

Die Immobilie wird die NotifyPropertyChanged erhöhen, die das UI-Update über Daten machen verbindlich.

Alternativ können Sie einen 2-zeiliges Event-Handler, Ihre Wahl schreiben

Answer 2

ich kann eine ObservableCollection in der VM vorstellen, dass alle Seiten hält aus dem Menü aufrufbar zu sein. Dann ein Item binden und den Content es die Content immer die CurrentItem aus dieser Liste zeigen zu machen. Natürlich bindet das Menü wird nur bis zu einem gewissen Eigenschaft Titel  während die Content wird das gesamte Element aufzunehmen und eine entsprechende Ansicht nach dem in Steck.

Answer 3

Eine andere Möglichkeit ist es, eine ListBox anstelle eines Menüs zu verwenden, Stil der List-Box wie ein Menü zu suchen und dann können Sie auf den gewählten Wert binden, wie folgt aus:

<DockPanel LastChildFill="False">

    <ListBox 
        ItemsSource="{Binding PageItemsMainMenu}" 
        ItemTemplate="{StaticResource MainMenuStyle}"
        IsSynchronizedWithCurrentItem="True"/>

    <ContentControl 
        Content="{Binding PageItemsMainMenu/}"/>        

</DockPanel>

Beachten Sie die IsSynchronizedWithCurrentItem = „True“, um das ausgewählte Element zu setzen und die {Binding PageItemsMainMenu /} mit dem Schrägstrich, es zu benutzen.