Blur effect on image as a window background

问题

I have a window in my WPF app with an image as a background. I want that image to be blurred. This is how I do it:

This is my window:

<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>

And here's the style I apply to it:

<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>

This works - the image is blurred. However, there's a thick black border of about 5 mm around the background image. Why is it there and how can I remove it?

Here's what I tried as an alternative:

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

and the border is removed but the image is stretched a lot. Almost half of the image isn't even shown.

How can I fix this?

回答1:

Do it like shown in this answer to one of your previous questions. Put the Image control in a Grid with ClipToBounds set to true.

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

回答2:

I do a similar thing but just add the image as a element to the LayoutRoot. From this I set the margin to minus out the blur radius to avoid blurring in edges. If you're black border fades in I would suspect this is the issue.

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

来源：https://stackoverflow.com/questions/25018331/blur-effect-on-image-as-a-window-background

标签

wpf

xaml

background

blur

effects