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