Come caricare correttamente i contenuti all'interno di una finestra moderna usando mvvm

Question

Nella nostra azienda, siamo abituati a sviluppare le nostre applicazioni utilizzando WinForms, Ora abbiamo deciso di passare a WPF-MVVM con Caliburn.Micro e Modern UI. La cosa che stiamo cercando di raggiungere è avere una piccola applicazione che abbia: - 1 finestra moderna - 2 pagine all'interno di quella finestra moderna l'obiettivo è avere un pulsante all'interno di quella pagina che naviga la finestra moderna alla seconda pagina con parametri.

Ho lavorato cercando di capire come farlo funzionare, ho avuto successo con Window (senza MUI), ma quando si tratta di MUI, non mi sta dando il risultato che vogliamo.

Finora, Tutto quello che ho fatto, è

1. creare un nuovo progetto MUI
2. Aggiungere il Caliburn.Micro al progetto

3. Modificare l'App.xaml a

   <Application x:Class="MuiWithCaliburn01.App" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:local="clr-namespace:MuiWithCaliburn01"> 
   <Application.Resources> 
       <ResourceDictionary> 
        <ResourceDictionary.MergedDictionaries> 
         <ResourceDictionary> 
          <local:AppBootstrapper x:Key="bootstrapper" /> 
          <local:ModernContentLoader x:Key="ModernContentLoader" /> 
         </ResourceDictionary> 
         <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" /> 
         <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml"/> 
        </ResourceDictionary.MergedDictionaries> 
       </ResourceDictionary> 
   </Application.Resources> 
   

4. Creare la classe di bootstrapper

   
   public class AppBootstrapper : BootstrapperBase 
   { 
       static AppBootstrapper() 
       { 
       } 
       public AppBootstrapper() 
       { 
        Initialize(); 
       } 
       protected override void OnStartup(object sender, StartupEventArgs e) 
       { 
        DisplayRootViewFor(); 
       } 
   } 
   

5. Creare la ModernContentLoader Classe

   
   public class ModernContentLoader : DefaultContentLoader 
   { 
       protected override object LoadContent(Uri uri) 
       { 
        var content = base.LoadContent(uri); 
        if (content == null) 
         return null; 
        var vm = Caliburn.Micro.ViewModelLocator.LocateForView(content); 
        if (vm == null) 
         return content; 
        if (content is DependencyObject) 
        { 
         Caliburn.Micro.ViewModelBinder.Bind(vm, content as DependencyObject, null); 
        } 
        return content; 
       } 
   } 
   

6. ModernWindowView.xaml & ModernWindowViewModel.cs

   
   < mui:ModernWindow x:Class="MuiWithCaliburn01.ModernWindowView" 
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
       xmlns:mui="http://firstfloorsoftware.com/ModernUI" 
       ContentLoader="{StaticResource ModernContentLoader}"> 
   < mui:ModernWindow.MenuLinkGroups> 
       < mui:LinkGroupCollection> 
        < mui:LinkGroup DisplayName="Hello"> 
         < mui:LinkGroup.Links> 
          < mui:Link Source="Child1View.xaml" DisplayName="Click me">< /mui:Link> 
         < /mui:LinkGroup.Links> 
        < /mui:LinkGroup> 
       < /mui:LinkGroupCollection> 
   < /mui:ModernWindow.MenuLinkGroups> 
   < /mui:ModernWindow> 
   

    
   class ModernWindowViewModel : Conductor.Collection.OneActive 
   { 
       public ModernWindowViewModel() 
       { 
        //this function is doing nothing in the ModernWindow, but it works great in the Window. 
        ActivateItem(new Child1ViewModel()); 
       } 
   } 
   

7. E, infine, il Child1View.xaml

   <UserControl x:Class="MuiWithCaliburn01.Child1View" 
       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" 
       xmlns:mui="http://firstfloorsoftware.com/ModernUI" 
       mc:Ignorable="d" 
       xmlns:cal="http://www.caliburnproject.org" 
       xmlns:model="clr-namespace:MuiWithCaliburn01" 
       d:DataContext="{x:Type model:Child1ViewModel}" 
       d:DesignHeight="300" d:DesignWidth="300"> 
       <Grid> 
        <Button cal:Message.Attach="ClickMe" Width="140" Height="50">Hello World</Button> 
       </Grid> 
   </UserControl> 
   

   e Child1ViewModel.cs

   public class Child1ViewModel : Conductor<IScreen> 
   { 
       public void ClickMe() 
       { 
        MessageBox.Show("Hello"); 
       } 
   } 
   

La mia domanda è, punto 6, perché la funzione non fare nulla? e se la mia strada è sbagliata qualcuno può indirizzarmi verso un modo migliore?

E se è l'approccio migliore, come posso navigare dalla funzione ClickMe a un'altra vista.

Answer 1

Per quanto riguarda la prima domanda sul perché la funzione non fa nulla, penso che possa avere a che fare con la gerarchia del progetto. Utilizzando MUI questa è la finestra principale (e solo) per una delle mie applicazioni

<mui:ModernWindow x:Class="namespace.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:mui="http://firstfloorsoftware.com/ModernUI" 
    Title="Window Title" IsTitleVisible="True" 
    ContentSource="/Pages/Home.xaml" 
    Style="{StaticResource MyModernWindow}"> 

<mui:ModernWindow.TitleLinks> 
    <mui:Link DisplayName="settings" Source="/Pages/SettingsPage.xaml" /> 
</mui:ModernWindow.TitleLinks> 

nella mia gerarchia del progetto, ho la mia radice del progetto (file csproj), MainWindow.xaml quindi una cartella Pages. All'interno della mia cartella di pagine ho il mio SettingsPage.xaml. L'attributo source nel mio mui: Il tag link punta al percorso reale della mia finestra principale sul mio file settingsPage.xaml.MUI quindi caricherà e visualizzerà quel percorso nel fornitore di contenuti che viene inserito nella finestra principale dal modello di stile di default della classe MUI ModernWindow. Non è necessario alcun codice aggiuntivo da parte dell'utente per navigare (finché non si desidera una navigazione complessa della vista secondaria).

il file settingsPage.xaml è un normale controllo utente con la griglia con uno stile assegnato allo stile di risorsa statica ContentRoot in quanto conterrà anche visualizzazioni/pagine aggiuntive.

La fonte Mui può essere trovata su GitHub al Mui GithubLink. Qui è possibile scaricare il programma di esempio, il cui codice si trova nello stesso repository dell'app Link here for covience.

Non ho familiarità con Caliburn.Micro quindi non sono sicuro di come i due si integrano insieme, come ad esempio i requisiti di Caliburn.Micro per funzionare. So come MUI si integra con MVVM light e ci sono molti esempi di questo trovato su internet nella mia ricerca in anticipo.