如何將 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
                };
            }
        }
    }
}