如何将 UserControl 添加到 C# WPF App 中的按钮？

Question

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.

Answer 1

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
                };
            }
        }
    }
}