模糊对图像的影响作为窗口背景

时间:2014-07-29 14:50:31

标签: wpf xaml background blur effects

我的WPF应用程序中有一个窗口,其中包含图像作为背景。我希望那个图像模糊不清。我就是这样做的:

这是我的窗口:

<Window x:Class="kiosk.UI.Views.PageSwitch"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:converters="clr-namespace:myProjectName.Converters"
    Title="PageSwitch" Height="1024" Width="1280"
    Style="{StaticResource WindowStyle}"
    WindowStyle="None" ResizeMode="NoResize"
    WindowStartupLocation="CenterScreen">        
</Window>   

这是我申请的风格:

<Style x:Key="WindowStyle" TargetType="{x:Type Window}">
        <Setter Property="FontFamily" Value="Verdana" />
        <Setter Property="Background">
            <Setter.Value>
                <VisualBrush>
                    <VisualBrush.Visual>
                        <Image Source="Images\myImage.png" >
                            <Image.Effect>
                                <BlurEffect Radius="20"/>
                            </Image.Effect>
                        </Image>
                    </VisualBrush.Visual>
                </VisualBrush>
            </Setter.Value>
        </Setter>
    </Style>

这有效 - 图像模糊。但是,背景图像周围有一个约5毫米厚的黑色边框。它为什么存在,我该如何删除它?

以下是我尝试的替代方案:

<VisualBrush Viewbox="0, 0, 1280, 1024" ViewboxUnits="Absolute" >

并删除边框但图像拉伸很多。几乎有一半的图像甚至没有显示出来。

我该如何解决这个问题?

2 个答案:

答案 0 :(得分:1)

this answer中显示您之前的一个问题。将Image控件放在网格中,ClipToBounds设置为true。

<VisualBrush>
    <VisualBrush.Visual>
        <Grid ClipToBounds="True">
            <Image Source="Images\myImage.png">
                <Image.Effect>
                    <BlurEffect Radius="20"/>
                </Image.Effect>
            </Image>
        </Grid>
    </VisualBrush.Visual>
</VisualBrush>

答案 1 :(得分:0)

我做了类似的事情,但只是将图像作为元素添加到LayoutRoot中。由此我将边距设置为减去模糊半径以避免边缘模糊。如果你的黑色边缘消失,我会怀疑这是问题。

        <Image Source="pack://siteoforigin:,,,/image.jpg" Stretch="UniformToFill" Margin="-50">
        <Image.Effect>
            <BlurEffect Radius="100"/>
        </Image.Effect>
    </Image>