Change Windows Content Control From User Control - WPF

Question

In my project I have a Window called AccountWindow.xaml which has a ContentControl to display the two UserControls.

AccountWindow

<Window>
    <Window.Resources>
        <!-- Login User Control Template -->
        <DataTemplate x:Name="LoginUserControl" DataType="{x:Type ViewModels:LoginViewModel}">
            <AccountViews:LoginUserControl DataContext="{Binding}"/>
        </DataTemplate>

        <!-- Registration User Control Template -->
        <DataTemplate x:Name="RegistrationUserControl" DataType="{x:Type ViewModels:RegistrationViewModel}">
            <AccountViews:RegistrationUserControl DataContext="{Binding}" />
        </DataTemplate>
    </Window.Resources>

    <Grid>
        <!-- ContentControl that displays the two User Controls -->
        <ContentControl Content="{Binding}" />
    </Grid>
</Window>

I then have two user controls called LoginUserControl and RegistrationUserControl

Login User Control

<Grid Background="Pink">
        <Button Content="Switch To Register View" Command="{Binding SwitchToReg}" Margin="100" />
    </Grid>

Register User Control

<Grid Background="Orange">
    <Button Content="Press Me" Command="{Binding PressMe}" Margin="100" />
</Grid>

Both the Login User Control and the Registration User Control have their own ViewModels with a RelayCommand inside that is bound to the buttons as shown in the code.

Login View Model

public class LoginViewModel
    {
        public RelayCommand SwitchToReg
        {
            get
            {
                return new RelayCommand(param =>
                {
                    Console.WriteLine("Switch To Reg");
                    // Somehow change the content control in the AccountWindow to show the RegistrationDataTemplate???
                });
            }
        }
    }

The Problem

I want to be able to change the content of the ContentControl in the AccountWindow when the user presses on one of the buttons in the UserControls. For example, when the user presses the button in the Login User Control called "Switch To Register View" it executes a the Command SwitchToReg and changes the content control to RegistrationUserControl & its ViewModel. How could this be possible?

Answer 1

To achieve that you would need to pass a reference for the AccountWindow into the UserControl when you are constructing it and then your Command can update the ContentControl using the reference you have provided.

This is introducing coupling which is better to avoid so instead I would suggest thinking about the design of the AccountWindow. I would use grid rows to separate the ContentControl area from the button which will change the UserControl.

In the window above, the blue area is where I would host the ContentControl and the red area is part of the AccountWindow.

This way, the behaviour for switching the ContentControl is entirely handled by the AccountWindow.

Answer 2

You can create a property and attache it to the control. Or you can create another user control and make it visible o not controled by the property that you created.