Changing content dynamically in wpf window - wpf

Question

What i want to do is change/slide the content of a wpf window on the click of a button. I am new to wpf and have no clue how to do this. Please, if anyone can help me, I will be so grateful. Any video tutorials would be best.

Answer 1

You can put the content of the window into a UserControl. Your window then only has a content-control and a button to change the content. On a click on the button you can reassign the content-property of the content-control.
I've made a small example for this.
The XAML-Code for your MainWindow can look like this:
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Content="Switch" Click="ButtonClick"/>
<ContentControl x:Name="contentControl" Grid.Row="1"/>
</Grid>
</Window>
I've added two UserControls to the solution. The CodeBehind for the MainWindow looks like:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.contentControl.Content = new UserControl1();
}
private void ButtonClick(object sender, RoutedEventArgs e)
{
this.contentControl.Content = new UserControl2();
}
}
Update
I've created a small usercontrol called MyUserControl. The xaml-markup looks like
<UserControl x:Class="WpfApplication.MyUserControl"
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">
<StackPanel Orientation="Vertical">
<Label Content="This is a label on my UserControl"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Button Content="Testbutton 1" Margin="5"/>
<Button Content="Testbutton 2" Margin="5"/>
</StackPanel>
<CheckBox Content="Check Me"/>
</StackPanel>
</UserControl>
In the button-click-event above you can assign a new instance of this usercontrol to the content-control. This you can do by:
this.contentControl.Content = new MyUserControl();