从另一个视图更改为视图

Question

i am currently learning C# and WPF. I have started coding simple application, i have 1 model class (Book), 2 model views (BookListModelView, AddNewBookModelView) and 2 views booth are UserControl (BookListView, AddNewBookView).

My question is how can i change to AddNewBookView when my current view is BookListView?

MainWindow.xaml:

<ContentControl Grid.Row="1" Grid.Column="1" Content="{Binding}"/>

MainWindow.xaml.cs:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        BookListModelView bookListMV = new BookListModelView();
        this.DataContext = bookListMV;
    }
}

BookListView.xaml.cs

public partial class BookListView : UserControl
{
    public BookListView()
    {
        InitializeComponent();
    }

    private void NewBookBtn_Click(object sender, RoutedEventArgs e)
    {
        this.DataContext = new AddNewBookViewModel();
    }
}

Thank you for your answers!

Answer 1

The usual way to achieve this is with DataTemplates. Basically you have a property in your main view model containing the view models of your child page:

public object PageViewModel {get; set;} // <--- needs property change notification

I've used object as the type here, whereas in practice you typically have some base class for your pages.

Over in your view you create a ContentControl and bind it to this property:

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

Finally, you need to specify some kind of mapping specifying which view to display for each view model type. That's where data templates come in:

<DataTemplate DataType="{x:Type local:ChildViewModel1}">
    <local:ChildViewControl1 />
</DataTemplate>

<DataTemplate DataType="{x:Type local:ChildViewModel2}">
    <local:ChildViewControl2 />
</DataTemplate>

Another way to achieve this is via Data Triggers. These get put in the parent's style and check for each possible value, setting the content explicitly:

<DataTrigger Binding="{Binding PageViewModelProperty}" Value="SomeChildViewModel1Value">
    <Setter Property="Template" Value="{StaticResource MyPageTemplate1}" />
</DataTrigger>

<DataTrigger Binding="{Binding PageViewModelProperty}" Value="SomeChildViewModel2Value">
    <Setter Property="Template" Value="{StaticResource MyPageTemplate2}" />
</DataTrigger>

... and so on. This is a better fit in cases where you may not have a separate class type for each of your page types eg in the case of page containing content that is generated dynamically.