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

Question

我正在使用 dot-net Framework 4.8 版开发 C# WPF 应用程序。 我已经创建了用户控件，现在我希望它在主 window 中的按钮被单击时完全打开。 我是 C# 的新手，我需要帮助。

Answer 1

它不应该在主 window 的空白空间中打开，而是主 window 的内容不应该在那里可见。 并且 Aldo 应该有一个返回按钮到 go 回到主 window。

使用 RoutedCommand 和切换窗口内容的简单示例。

在 static class 中创建 RoutedCommand 的实例：

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

创建用户控件以呈现页面：

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

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