Прозрачный размытый фон для Canvas

Понятия не имею, как создать прозрачный размытый фон на холсте без размытия дочерних элементов холста.

Вот результат, которого я хочу — размыть фон, но не содержимое: как я это делаю


blur wpf transparency
person Stav Alfi    schedule 20.01.2015    source источник
comment
Есть только один простой способ — использовать текстуру, похожую на размытие, и добавить к ней непрозрачность. В любом другом случае у вас будет настоящий убийца производительности, если вы попытаетесь применить такой эффект для дерева управления.   -  person VidasV    schedule 20.01.2015
comment
Можете ли вы добавить образец кода, чтобы я мог понять, подходит ли он мне?   -  person Stav Alfi    schedule 20.01.2015
comment
@StavAlfi Опубликуйте свой XAML.   -  person eran otzap    schedule 20.01.2015

Ответы (4)


arrow_upward
22
arrow_downward

мое оправдание

Простите мою неопытность со Stackoverflow, но я решил немного помочь вам.

Я не делал этот код, однако видно, что этот код недоступен для большинства людей, вот он:

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();
    }
}

}

Результат

После реализации это повлияет на все окно, как показано ниже:

Все окно размыто

После небольшой доработки

Последнее окно

XAML

Это был проект, который я сделал несколько месяцев назад, поэтому он не будет выглядеть так же, как ваш, но с некоторыми настройками вы легко сможете превратить его во что угодно. 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!

person Fraser Muir    schedule 22.11.2016
comment
Это было именно то, что я искал. Вы должны опубликовать это 1 год назад, когда это было актуально :D В любом случае спасибо! - person Stav Alfi; 22.11.2016
comment
Ха-ха-ха, без проблем, честно говоря, я присоединился всего несколько дней назад. - person Fraser Muir; 22.11.2016
comment
СПАСИБО. Образец, который ДЕЙСТВИТЕЛЬНО работает без кучи странных глюков. НАКОНЕЦ. Все другие примеры и образцы GitHub имеют странные скачкообразные сбои при запуске. - person SledgeHammer; 15.12.2018

arrow_upward
1
arrow_downward

При использовании Windows10 ознакомьтесь с BlurryControls. Он предоставляет размытое окно, от которого вы можете напрямую наследоваться.

Для Windows8 нет решения для размытия окна (насколько мне известно).

Для Windows7/Vista пользователь Ciantic предоставил следующее решение: Windows Aero Glass. Рабочий пример решения можно найти здесь: GlassingExtension .

Надеюсь, это ответит на ваш вопрос. Пожалуйста, ответьте, если у вас есть вопросы или предложения по решению для Windows10.

person ConfusedHorse    schedule 23.12.2016

arrow_upward
1
arrow_downward

Вы можете использовать тот факт, что элементы внутри сетки располагаются поверх других:

<Grid >
    <Image Source="texture-7.jpg" Stretch="Fill" >
        <Image.Effect>
            <BlurEffect Radius="100"/>
        </Image.Effect>
    </Image>
    <Canvas Background="Transparent">
        <!-- Content -->
    </Canvas>
</Grid>

где "texture-7.jpg" - какое-то изображение текстуры. если вы также хотите, чтобы он был прозрачным, просто установите свойство непрозрачности изображения

person Amit Raz    schedule 20.01.2015
comment
@StavAlfi Я имею в виду взять код, на который вы ссылаетесь, и поместить его вместо имен Canvas. Размытый фон. - person Amit Raz; 20.01.2015
comment
приведенный выше пример вообще не размывает прозрачный фон - person Stav Alfi; 20.01.2015
comment
@StavAlfi Amit дал вам подход к достижению того, что вам нужно ... вызов BlurCanvas ничего не делает, конечно, это был намек - person eran otzap; 20.01.2015

arrow_upward
0
arrow_downward

Надеюсь это поможет

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

введите здесь описание изображения

person Heena Patil    schedule 20.01.2015
comment
ваш пример только скрывает фон, но не размывает его. Я привел пример, посмотрите. все равно спасибо бро - person Stav Alfi; 20.01.2015
comment
ваш синий фон не прозрачен .. только по бокам он дает результат, который я хочу. - person Stav Alfi; 20.01.2015
comment
Если вы хотите, чтобы фон был прозрачным, увеличьте радиус в Blureffect. Я определил только 150. - person Heena Patil; 20.01.2015