Switching between WPF XAML views using MVVM DataTriggers

Related post:

https://www.technical-recipes.com/2016/switching-between-wpf-xaml-views-using-mvvm-datatemplate/

This post addresses the problem of being able to switch between different views based on the property of a ViewModel class.

To get started in Visual Studio, create a new WPF Application:

So that when we build and run the application we have a blank window like this:

To demonstrate how WPF windows can be made to switch between different views, create two new XAML views, View1.xaml and View2.xaml, each consisting of a simple TextBlock containing different texts to demonstrate that the views are different.

In your Visual Studio project, right-click your project folder and select Add > New Item. Select User Control (WPF) and name your file as View1.xaml:

In the xaml portion of the file, insert the code to display the Text in the view as follows:

<UserControl x:Class="XamlSwitching.View1"
             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" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <TextBlock FontSize="20" Margin="10" VerticalAlignment="Center" HorizontalAlignment="Center">
            Screen for View1
        </TextBlock>
    </Grid>
</UserControl>

Repeat the previous step, but this time creating a new view called View2.xaml. Insert the code for View2.xaml as shown:

<UserControl x:Class="XamlSwitching.View2"
             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" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <TextBlock FontSize="20" Margin="10" VerticalAlignment="Center" HorizontalAlignment="Center">
            Screen for View2
        </TextBlock>
    </Grid>
</UserControl>

We may wish to switch between XAML views based on a property of a class. For example, display View1 if our ViewModel property is set to “0”; otherwise display View 2 if our ViewModel property is set to “1”. In this case, you would use a DataTrigger.

Create a very simple ViewModel class by right-clicking your project folder, select Add > New Item. Select Class and we will call our ViewModel class MainWindowViewModel.cs:

Our ViewModel class contains a getter/setter property and a constructor to set the default property value:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace XamlSwitching
{
    public class MainWindowViewModel
    {
        public int SwitchView
        {
            get;
            set;
        }

        public MainWindowViewModel()
        {
            SwitchView = 0;
        }
    }
}

In our MainWindow.xaml we configure our DataTemplate, DataContext with the ViewModel class we created.

And also the DataTrigger, to tell the application which view to display, if the property is set to anything other than the default:

<Window x:Class="XamlSwitching.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:XamlSwitching"
        Title="MainWindow" Height="350" Width="525">

    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>

    <Window.Resources>
        <DataTemplate x:Key="View1Template" DataType="{x:Type local:MainWindowViewModel}">
            <local:View1 />
        </DataTemplate>

        <DataTemplate x:Key="View2Template" DataType="{x:Type local:MainWindowViewModel}">
            <local:View2 />
        </DataTemplate>
    </Window.Resources>

    <Grid>
        <ContentControl Content="{Binding }">
            <ContentControl.Style>
                <Style TargetType="{x:Type ContentControl}">
                    <Setter Property="ContentTemplate" Value="{StaticResource View1Template}" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding SwitchView}" Value="1">
                            <Setter Property="ContentTemplate" Value="{StaticResource View2Template}" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ContentControl.Style>
        </ContentControl>
    </Grid>
</Window>

In our ViewModel constructor, the ‘SwitchView’ property is defaulted to “0”, thereby causing the application to display View1 when run:

Now set the ‘SwitchView’ property to “1” inside the ViewModel constructor:

public MainWindowViewModel()
        {
            SwitchView = 1;
        }

When re-building and re-running the application we get the View2 screen displayed as shown: