Question

我正在建造一种类似AERO玻璃给你的效果，一个模糊的窗户。我很快意识到在WPF中并不容易，但我设法让它几乎完全可以工作。我只是在涉及Viewbox时陷入困境。

所以我做的是：我创建了一个矩形，制作了一个可视化画笔来获取给定背景元素的一部分，转换视图框以获取矩形重叠的图像的空间，并将其用作填充矩形。

<Grid x:Name="grid">
    <Image x:Name="image" Source="someImage.png"/>
    <Rectangle x:Name="blurBackgroundRect" Width="100" Height="100">
        <Rectangle.Effect>
            <BlurEffect Radius="10"/>
        </Rectangle.Effect>
        <Rectangle.Fill>
            <VisualBrush
                ViewboxUnits="Absolute"
                AlignmentX="Center"
                AlignmentY="Center"
                Visual="{Binding ElementName=image}"
                Stretch="None">
                <VisualBrush.Viewbox>
                    <MultiBinding Converter="{StaticResource visualBrushTargetConverter}">
                        <Binding ElementName="grid"/>
                        <Binding ElementName="blurBackgroundRect"/>
                        <Binding ElementName="grid" Path="ActualWidth"/>
                        <Binding ElementName="grid" Path="ActualHeight"/>
                    </MultiBinding>
                </VisualBrush.Viewbox>
            </VisualBrush>
        </Rectangle.Fill>
    </Rectangle>
</Grid>

ElementName网格，引用我的矩形和我的图像的公共父级。我不能让他们成为祖先，否则会干扰模糊效果。所以我把它们放在一个网格中。

最后一部分是多值转换器，它可以对VisualBrush Viewbox进行实际计算。

public class VisualBrushTargetConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        var parentControl = values[0] as FrameworkElement;
        var targetControl = values[1] as FrameworkElement;

        var transformedPos = targetControl.TransformToVisual(parentControl).Transform(new Point());
        var transformedSize = targetControl.TransformToVisual(parentControl).Transform(new Point(targetControl.RenderSize.Width, targetControl.RenderSize.Height));

        transformedSize = new Point(transformedSize.X - transformedPos.X, transformedSize.Y - transformedPos.Y);
        return new Rect(transformedPos.X,
                        transformedPos.Y,
                        transformedSize.X,
                        transformedSize.Y);
    }
}

所以这是重现我的以下问题所必需的。如果您想测试代码，可以轻松地将其放入一个简单的wpf应用程序中。

如果你测试一下，你会发现它工作正常。如果我们将矩形放在一个Viewbox和一个固定大小的网格（模仿我的实际问题）中，就会出现问题。

<Image x:Name="image" .../>
<Viewbox>
    <Grid Width="800" Height="600">
        <Rectangle x:Name="blurBackgroundRect" ...>
    </Grid>
</Viewbox>

所以我猜测在布局后应用视图框的缩放，因此在我的TransformTo调用中不会被识别。但我已经尝试在我的转换中使用Viewbox的实际缩放，但没有运气。只要Viewbox在那里，我就无法让它工作，所以我希望任何人都知道可能出现的问题，或者甚至可能指出一个更简单的解决方案。我希望该代码稍后转换为自定义控件，以便轻松地重用它，因此我喜欢不依赖于任何特殊条件的方法。

Answer 1

我能够通过将VisualBrush上的Stretch更改为Fill而不是None来修复这种奇怪的行为。

用Viewbox模糊背景

1 个答案: