UWP 应用程序中单击按钮时如何隐藏弹窗？

在 UWP 应用程序中单击按钮时隐藏弹窗

问题

在 UWP 应用程序中，使用弹窗提供重要的信息或功能时，可能需要在用户单击弹窗外部时自动隐藏弹窗。然而，这样做会导致在弹窗内放置的按钮在单击时仅隐藏弹窗，而不会触发按钮的单击事件。

解决方法

1. 创建附加属性

创建一个名为 PopupDismissBehavior 的附加属性类，其中包含一个名为 DismissOnButtonPress 的属性：

using System;
using Windows.UI.Xaml;

public class PopupDismissBehavior : DependencyObject
{
    public static readonly DependencyProperty DismissOnButtonPressProperty =
        DependencyProperty.RegisterAttached(
            "DismissOnButtonPress",
            typeof(bool),
            typeof(PopupDismissBehavior),
            new PropertyMetadata(false)
        );

    public static bool GetDismissOnButtonPress(DependencyObject element) =>
        (bool)element.GetValue(DismissOnButtonPressProperty);

    public static void SetDismissOnButtonPress(DependencyObject element, bool value) =>
        element.SetValue(DismissOnButtonPressProperty, value);
}

2. 使用附加属性

在 XAML 中，将 DismissOnButtonPress 附加属性设置为 True，以使具有此属性的按钮在单击时隐藏关联的弹窗：

<Button Width="100" Height="50" Margin="300 0 0 0" Content="Button 2" Click="Button2_Click" PopupDismissBehavior.DismissOnButtonPress="True"></Button>

3. 在按钮的单击事件处理程序中关闭弹窗

在按钮的单击事件处理程序中，检查 IsLightDismissEnabled 属性。如果是 True，则使用 Dismiss 方法显式关闭弹窗：

private void Button2_Click(object sender, RoutedEventArgs e)
{
    if (popup.IsLightDismissEnabled)
    {
        popup.Dismiss();
    }
}

常见问题解答

1. 为什么需要附加属性？

附加属性允许将行为附加到 XAML 元素，而无需修改元素本身的源代码。这使我们可以灵活地配置元素的行为，而不会破坏其可维护性。

2. 如何判断 IsLightDismissEnabled 属性是否为 True？

IsLightDismissEnabled 是一个依赖属性，它有一个 Get 方法和一个 Set 方法。要判断属性是否为 True，可以使用 if (popup.IsLightDismissEnabled) 条件。

3. 可以为多个按钮设置 DismissOnButtonPress 吗？

是的，可以为多个按钮设置 DismissOnButtonPress 属性。每个具有此属性的按钮都会在单击时隐藏关联的弹窗。

4. 这是否适用于所有类型的弹窗？

此解决方案适用于任何具有 IsLightDismissEnabled="True" 属性的弹窗，包括 Popup、Flyout 和 ContentDialog。

5. 我可以在没有按钮的情况下使用此解决方案吗？

此解决方案主要是针对带有按钮的弹窗。如果弹窗没有按钮，可以考虑使用 Tapped 或 Click 事件处理程序显式隐藏弹窗。

结论

通过使用附加属性和在按钮的单击事件处理程序中关闭弹窗，我们可以实现弹窗在单击按钮时自动隐藏并触发按钮单击事件。此方法使我们能够创建具有交互式弹窗的干净高效的 UWP 应用程序。