Прозрачен замъглен фон на 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 Това, което споменах, е да вземете кода, към който сте се свързали, и да го поставите вместо имената на платното Blured background - 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