如何在C# WPF中实现模糊主内容上方的内嵌弹窗？

需求是在主内容上方添加模糊遮罩层，并在遮罩层之上显示带独立内容的内嵌弹窗，当前重复编写弹窗XAML的方式冗余，以下是几种通用优化方案：

方案一：自定义可复用弹窗UserControl #

创建封装模糊遮罩和内容容器的自定义控件，统一管理弹窗显示逻辑，使用时仅需传入不同内容即可。

自定义控件XAML（FuzzyPopup.xaml） #

<UserControl x:Class="YourNamespace.FuzzyPopup"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Visibility="{Binding IsVisible, Converter={StaticResource BooleanToVisibilityConverter}}">
    <Grid>
        <!-- 模糊遮罩层 -->
        <Border Background="#88000000">
            <Border.Effect>
                <BlurEffect Radius="8"/>
            </Border.Effect>
        </Border>
        <!-- 弹窗内容容器 -->
        <Border CornerRadius="5" Background="White" Width="300" Height="200" VerticalAlignment="Center" HorizontalAlignment="Center">
            <ContentPresenter Content="{Binding PopupContent}"/>
        </Border>
    </Grid>
</UserControl>

自定义控件后台代码（FuzzyPopup.xaml.cs） #

public partial class FuzzyPopup : UserControl
{
    public static readonly DependencyProperty IsVisibleProperty =
        DependencyProperty.Register(nameof(IsVisible), typeof(bool), typeof(FuzzyPopup), new PropertyMetadata(false));

    public static readonly DependencyProperty PopupContentProperty =
        DependencyProperty.Register(nameof(PopupContent), typeof(object), typeof(FuzzyPopup), new PropertyMetadata(null));

    public bool IsVisible
    {
        get => (bool)GetValue(IsVisibleProperty);
        set => SetValue(IsVisibleProperty, value);
    }

    public object PopupContent
    {
        get => GetValue(PopupContentProperty);
        set => SetValue(PopupContentProperty, value);
    }

    public FuzzyPopup()
    {
        InitializeComponent();
        DataContext = this;
    }
}

使用示例 #

<Grid x:Name="Main_Content1">
    <!-- 主内容 -->
    <TextBlock Text="主界面内容"/>
    
    <!-- 弹窗1 -->
    <local:FuzzyPopup IsVisible="{Binding ShowPopup1}">
        <local:FuzzyPopup.PopupContent>
            <StackPanel>
                <Button Content="按钮1"/>
                <Button Content="按钮2"/>
            </StackPanel>
        </local:FuzzyPopup.PopupContent>
    </local:FuzzyPopup>
    
    <!-- 弹窗2 -->
    <local:FuzzyPopup IsVisible="{Binding ShowPopup2}">
        <local:FuzzyPopup.PopupContent>
            <StackPanel>
                <Button Content="确认"/>
                <TextBlock Text="提示信息"/>
            </StackPanel>
        </local:FuzzyPopup.PopupContent>
    </local:FuzzyPopup>
</Grid>

方案二：利用WPF原生Popup+附加属性 #

借助WPF原生Popup控件的置顶特性，结合附加属性统一控制遮罩和弹窗显示，避免重复编写结构代码。

附加属性定义 #

public static class PopupHelper
{
    public static readonly DependencyProperty HasFuzzyMaskProperty =
        DependencyProperty.RegisterAttached("HasFuzzyMask", typeof(bool), typeof(PopupHelper), new PropertyMetadata(false, OnHasFuzzyMaskChanged));

    public static bool GetHasFuzzyMask(DependencyObject obj)
    {
        return (bool)obj.GetValue(HasFuzzyMaskProperty);
    }

    public static void SetHasFuzzyMask(DependencyObject obj, bool value)
    {
        obj.SetValue(HasFuzzyMaskProperty, value);
    }

    private static void OnHasFuzzyMaskChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (d is Popup popup)
        {
            if ((bool)e.NewValue)
            {
                // 添加模糊遮罩作为Popup的子元素
                var mask = new Border
                {
                    Background = "#88000000",
                    Effect = new BlurEffect { Radius = 8 },
                    HorizontalAlignment = HorizontalAlignment.Stretch,
                    VerticalAlignment = VerticalAlignment.Stretch
                };
                var contentPresenter = popup.Child as ContentPresenter ?? new ContentPresenter { Content = popup.Child };
                var grid = new Grid();
                grid.Children.Add(mask);
                grid.Children.Add(contentPresenter);
                popup.Child = grid;
            }
        }
    }
}

使用示例 #

<Grid x:Name="Main_Content2">
    <!-- 主内容 -->
    <Button Content="打开弹窗" Click="OpenPopup_Click"/>
    
    <Popup x:Name="DemoPopup" Placement="Center" local:PopupHelper.HasFuzzyMask="True">
        <Border CornerRadius="5" Background="White" Width="250" Height="150">
            <StackPanel>
                <TextBlock Text="弹窗内容"/>
                <Button Content="关闭" Click="ClosePopup_Click"/>
            </StackPanel>
        </Border>
    </Popup>
</Grid>

后台控制显示 #

private void OpenPopup_Click(object sender, RoutedEventArgs e)
{
    DemoPopup.IsOpen = true;
}

private void ClosePopup_Click(object sender, RoutedEventArgs e)
{
    DemoPopup.IsOpen = false;
}

方案三：MVVM模式下的ContentTemplate驱动 #

通过ViewModel管理弹窗的显示状态和内容模板，在主界面中用ContentControl动态加载弹窗，完全解耦UI和逻辑。

弹窗ViewModel基类 #

public class PopupViewModelBase : INotifyPropertyChanged
{
    private bool _isVisible;
    public bool IsVisible
    {
        get => _isVisible;
        set { _isVisible = value; OnPropertyChanged(); }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

public class ConfirmPopupViewModel : PopupViewModelBase
{
    public string Message { get; set; }
    public ICommand ConfirmCommand { get; set; }
}

主界面XAML #

<Grid x:Name="Main_Content3" DataContext="{Binding MainViewModel}">
    <!-- 主内容 -->
    <Button Content="打开确认弹窗" Command="{Binding OpenConfirmPopupCommand}"/>
    
    <!-- 弹窗容器 -->
    <ContentControl Visibility="{Binding CurrentPopup.IsVisible, Converter={StaticResource BooleanToVisibilityConverter}}">
        <ContentControl.Style>
            <Style TargetType="ContentControl">
                <!-- 模糊遮罩层 -->
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ContentControl">
                            <Grid>
                                <Border Background="#88000000" Effect="{StaticResource BlurEffect}"/>
                                <ContentPresenter Content="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ContentControl.Style>
        <!-- 确认弹窗模板 -->
        <ContentControl.Resources>
            <DataTemplate DataType="{x:Type local:ConfirmPopupViewModel}">
                <Border CornerRadius="5" Background="White" Width="300" Height="180">
                    <StackPanel>
                        <TextBlock Text="{Binding Message}" Margin="20"/>
                        <Button Content="确认" Command="{Binding ConfirmCommand}" Width="80" Margin="0 10"/>
                    </StackPanel>
                </Border>
            </DataTemplate>
        </ContentControl.Resources>
    </ContentControl>
</Grid>

主ViewModel代码 #

public class MainViewModel : INotifyPropertyChanged
{
    public PopupViewModelBase CurrentPopup { get; set; }
    public ICommand OpenConfirmPopupCommand { get; }

    public MainViewModel()
    {
        OpenConfirmPopupCommand = new RelayCommand(() =>
        {
            CurrentPopup = new ConfirmPopupViewModel
            {
                Message = "确认执行此操作？",
                ConfirmCommand = new RelayCommand(() => CurrentPopup.IsVisible = false)
            };
            CurrentPopup.IsVisible = true;
            OnPropertyChanged(nameof(CurrentPopup));
        });
    }

    // INotifyPropertyChanged实现...
}

内容的提问来源于stack exchange，提问作者kenuel0110