C# 如何在WPF中模拟这种行为？

我对WPF和C#Development相当陌生，我正在开发这个应用程序。我不知道是否有人熟悉VOIP应用程序Discord，但他们有一个我非常喜欢的特定行为，我想尝试用WPF创建一个类似的风格

当您在Discord上添加服务器时，单击一个按钮，整个后窗口将消失，前台将打开一个新窗口，提示您添加服务器。在窗口外单击可使窗口在背景窗口处关闭以重新聚焦

无论如何，这里有一个例子可以帮助你展示这种特殊的行为（忽略明星，不想泄露个人信息）

---

我对这一切都很陌生，所以不知道如何去模仿这种行为。

在XAML中：将

窗口中的所有内容放入
网格中。然后，当您想在所有内容上显示“新窗口”时，只需将控件添加到末尾的同一
网格中即可。这将导致新添加的控件显示在所有其他控件之上

例如，如果希望其他所有内容都淡出，则添加背景为黑色且不透明度为0.5的
Canvas
。你可以添加任何你想要的东西，并以任何你想要的方式设计你的“新窗口”

如果您想查看一些示例代码，请查看GitHub上的WPF库。这正是你想要达到的目标。还可以查看以查看对话框的运行情况。
这是一个自定义弹出控件，您可以使用和操作它，它的工作方式与您正在查找的一样

以下内容将向您展示如何编写和使用自定义弹出按钮，如下所示：

<Window.Resources>
    <local:FlyoutControl x:Key="CustomFlyout">
        <Grid Width="400" Height="200" Background="PeachPuff">
            <TextBlock Text="Inside Flyout" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Grid>
    </local:FlyoutControl>
</Window.Resources>

<Grid>
    <Button Content="I have a flyout"
            Width="120"
            Height="40"
            local:FlyoutAttach.Flyout="{StaticResource CustomFlyout}"/>
</Grid>

可以像这样使用：

<local:FlyoutControl>
    <MyUserControlThatLooksLikeDiscord />
</local:FlyoutControl>

<Window.Resources>
    <local:FlyoutControl x:Key="CustomFlyout" x:Name="flyoutControl">
        <Grid Width="400" Height="200" Background="PeachPuff">
            <TextBlock Text="Inside Flyout" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Grid>
    </local:FlyoutControl>
</Window.Resources>

<Grid>
    <Button Content="I have a flyout"
            Width="120"
            Height="40"
            local:FlyoutAttach.Flyout="{StaticResource CustomFlyout}"/>
</Grid>

XAML绑定

<Grid>
    <local:FlyoutControl x:Name="flyoutControl">
        <Grid Width="400" Height="200" Background="PeachPuff">
            <TextBlock Text="Inside Flyout" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Grid>
    </local:FlyoutControl>

    <CheckBox IsChecked="{Binding IsOpen, ElementName=flyoutControl}" Content="Toggle Flyout" Margin="21" VerticalAlignment="Top" HorizontalAlignment="Left"/>
</Grid>

使用起来很简单：

<local:FlyoutControl>
    <MyUserControlThatLooksLikeDiscord />
</local:FlyoutControl>

<Window.Resources>
    <local:FlyoutControl x:Key="CustomFlyout" x:Name="flyoutControl">
        <Grid Width="400" Height="200" Background="PeachPuff">
            <TextBlock Text="Inside Flyout" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Grid>
    </local:FlyoutControl>
</Window.Resources>

<Grid>
    <Button Content="I have a flyout"
            Width="120"
            Height="40"
            local:FlyoutAttach.Flyout="{StaticResource CustomFlyout}"/>
</Grid>



窗口


点击按钮

谢谢！这实际上完全符合我想要实现的目标！天哪，这太神奇了！非常感谢你。我在动画方面特别困难，但我绝对喜欢这个！再次感谢你的帮助，伙计@哈什贝德：谢谢你，伙计，没问题。。。请注意，这是一个综合的示例。我建议您多花点时间，通过自定义模板、样式等使控件像内置控件一样工作。例如，您可能希望覆盖动画，但出于特定目的，它会执行它需要的操作。嘿@MichaelPucketti很抱歉打扰您。。。所以我一直在玩这个，我使用Attachable类将它直接集成到一个按钮中。对于如何在WPF中使用用户控件，我有点困惑？具体来说，我应该在按钮的本地：FlyoutAttach.flyot=“{StaticResource CustomFlyout}”中添加什么才能使其与WPF中的用户控件UI一起工作？UserControl没有单击事件，因此您需要使用LeftMouseButtonDown事件或类似事件，或者编写自己的单击事件。在AttachableProperty中，您将看到我将其限制为ButtonBase，将其更改为UIElement或按您喜欢的方式限制它。现在，AP将只对从ButtonBase派生的类型起作用。这也是UWP中的行为。或者，您可以将UserControl包装在一个按钮中，并将当前弹出代码应用于该按钮。这有用吗？如果没有发送代码，我将进一步协助。迈克尔·普克特_ii@hotmail.com
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;

namespace Question_Answer_WPF_App
{
    public class FlyoutAttach
    {
        public static FlyoutControl GetFlyout(ButtonBase button)
            => (FlyoutControl)button.GetValue(FlyoutProperty);

        public static void SetFlyout(ButtonBase button, FlyoutControl value)
            => button.SetValue(FlyoutProperty, value);

        public static readonly DependencyProperty FlyoutProperty =
            DependencyProperty.RegisterAttached("Flyout",
                                                typeof(FlyoutControl),
                                                typeof(FlyoutAttach),
                                                new PropertyMetadata(null,
                                                new PropertyChangedCallback((s, e) =>
                                                {
                                                    if (s is ButtonBase button && e.NewValue is FlyoutControl newFlyout)
                                                    {
                                                        if (Application.Current.MainWindow.Content is Grid grid)
                                                        {
                                                            if (e.OldValue is FlyoutControl oldFlyout)
                                                            {
                                                                grid.Children.Remove(oldFlyout);
                                                            }

                                                            grid.Children.Add(newFlyout);

                                                            button.Click -= buttonClick;
                                                            button.Click += buttonClick;
                                                        }
                                                        else
                                                        {
                                                            throw new Exception($"{nameof(Application.Current.MainWindow)} must have a root layout panel of type {nameof(Grid)} in order to use attachable Flyout.");
                                                        }

                                                        void buttonClick(object sender, RoutedEventArgs routedEventArgs)
                                                        {
                                                            newFlyout.IsOpen = true;
                                                        }
                                                    }
                                                })));

    }
}

<Window.Resources>
    <local:FlyoutControl x:Key="CustomFlyout" x:Name="flyoutControl">
        <Grid Width="400" Height="200" Background="PeachPuff">
            <TextBlock Text="Inside Flyout" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Grid>
    </local:FlyoutControl>
</Window.Resources>

<Grid>
    <Button Content="I have a flyout"
            Width="120"
            Height="40"
            local:FlyoutAttach.Flyout="{StaticResource CustomFlyout}"/>
</Grid>