c# - 我如何在 WPF 中模仿这种行为？

Question

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

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

无论如何，这是一个GIF以帮助证明这种特定行为(忽略星星，不想泄露个人信息)。

https://i.imgur.com/cn0sFlO.gifv

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

Answer 1

这是一个您可以使用和操作的自定义 Flyout 控件，它的工作方式与您正在寻找的一样。

下面将向您展示如何编写和使用与此类似的自定义 Flyout:

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

我看到您已经有了答案，但是当我看到这个问题时我就开始构建它了，所以如果您想接受它并按照您希望的方式使用它，那很好；我想我也会分享这个答案，因为我付出了努力。

我建议更进一步，添加一个 AttachableProperty，可用于将 Flyout 附加到控件，就像 UWP 应用程序中的按钮一样。在 AP 中，您可以找到 MainWindow 并将其添加到网格的底部并自动显示；然而，这假设 MainWindow 有一个 Grid 的根面板。编辑:我还添加了一个附加属性以供引用。

FlyoutControl.xaml

<ContentControl x:Name="ContentControl" 
                x:Class="Question_Answer_WPF_App.FlyoutControl"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                Template="{DynamicResource ContentControlTemplate}"
                Opacity="0"
                Visibility="Hidden">

    <ContentControl.Resources>

        <Duration x:Key="OpenDuration">00:00:00.4</Duration>

        <Storyboard x:Key="OpenStoryboard" Duration="{StaticResource OpenDuration}">
            <DoubleAnimation Storyboard.TargetName="ContentControl" Storyboard.TargetProperty="Opacity" To="1" Duration="{StaticResource OpenDuration}">
                <DoubleAnimation.EasingFunction>
                    <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentControl" Storyboard.TargetProperty="Visibility" Duration="{StaticResource OpenDuration}">
                <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" KeyTime="00:00:00" />
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Key="OpenInnerContentStoryboard" Duration="{StaticResource OpenDuration}">
            <DoubleAnimation Storyboard.TargetName="scaleTransform" Storyboard.TargetProperty="ScaleX" To="1" Duration="{StaticResource OpenDuration}">
                <DoubleAnimation.EasingFunction>
                    <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>

            <DoubleAnimation Storyboard.TargetName="scaleTransform" Storyboard.TargetProperty="ScaleY" To="1" Duration="{StaticResource OpenDuration}">
                <DoubleAnimation.EasingFunction>
                    <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>

        <Storyboard x:Key="CloseStoryboard">
            <DoubleAnimation Storyboard.TargetName="ContentControl" Storyboard.TargetProperty="Opacity" To="0" Duration="00:00:00"/>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentControl" Storyboard.TargetProperty="Visibility">
                <DiscreteObjectKeyFrame Value="{x:Static Visibility.Hidden}" KeyTime="00:00:00" />
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Key="CloseInnerContentStoryboard">
            <DoubleAnimation Storyboard.TargetName="scaleTransform" Storyboard.TargetProperty="ScaleX" To="0" Duration="00:00:00"/>
            <DoubleAnimation Storyboard.TargetName="scaleTransform" Storyboard.TargetProperty="ScaleY" To="0" Duration="00:00:00"/>
        </Storyboard>

        <ControlTemplate x:Key="InnerContentButtonTemplate" TargetType="Button">
            <ContentPresenter />
        </ControlTemplate>

        <ControlTemplate x:Key="BackgroundButtonTemplate" TargetType="Button">
            <Grid Background="Black">
                <Button VerticalAlignment="Center" HorizontalAlignment="Center" Click="InnerContentButtonClick" Template="{StaticResource InnerContentButtonTemplate}">
                    <ContentPresenter />
                </Button>
            </Grid>
        </ControlTemplate>

        <ControlTemplate x:Key="ContentControlTemplate" TargetType="ContentControl">
            <Button x:Name="BackgroundButton" Template="{StaticResource BackgroundButtonTemplate}" Background="#B2000000" Click="BackgroundButtonClick">
                <ContentPresenter RenderTransformOrigin="0.5, 0.5">
                    <ContentPresenter.RenderTransform>
                        <ScaleTransform x:Name="scaleTransform" ScaleX="0" ScaleY="0"/>
                    </ContentPresenter.RenderTransform>
                </ContentPresenter>
            </Button>
        </ControlTemplate>
    </ContentControl.Resources>

</ContentControl>

FlyoutControl.xaml.cs

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Animation;

namespace Question_Answer_WPF_App
{
    public partial class FlyoutControl : ContentControl
    {
        public FlyoutControl() => InitializeComponent();

        private void OpenFlyout()
        {
            var openStoryboard = Resources["OpenStoryboard"] as Storyboard;
            var openInnerContentStoryboard = Resources["OpenInnerContentStoryboard"] as Storyboard;

            openStoryboard.Begin();
            openInnerContentStoryboard.Begin(this, Template);
        }

        private void CloseFlyout()
        {
            var closeStoryboard = Resources["CloseStoryboard"] as Storyboard;
            var closeInnerContentStoryboard = Resources["CloseInnerContentStoryboard"] as Storyboard;     

            closeStoryboard.Begin();
            closeInnerContentStoryboard.Begin(this, Template);
        }

        public bool IsOpen
        {
            get { return (bool)GetValue(IsOpenProperty); }
            set { SetValue(IsOpenProperty, value); }
        }

        public static readonly DependencyProperty IsOpenProperty =
            DependencyProperty.Register(nameof(IsOpen),
                                        typeof(bool),
                                        typeof(FlyoutControl),
                                        new PropertyMetadata(false,
                                        new PropertyChangedCallback((s, e) =>
                                        {
                                            if (s is FlyoutControl flyoutControl && e.NewValue is bool boolean)
                                            {
                                                if (boolean)
                                                {
                                                    flyoutControl.OpenFlyout();
                                                }
                                                else
                                                {
                                                    flyoutControl.CloseFlyout();
                                                }
                                            }
                                        })));

        //Closes Flyout
        private void BackgroundButtonClick(object sender, RoutedEventArgs e) => IsOpen = false;

        //Disables clicks from within inner content from explicitly closing Flyout.
        private void InnerContentButtonClick(object sender, RoutedEventArgs e) => e.Handled = true;
    }
}

可以像这样使用:

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

您可以手动控制它，也可以像这样通过绑定(bind)控制它:

代码隐藏

flyoutControl.IsOpen = !flyoutControl.IsOpen;

XAML 绑定(bind)

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

这是可附加属性，因此您可以更像 UWP 应用一样使用它

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>

窗口

点击按钮