Transparent blurred background to Canvas

Question

No idea how to create transparent blurred background to canvas without bluring the canvas childrens too.

This is the result I want - Blur the background

Answer 1

When using Windows10, please have a look at BlurryControls. It provides a blurry window you can directly inherit from.

For Windows8 there is no solution to blur a Window (to my knowledge).

For Windows7/Vista a user called Ciantic provided the following solution: Windows Aero Glass. A working sample solution can be found here: GlassingExtension.

I hope this answers your question. Please respond if you have a question or suggestions to the solution targeting Windows10.

Answer 2

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

Answer 3

My Excuse

Pardon my inexperience with Stackoverflow but I thought I would try and help you out a little.

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

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:

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

Answer 4

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>