WPF MVVM navigate views

j'ai une application WPF avec plusieurs vues. Je veux toswitch de la vue 1 à la vue 2 et de là je peux passer à des vues multiples. Donc je veux un bouton sur la vue 1 qui charge la vue 2 dans la même fenêtre.

j'ai essayé ces choses, mais ne peux pas le faire fonctionner.

du premier lien le problème est que je ne comprends pas le code de viewmodellocator. Ils appellent la fonction CreateMain(); mais où est-ce défini, et comment puis-je passer à une autre vue à partir d'une vue.

39
demandé sur Community 2013-10-29 13:30:14

4 réponses

tout d'abord, vous n'avez pas besoin de ces outils/cadres pour mettre en œuvre MVVM. Il peut être aussi simple que cela... supposons que nous ayons un MainViewModel , et un PersonViewModel et un CompanyViewModel , chacun avec sa propre vue apparentée et chacun prolongeant une abstract classe de base BaseViewModel .

dans BaseViewModel , nous pouvons ajouter des propriétés communes et/ou des instances ICommand et implémenter l'interface INotifyPropertyChanged . Comme ils étendent tous la classe BaseViewModel , nous pouvons avoir cette propriété dans la classe MainViewModel qui peut être réglée sur n'importe lequel de nos modèles de vue: 

public BaseViewModel ViewModel { get; set; }

bien sûr, vous mettriez en œuvre l'interface INotifyPropertyChanged correctement sur vos" propriétés 1519330920 " contrairement à cet exemple rapide. Maintenant dans App.xaml , nous déclarons quelques simples DataTemplate pour relier les vues avec les modèles de vue: 

<DataTemplate DataType="{x:Type ViewModels:MainViewModel}">
    <Views:MainView />
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModels:PersonViewModel}">
    <Views:PersonView />
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModels:CompanyViewModel}">
    <Views:CompanyView />
</DataTemplate>

maintenant, où que nous utilisions l'une de nos instances BaseViewModel dans notre application, ces DataTemplate s vont dire au framework d'afficher la vue associée à la place. Nous pouvons les afficher comme ceci: 

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

donc tout ce que nous devons faire maintenant pour passer à une nouvelle vue est de définir la propriété ViewModel de la classe MainViewModel : 

ViewModel = new PersonViewModel();

enfin, comment changer les vues des autres vues? Eh bien, il ya plusieurs façons de le faire, mais le plus simple est d'ajouter un Binding de l'enfant vue directe sur un ICommand dans le MainViewModel . J'utilise une version personnalisée du RelayComand , mais vous pouvez utiliser n'importe quel type que vous aimez et je devine que vous obtiendrez l'image: 

public ICommand DisplayPersonView
{
    get { return new ActionCommand(action => ViewModel = new PersonViewModel(), 
        canExecute => !IsViewModelOfType<Person>()); }
}

Dans la vue enfant XAML: 

<Button Command="{Binding DataContext.DisplayPersonView, RelativeSource=
    {RelativeSource AncestorType={x:Type MainView}}, Mode=OneWay}" />

C'est ça! Profiter.

98
répondu Sheridan 2016-11-25 12:25:24

quand j'ai commencé avec le MVVM, j'ai aussi eu du mal avec les différents MVVM-frameworks et surtout la partie navigation. Donc j'utilise ce petit tutoriel que j'ai trouvé, que Rachel Lim a créé. C'est très joli et très bien expliqué.

consultez le lien suivant:

Espère que ça a aidé vous:)

6
répondu mskydt86 2013-10-29 09:41:29

peut-être ce lien vous aidera. Il suffit de définir la propriété NavigateTo à la vue que vous devez afficher sur la fenêtre.

comme exemple, vous pouvez faire quelque chose comme 

<Window x:Class="MainWindowView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                                 xmlns:meffed="http:\www.codeplex.com\MEFedMVVM"
                                 meffed:ViewModelLocator.NonSharedViewModel="YourViewModel"
                                 WindowStartupLocation="CenterScreen">

    <Button meffed:NavigationExtensions.NavigateTo="firstview"
                    meffed:NavigationExtensions.NavigationHost="{Binding ElementName=_viewContainer}"
                    meffed:NavigationExtensions.NavigateOnceLoaded="False"
                    Visibility="Visible" />

    <ContentControl x:Name="_viewContainer" Margin="0,0,0,10" />
<Window>

alors le fichier de classe serait 

public partial class MainWindowView : Window
{
    public MainWindowView()
    {           
              InitializeComponent();
    }

        public ContentControl ViewContainer { get { return _viewContainer; } }

    }

alors vous pouvez définir chaque vue comme UserControl et puis en utilisant le lien que j'ai donné ci-dessus lient le bouton meffed:NavigationExtensions.NavigateTo="secondView" . Pour cibler le ContentControl de le Window n'utilise qu'une reliure RelativeSource . For E. g

meffed:NavigationExtensions.NavigationHost="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}},Path=ViewContainer}"

dans chaque vue il suffit de voir que vous annotez le code derrière la définition de classe avec le [NavigationView("firstview")] et ainsi de suite.

C'est compliqué pour la première fois, mais il sera très facile une fois que vous comprenez l'idée.

1
répondu Sandesh 2013-10-30 09:09:29 
<ContentControl x:Name="K.I.S.S" Content="{Binding ViewModel, Converter={StaticResource ViewLocator}}"/>
1
répondu atomaras 2016-04-11 02:17:36