How to switch contenttemplate dependent which view model object?

blazer 0
Viewed 20

How to settings which view showup when specific viewmodel set? i read this explain with data template but i still dont understand. cause it dont show all code that use data template as switch view. https://learn.microsoft.com/en-us/archive/msdn-magazine/2009/february/patterns-wpf-apps-with-the-model-view-viewmodel-design-pattern

<Window x:Class="Pandora.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:Pandora.ViewModels"
        Title="Pandora" Height="350" Width="525">
    <Window.ContentTemplate>
            <DataTemplate DataType="{x:Type vm:IndexViewModel}">
                <TextBlock>Index Content</TextBlock>
            </DataTemplate>

            <DataTemplate DataType="{x:Type vm:DashboardViewModel}">
                <TextBlock>Dashboard Content</TextBlock>
            </DataTemplate>
    </Window.ContentTemplate>
</Window>

C#

using Pandora.ViewModels;

namespace Pandora.Views;

public partial class MainWindow
{
    public MainWindow()
    {
      InitializeComponent();
      DataContext = new IndexViewModel();
    }
}
xaml wpf c#
2 Answers

For Window to show anything it should have some Content (empty Window template contains <Grid></Grid> element). Simply copy Content from DataContext by using binding.

In your case you want to show elements, which don't have visual representation of their own (IndexViewModel, DashboardViewModel), so they require a custom DataTemplate. You already have, just put them in Resources.

<Window x:Class="Pandora.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:Pandora.ViewModels"
        Title="Pandora" 
        Content="{Binding}"
        Height="350" Width="525">
    <Window.Resources>
        <DataTemplate DataType="{x:Type vm:IndexViewModel}">
            <TextBlock>Index Content</TextBlock>
        </DataTemplate>

        <DataTemplate DataType="{x:Type vm:DashboardViewModel}">
            <TextBlock>Dashboard Content</TextBlock>
        </DataTemplate>
    </Window.Resources>
</Window>

or more common method which uses a separate element to insert custom content:

<Window x:Class="Pandora.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:Pandora.ViewModels"
        Title="Pandora" 
        Height="350" Width="525">
    <Window.Resources>
        <DataTemplate DataType="{x:Type vm:IndexViewModel}">
            <TextBlock>Index Content</TextBlock>
        </DataTemplate>

        <DataTemplate DataType="{x:Type vm:DashboardViewModel}">
            <TextBlock>Dashboard Content</TextBlock>
        </DataTemplate>
    </Window.Resources>
    <Grid>
         <ContentPresenter Content="{Binding}"/>
         <TextBlock Text="Demo watermark" VerticalAlignment="Center" HorizontalAlignment="Center" IsHitTestVisible="False"/>
    </Grid>
</Window>
usergVj60

You must assign the IndexViewModel or DashboardViewModel instance to the Window.Content property. The ContentTemplate applies to the data object that is the current value of the Content property:

public partial class MainWindow
{
    public MainWindow()
    {
      InitializeComponent();
      this.Content = new IndexViewModel();
    }
}
BionicCode0
Related