wpf 对 Canvas 的透明模糊背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28040646/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Transparent blurred background to Canvas
提问by Stav Alfi
No idea how to create transparent blurred background to canvas without bluring the canvas childrenstoo.
不知道如何在不模糊画布儿童的情况下为画布创建透明的模糊背景。
This is the result I want - Blur the background but not the content:
这是我想要的结果 - 模糊背景而不是内容：
回答by Fraser Muir
My Excuse
我的借口
Pardon my inexperience with Stackoverflow but I thought I would try and help you out a little.
请原谅我对 Stackoverflow 的缺乏经验，但我想我会尝试帮助你一点。
I didn't make this code, however seen as how this code isn't readily available to most people, here it is:
我没有制作此代码，但被视为大多数人不容易获得此代码的原因，这里是：
using System;
using System.Runtime.InteropServices;
using System.Windows;
using System.Windows.Interop;
namespace BlurBehindDemo
{
internal enum AccentState
{
ACCENT_DISABLED = 1,
ACCENT_ENABLE_GRADIENT = 0,
ACCENT_ENABLE_TRANSPARENTGRADIENT = 2,
ACCENT_ENABLE_BLURBEHIND = 3,
ACCENT_INVALID_STATE = 4
}
[StructLayout(LayoutKind.Sequential)]
internal struct AccentPolicy
{
public AccentState AccentState;
public int AccentFlags;
public int GradientColor;
public int AnimationId;
}
[StructLayout(LayoutKind.Sequential)]
internal struct WindowCompositionAttributeData
{
public WindowCompositionAttribute Attribute;
public IntPtr Data;
public int SizeOfData;
}
internal enum WindowCompositionAttribute
{
// ...
WCA_ACCENT_POLICY = 19
// ...
}
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
[DllImport("user32.dll")]
internal static extern int SetWindowCompositionAttribute(IntPtr hwnd, ref WindowCompositionAttributeData data);
public MainWindow()
{
InitializeComponent();
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
EnableBlur();
}
internal void EnableBlur()
{
var windowHelper = new WindowInteropHelper(this);
var accent = new AccentPolicy();
accent.AccentState = AccentState.ACCENT_ENABLE_BLURBEHIND;
var accentStructSize = Marshal.SizeOf(accent);
var accentPtr = Marshal.AllocHGlobal(accentStructSize);
Marshal.StructureToPtr(accent, accentPtr, false);
var data = new WindowCompositionAttributeData();
data.Attribute = WindowCompositionAttribute.WCA_ACCENT_POLICY;
data.SizeOfData = accentStructSize;
data.Data = accentPtr;
SetWindowCompositionAttribute(windowHelper.Handle, ref data);
Marshal.FreeHGlobal(accentPtr);
}
private void Window_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
DragMove();
}
}
}
}
Result
结果
Once implemented, this will effect the whole Window as shown:
一旦实施，这将影响整个窗口，如下所示：
After a little tweaking
稍加调整后
XAML
XAML
This was a project I made a few months back, so it won't look the same as yours, but with some tweaking you could easily make it into whatever you want it to be. The XAML of my design is as follows:
这是我几个月前制作的一个项目，因此它看起来与您的不同，但是通过一些调整，您可以轻松地将其变成您想要的样子。我设计的XAML如下：
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="MainWindow"
Title="Blurred Opacity" Height="623" Width="752"
Background="#727A7A7A"
AllowsTransparency="True"
WindowStyle="None"
BorderThickness="1"
WindowStartupLocation="CenterScreen"
Loaded="Window_Loaded" MouseLeftButtonDown="Window_MouseDown" Topmost="True" BorderBrush="#FF1E9EC5">
<Grid>
<Rectangle Fill="#FF0143A4" Height="130" VerticalAlignment="Top"/>
<Rectangle Fill="White" Margin="0,130,0,0" HorizontalAlignment="Right" Width="375"/>
<StackPanel HorizontalAlignment="Left" Margin="0,130,0,0" Width="375">
<TextBlock x:Name="textBlock" Height="50" TextWrapping="Wrap" Text="Category 1" d:LayoutOverrides="LeftPosition, RightPosition" FontSize="35" Padding="10,0,0,0" TextOptions.TextFormattingMode="Display" LineHeight="6"/>
<TextBlock x:Name="textBlock_Copy" Height="50" TextWrapping="Wrap" Text="Category 2" FontSize="35" Padding="10,0,0,0" TextOptions.TextFormattingMode="Display" LineHeight="6" d:LayoutOverrides="LeftPosition, RightPosition"/>
<TextBlock x:Name="textBlock_Copy1" Height="50" TextWrapping="Wrap" Text="Category 3" FontSize="35" Padding="10,0,0,0" TextOptions.TextFormattingMode="Display" LineHeight="6" d:LayoutOverrides="LeftPosition, RightPosition"/>
<TextBlock x:Name="textBlock_Copy2" Height="50" TextWrapping="Wrap" Text="Category 4" FontSize="35" Padding="10,0,0,0" TextOptions.TextFormattingMode="Display" LineHeight="6" d:LayoutOverrides="LeftPosition, RightPosition"/>
<TextBlock x:Name="textBlock_Copy3" Height="50" TextWrapping="Wrap" Text="Category 5" FontSize="35" Padding="10,0,0,0" TextOptions.TextFormattingMode="Display" LineHeight="6" d:LayoutOverrides="LeftPosition, RightPosition"/>
<TextBlock x:Name="textBlock_Copy4" Height="50" TextWrapping="Wrap" Text="Category 6" FontSize="35" Padding="10,0,0,0" TextOptions.TextFormattingMode="Display" LineHeight="6" d:LayoutOverrides="LeftPosition, RightPosition"/>
<TextBlock x:Name="textBlock_Copy5" Height="50" TextWrapping="Wrap" Text="Category 7" FontSize="35" Padding="10,0,0,0" TextOptions.TextFormattingMode="Display" LineHeight="6" d:LayoutOverrides="LeftPosition, RightPosition"/>
<TextBlock x:Name="textBlock_Copy6" Height="50" TextWrapping="Wrap" Text="Category 8" FontSize="35" Padding="10,0,0,0" TextOptions.TextFormattingMode="Display" LineHeight="6" d:LayoutOverrides="LeftPosition, RightPosition"/>
</StackPanel>
<TextBlock x:Name="textBlock_Copy7" Height="90" TextWrapping="Wrap" Text="Example" FontSize="65" Padding="10,0,0,0" TextOptions.TextFormattingMode="Display" LineHeight="6" Margin="222.5,23,152.5,0" VerticalAlignment="Top" Foreground="White"/>
<Path Data="M705,27.333333 L735.66667,10" Fill="White" HorizontalAlignment="Right" Height="24" Margin="0,7,21,0" Stretch="Fill" VerticalAlignment="Top" Width="24" StrokeThickness="3" Stroke="White"/>
<Path Data="M705,27.333333 L735.66667,10" Fill="White" HorizontalAlignment="Right" Height="24.083" Margin="0,6.833,20.333,0" Stretch="Fill" VerticalAlignment="Top" Width="24.167" StrokeThickness="3" Stroke="White" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="-1"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<StackPanel HorizontalAlignment="Right" Margin="0,130,0,0" Width="375">
<TextBlock x:Name="textBlock1" Height="50" TextWrapping="Wrap" Text="Item 1" d:LayoutOverrides="LeftPosition, RightPosition" FontSize="35" Padding="10,0,0,0" TextOptions.TextFormattingMode="Display" LineHeight="6"/>
<TextBlock x:Name="textBlock_Copy8" Height="50" TextWrapping="Wrap" Text="Item 2" FontSize="35" Padding="10,0,0,0" TextOptions.TextFormattingMode="Display" LineHeight="6" d:LayoutOverrides="LeftPosition, RightPosition"/>
<TextBlock x:Name="textBlock_Copy9" Height="50" TextWrapping="Wrap" FontSize="35" Padding="10,0,0,0" TextOptions.TextFormattingMode="Display" LineHeight="6" d:LayoutOverrides="LeftPosition, RightPosition"><Run Text="Item "/><Run Text="3"/><LineBreak/><Run Text="3"/></TextBlock>
<TextBlock x:Name="textBlock_Copy10" Height="50" TextWrapping="Wrap" FontSize="35" Padding="10,0,0,0" TextOptions.TextFormattingMode="Display" LineHeight="6" d:LayoutOverrides="LeftPosition, RightPosition"><Run Text="Item "/><Run Text="4"/></TextBlock>
<TextBlock x:Name="textBlock_Copy11" Height="50" TextWrapping="Wrap" FontSize="35" Padding="10,0,0,0" TextOptions.TextFormattingMode="Display" LineHeight="6" d:LayoutOverrides="LeftPosition, RightPosition"><Run Text="Item "/><Run Text="5"/></TextBlock>
<TextBlock x:Name="textBlock_Copy12" Height="50" TextWrapping="Wrap" FontSize="35" Padding="10,0,0,0" TextOptions.TextFormattingMode="Display" LineHeight="6" d:LayoutOverrides="LeftPosition, RightPosition"><Run Text="Item "/><Run Text="6"/></TextBlock>
<TextBlock x:Name="textBlock_Copy13" Height="50" TextWrapping="Wrap" FontSize="35" Padding="10,0,0,0" TextOptions.TextFormattingMode="Display" LineHeight="6" d:LayoutOverrides="LeftPosition, RightPosition"><Run Text="Item "/><Run Text="7"/></TextBlock>
<TextBlock x:Name="textBlock_Copy14" Height="50" TextWrapping="Wrap" FontSize="35" Padding="10,0,0,0" TextOptions.TextFormattingMode="Display" LineHeight="6" d:LayoutOverrides="LeftPosition, RightPosition"><Run Text="Item "/><Run Text="8"/></TextBlock>
<TextBlock x:Name="textBlock_Copy15" Height="50" TextWrapping="Wrap" FontSize="35" Padding="10,0,0,0" TextOptions.TextFormattingMode="Display" LineHeight="6" d:LayoutOverrides="LeftPosition, RightPosition"><Run Text="Item "/><Run Text="9"/></TextBlock>
</StackPanel>
</Grid>
I hope this helps!
我希望这有帮助！
回答by Amit Raz
You can use the fact that items inside a grid are layout on on top of the other:
您可以使用网格内的项目布局在另一个之上的事实：
<Grid >
<Image Source="texture-7.jpg" Stretch="Fill" >
<Image.Effect>
<BlurEffect Radius="100"/>
</Image.Effect>
</Image>
<Canvas Background="Transparent">
<!-- Content -->
</Canvas>
</Grid>
where "texture-7.jpg" is some image of a texture. if you also want it to be transparent simply set the opacity property of the Image
其中“texture-7.jpg”是纹理的一些图像。如果您还希望它是透明的，只需设置 Image 的 opacity 属性
回答by J?rg Flechsig
When using Windows10, please have a look at BlurryControls. It provides a blurry window you can directly inherit from.
使用 Windows10 时，请查看BlurryControls。它提供了一个可以直接继承的模糊窗口。
For Windows8 there is no solution to blur a Window (to my knowledge).
对于 Windows8，没有模糊窗口的解决方案（据我所知）。
For Windows7/Vista a user called Ciantic provided the following solution: Windows Aero Glass. A working sample solution can be found here: GlassingExtension.
对于 Windows7/Vista，名为 Ciantic 的用户提供了以下解决方案：Windows Aero Glass。可以在此处找到工作示例解决方案：GlassingExtension。
I hope this answers your question. Please respond if you have a question or suggestions to the solution targeting Windows10.
我希望这回答了你的问题。如果您对针对 Windows10 的解决方案有疑问或建议，请回复。
回答by Heena Patil
Hope this helps
希望这可以帮助
<Canvas Height="300" Width="300">
<Canvas.Background>
<VisualBrush Stretch="None">
<VisualBrush.Visual>
<Canvas Background="LightBlue" Height="300" Width="300">
<Canvas.Effect>
<BlurEffect Radius="150"></BlurEffect>
</Canvas.Effect>
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
</Canvas.Background>
<Rectangle Fill="Red" Height="50" Width="50"></Rectangle>
<Rectangle Fill="Green" Margin="50" Height="50" Width="50"></Rectangle>
</Canvas>
