Ribbons und MVVM



  • Hallo.
    Nachdem ich den MVVM Artikel von John Smith im Microsoft Magazin gelesen habe und mir im Anschluss daran noch einen Videoguide zum MVVM Entwurfsmuster angeschaut und soweit nachvollzogen habe, möchte ich das ganze an einem eigenen Beispiel ausprobieren, habe jedoch bereits am Anfang (für mich) recht große Schwierigkeiten bei der Umsetzung.

    Ich möchte eine Anwendung erstellen, die grundsätzlich aus drei Zeilen besteht:
    1. Ribbons (zur Menüführung)
    2. MainContent (Anzeige des eigentlichen Inhalts mittels UserControls)
    3. Statusleiste (Label und Fortschrittsbalken)

    Nachdem ich nun ein wenig XAML geschrieben habe, tun sich einige Schwierigkeiten in Sachen Datenbindung auf. Ich versuche das Problem mal anhand des bereits bestehenden Codes zu schildern:

    Die grafische Oberfläche (relevanter Teil):

    <ribbon:Ribbon x:Name="Ribbon" Grid.Row="0" SelectedIndex="{Binding RibbonTabSelectedIndex}">
                <ribbon:Ribbon.ApplicationMenu>
                    <ribbon:RibbonApplicationMenu SmallImageSource="/Images/folder.ico">
                        <ribbon:RibbonApplicationMenuItem Header="Hello _Ribbon" />
                    </ribbon:RibbonApplicationMenu>
                </ribbon:Ribbon.ApplicationMenu>
                <ribbon:RibbonTab x:Name="ServersTab" Header="Servers">
                    <ribbon:RibbonGroup x:Name="Group1" Header="Group1">
                        <ribbon:RibbonButton x:Name="Button1" Label="Button1" />
                        <ribbon:RibbonButton x:Name="Button2" Label="Button2" />
                        <ribbon:RibbonButton x:Name="Button3" Label="Button3" />
                        <ribbon:RibbonButton x:Name="Button4" Label="Button4" />
                    </ribbon:RibbonGroup>
                </ribbon:RibbonTab>
                <ribbon:RibbonTab x:Name="ApplicationsTab" Header="Applications">
                    <ribbon:RibbonGroup x:Name="Group2" Header="Group1">
                    </ribbon:RibbonGroup>
                </ribbon:RibbonTab>
            </ribbon:Ribbon>
    
            <Grid Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <Grid.Background>
                    <ImageBrush ImageSource="/Images/bg.png" Stretch="Fill" AlignmentY="Bottom" Opacity="0.4" />
                </Grid.Background>
    
                <ItemsControl Margin="20" Background="White" />
            </Grid>
    

    Momentan habe ich also zwei Ribbons ("Servers" und "Applications"). Je nachdem welcher RibbonTab angeklickt wurde, soll im untenstehenden ItemsControl ein anderes UserControl angezeigt werden.
    Die entsprechenden UserControls habe ich bereits angefertigt. Ich habe mir zusätzlich eine ViewModelBase.cs und eine MainWindowViewModel.cs angelegt.

    Designtechnisch hielt ich es für sinnvoll pro UserControl ebenfalls ein eigenes ViewModel anzulegen, also sprich "ServersViewModel.cs" und "ApplicationsViewModel.cs".

    Die Frage, bzw. eher die Fragen, die ich nun habe:
    1. Ist diese Überlegung so korrekt?
    2. Wenn Punkt 1 OK ist, wie realisiert man dies?

    ich hätte jetzt aus Gewohnheit eine "ObservableCollection<UserControl> Content" angelegt, jedoch bringt mich das nicht weiter, da ich nur ein globales ItemsControl zur Anzeige habe. Wie kann ich das so hinbiegen, dass ich mit Klick auf einen RibbonTab ein neues UserControl anzeigen lassen kann?



  • Hi Vitali,

    sowas mache ich über ein zentrales 'MainViewModel', und bündel darin die einzelnen ViewModels (ich trenne, wie in Deiner Überlegung eben auch, die ViewModels sehr gerne auf um den Code lesbarer und die Klassen möglichst klein zu halten).

    Deine MainView (mit dem Ribbon) bindet somit an das MainViewModel, welches wiederum die 'Unter-'-ViewModels bereitstellt, hierbei ist halt nur wichtig ViewModel-Änderungen nach 'oben' zu melden (INotify...).

    Ob das wirklich 100pro MVVM-konform ist weiß ich nun auch nicht, aber so hab ichs mir jedenfalls angewöhnt bislang und es funktioniert super und der Code ist schön sauber 🙂

    Viele Grüße
    Goa


Anmelden zum Antworten