模糊自定义控件的背景

Question

标题可能不清楚，但我现在解释一下。我有一个表示模态的自定义控件（受 SingltonSean 启发），当我触发一个命令时，它会显示这个模态，它覆盖了它后面的其余元素，它有点像一个弹出窗口。现在我希望它背后的一切都变得模糊。我怎样才能做到这一点？

这是我的模态自定义控件：

<Style TargetType="{x:Type viewModel:Modal}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type viewModel:Modal}">
                <ControlTemplate.Resources>
                    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
                </ControlTemplate.Resources>
                <Grid Visibility="{TemplateBinding IsOpen, Converter={StaticResource BooleanToVisibilityConverter}}">
                    <Grid.Background>
                        <SolidColorBrush Color="Black" Opacity="0.025" />
                    </Grid.Background>
                    <Border HorizontalAlignment="Center" VerticalAlignment="Center" UseLayoutRounding="True"  BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                            <Grid.OpacityMask>
                                <VisualBrush Visual="{Binding ElementName=border}" />
                            </Grid.OpacityMask>
                            <Border x:Name="border" Background="White" CornerRadius="20" />
                            <Grid Width="500" Height="600">
                                <StackPanel Width="300" HorizontalAlignment="Center" VerticalAlignment="Center">
                                    <Button Padding="10 5" Content="Close Modal" />
                                </StackPanel>
                            </Grid>
                        </Grid>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

您需要在内容所在的位置应用模糊：

<Grid>
    <Grid>
        <Grid.Effect>
            <BlurEffect Radius="20"/>
        </Grid.Effect>
        <TextBlock Text="Some content I want to blur"/>
    </Grid>
    <TextBlock Text="Popup"/>
</Grid>

如果你想制作一个能够在视觉树中模糊之前的东西的控件，你仍然需要对其应用效果。一种可能性是使用附加行为：

public static class Behavior
{
    public static UIElement GetBlurTarget(DependencyObject obj) => (UIElement)obj.GetValue(BlurTargetProperty);
    public static void SetBlurTarget(DependencyObject obj, UIElement value) => obj.SetValue(BlurTargetProperty, value);

    public static readonly DependencyProperty BlurTargetProperty =
        DependencyProperty.RegisterAttached("BlurTarget", typeof(UIElement), typeof(Behavior), new PropertyMetadata((d, e) =>
        {
            if (e.NewValue is UIElement element)
                element.Effect = new BlurEffect { Radius = 20 };
        }));
}

那么布局应该是这样的：

<Grid>
    <Grid x:Name="container">
        <TextBlock Text="Some content I want to blur" />
    </Grid>
    <TextBlock Text="Popup" local:Behavior.BlurTarget="{Binding ElementName=container}"/>
</Grid>

两种情况都会产生相同的结果：