How do I use multiple user-controls inside one xaml page?

Question

I'm creating an application for educational purposes. How can i use multiple User controls in my "MainWindow.xaml"?

I want to use User controls on my MainWindow so that I wont need multiple windows. So after you press next on the sign up layout,

it should take you to the thank you screen which is also another UserControl class. Although in the same Window.

I've read as many different "solutions" as I could, without any real luck..

Here's the code I have atm.

Main Window.xaml

<Window x:Class="WpfApp1.MainWindow"
    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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApp1"
    mc:Ignorable="d"
    Title="MainWindow" Height="700" Width="700"
    WindowStartupLocation="CenterScreen">

<Grid>
    <!--Background image-->
    <Grid.Background >
        <ImageBrush ImageSource="login-page-background-3.jpg"/>
    </Grid.Background>

    <!--Main content scroll-->
    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
        <local:SignUpControl>

        </local:SignUpControl>
    </ScrollViewer>
</Grid>

MainWindow.xaml.cs has no code...

SignUpControl.Xaml

<UserControl x:Class="WpfApp1.SignUpControl"
         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" 
         xmlns:local="clr-namespace:WpfApp1"
         mc:Ignorable="d" 
         d:DesignHeight="450" d:DesignWidth="800">
<StackPanel
            VerticalAlignment="Center"
            HorizontalAlignment="Center"
            TextBlock.TextAlignment="Center">

    <!--Login main content white box-->
    <Border Background="WhiteSmoke" 
                    Opacity="0.4"
                    CornerRadius="30"
                    Padding="15 50 15 15"
                    Width="350" 
                    Margin="50 50 50 0">

        <StackPanel>

            <!--Sign Up header-->
            <TextBlock FontSize="20" 
                           HorizontalAlignment="Center" 
                           VerticalAlignment="Top" 
                           Height="auto" 
                           FontFamily="Goudy Stout" >Sign Up</TextBlock>

            <!--Sign up subtext-->
            <TextBlock FontSize="14" 
                               HorizontalAlignment="Center" 
                               VerticalAlignment="Top"
                               Height="auto" 
                               FontFamily="Ravie" >It's about to get fun!</TextBlock>

            <!--Inner grid for Username & Password-->
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <!--Textbox for username-->
                <TextBox Grid.Row="0" BorderThickness="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontFamily="Arial" FontWeight="Bold" FontSize="14" x:Name="UsernameBox" Margin="5"/>
                <TextBlock IsHitTestVisible="False" Text="Username" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10,0,0,0" FontFamily="Arial" FontWeight="Bold" FontSize="14" Foreground="Black">
                    <TextBlock.Style>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="Visibility" Value="Collapsed"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding Text, ElementName=UsernameBox}" Value="">
                                    <Setter Property="Visibility" Value="Visible"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </TextBlock.Style>
                </TextBlock>

                <!--PasswordBox-->
                <TextBox Grid.Row="1" BorderThickness="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontFamily="Arial" FontWeight="Bold" FontSize="14" x:Name="passwordBox" Margin="5"/>
                <TextBlock Grid.Row="1" IsHitTestVisible="False" Text="password" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10,0,0,0" FontFamily="Arial" FontWeight="Bold" FontSize="14" Foreground="Black">
                    <TextBlock.Style>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="Visibility" Value="Collapsed"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding Text, ElementName=passwordBox}" Value="">
                                    <Setter Property="Visibility" Value="Visible"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </TextBlock.Style>
                </TextBlock>

            </Grid>

            <!--Next Button-->
            <Button Content="Next" 
                            HorizontalAlignment="Center" 
                            FontWeight="Bold"
                            FontSize="14"
                            BorderThickness="0"
                            FontFamily="Goudy Stout"
                            Background="Transparent"
                            Padding="20 10"
                            Margin="0 10"
                            x:Name="NextButton"
                            Click="NextButton_Click"/>

        </StackPanel>

    </Border>

    <!--Border for PreRegistered account-->
    <Border Background="WhiteSmoke" 
                    Opacity="0.4"
                    CornerRadius="50"
                    Padding="0"
                    Width="400" 
                    Height="auto"
                    Margin="0 12.5 0 0">

        <!--Already registered button-->
        <Button Content="I already have an account"  
                    HorizontalAlignment="Center" 
                    Opacity="0.8"
                    FontSize="13"
                    BorderThickness="0" 
                    FontFamily="Goudy Stout" 
                    Background="Transparent"
                    Foreground="Black"
                    x:Name="alreadyRegBtn"
                    Padding="0 10"
                    Margin="0 5 0 5"/>

    </Border>

</StackPanel>

How do I go about doing this solution where I can change between user controls on the same window, Ofcourse after the thank you screen I will be using the same logic to go to "Sign In!" an so on...

Answer 1

When i'm not using Prism or Dependency Injection then I normally use the View Model first approach.

In this scenario we have a property on our Windows ViewModel that is a class that the other UserControls ViewModels inherit from, normally just use a ViewModelBase class that has the implimentation of INotifyPropertyChanged:

private ViewModelBase currentViewModel;
public ViewModelBase CurrentViewModel
{
    get { return currentViewModel; }
    set { currentViewModel = value; NotifyPropertyChanged(); }
}

Now inside of your MainWindow like @Tomtom said you have a ContentControl bound to that property. This means that using DataTemplates You can have a different View display depending on which ViewModel type is currently on that property.

<Window.Resources>
    <DataTemplate DataType="{x:Type viewmodels:ViewModel1}">
        <views:View1/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type viewmodels:ViewModel2}">
        <views:View2/>
    </DataTemplate>
</Window.Resources>

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

With this in place all you need to do is have some logic that changes the ViewModel on the MainWindow ViewModel and the View will update to display the correct View for that ViewModel.

Edit: One thing to note is there are lots of different ways people use to achieve what you want, none of them are really right or wrong but they all suit different peoples needs and coding styles.

Answer 2

I've answered a similar question a while ago.

See this post

You can create a ContentControl in your Window and switch the bound UserControl where the user clicks or something else