19

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.

1 Answer 1

43

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();
Sign up to request clarification or add additional context in comments.

3 Comments

Sorry to be stupid but I am totally naive, if you would show me a user control as well it will help a lot. Thanks for sharing this anyway!
but the user control is also pre-built. how would you create a user control in run-time?
@StasPrihod'co you mean different from new MyUserControl();?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.