How to add UserControl to a button in C# WPF App?

Yuvaan Nevatia 0
Viewed 35

I am developing a C# WPF app using dot-net Framework version 4.8. I have created user control and now I want it to be opened fully as it is whenever the button in the main window is clicked. I am new to C# and I want help.

wpf c#
1 Answers

it should not be opened in an empty space in the main window but instead, the contents of the main window should not be visible there. And Aldo there should be a back button to go back to the main window.

The simple example with using RoutedCommand and switching the Window's Content.

Create an instance of RoutedCommand in a static class:

using System.Windows.Input;

namespace Core2022.SO.YuvaanNevatia
{
    public static class MyCommands
    {
        public static RoutedUICommand GoToContent { get; }
            = new RoutedUICommand("Jump to content back command in parameter", nameof(GoToContent), typeof(MyCommands));
    }
}

Create UserControls to present pages:

<UserControl x:Class="Core2022.SO.YuvaanNevatia.MainUserControl"
             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:Core2022.SO.YuvaanNevatia"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800" Background="AliceBlue">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Viewbox>
            <TextBlock Text="Main"/>
        </Viewbox>
        <Button Grid.Row="1" Content="Go to First" Margin="5"
                Command="{x:Static local:MyCommands.GoToContent}"
                CommandParameter="First"/>
    </Grid>
</UserControl>

<UserControl x:Class="Core2022.SO.YuvaanNevatia.FirstUserControl"
             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:Core2022.SO.YuvaanNevatia"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800" Background="Beige">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Viewbox>
            <TextBlock Text="First"/>
        </Viewbox>
        <Button Grid.Row="1" Content="Go to Main" Margin="5"
                Command="{x:Static local:MyCommands.GoToContent}"
                CommandParameter="Main"/>
    </Grid>
</UserControl>

Set the processing of the command and display of the main page in the Window:

<Window x:Class="Core2022.SO.YuvaanNevatia.SingleWindow"
        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:Core2022.SO.YuvaanNevatia"
        mc:Ignorable="d"
        Title="SingleWindow" Height="450" Width="800">
    <Window.CommandBindings>
        <CommandBinding Command="{x:Static local:MyCommands.GoToContent}"
                        Executed="OnGoToContent"/>
    </Window.CommandBindings>
    <local:MainUserControl/>
</Window>

using System.Windows;
using System.Windows.Input;

namespace Core2022.SO.YuvaanNevatia
{
    public partial class SingleWindow : Window
    {
        public SingleWindow()
        {
            InitializeComponent();
        }

        private void OnGoToContent(object sender, ExecutedRoutedEventArgs e)
        {
            if (e.Command == MyCommands.GoToContent)
            {
                Content = e.Parameter switch
                {
                    "Main" => new MainUserControl(),
                    "First" => new FirstUserControl(),
                    _ => e.Parameter
                };
            }
        }
    }
}
EldHasp0
Related