Эффект размытия фонового изображения окна

У меня есть окно с изображением в качестве фона. В этом окне у меня также есть кнопки и другие элементы управления.

Это мой стиль для этого окна:

<Style x:Key="MyWindow" TargetType="{x:Type Window}">
        <Setter Property="Background">
            <Setter.Value>
                <ImageBrush ImageSource="Images\myImage.png" />
            </Setter.Value>
        </Setter>
        <Setter Property="Effect">
            <Setter.Value>
                <BlurEffect Radius="20" />
            </Setter.Value>
        </Setter>
    </Style>

Проблема в том, что эффект размытия применяется ко всему окну, а не только к фоновому изображению. Так вот, мои кнопки тоже размыты, а это не то, чего я хочу. Я хочу, чтобы был размыт только фон изображения, а не кнопки. Как я могу это сделать?


blur background wpf xaml effects
person petko_stankoski    schedule 23.07.2014    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Вместо того, чтобы использовать ImageBrush для фона вашего окна, добавьте элемент управления Image в качестве первого (самого нижнего) элемента в контейнер верхнего уровня вашего окна и установите там эффект:

<Window ...>
    <Grid>
        <Image Source="Images\myImage.png" Stretch="Fill">
            <Image.Effect>
                <BlurEffect Radius="20"/>
            </Image.Effect>
        </Image>

        <!-- other UI elements -->

    </Grid>
</Window>

Если вам действительно нужна фоновая кисть, вы можете использовать VisualBrush вместо ImageBrush, например:

<Style TargetType="Window">
    <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>

Чтобы обрезать границу размытой фоновой кисти, вы можете настроить Viewbox (которое по умолчанию дается в относительных единицах) следующим образом:

<VisualBrush Viewbox="0.05,0.05,0.9,0.9">

Конечно, точные значения зависят от абсолютного размера изображения. Вы также можете указать Viewbox в абсолютных единицах, установив ViewboxUnits="Absolute":

<VisualBrush Viewbox="0,0,1024,1280" ViewboxUnits="Absolute">
person Clemens    schedule 23.07.2014
comment
Это работает, но добавляет черную рамку около 5 миллиметров вокруг размытого изображения и делает изображение на 5 миллиметров меньше, чтобы оставалось место для рамки. Как убрать границу? - person petko_stankoski; 23.07.2014
comment
Я понятия не имею, откуда взялась эта граница. Это определенно где-то в вашем приложении. Какой подход вы пробовали? - person Clemens; 23.07.2014
comment
Второй, с VisualBrush. - person petko_stankoski; 23.07.2014
comment
Хорошо, похоже, это внешняя часть размытой области, которая увеличивает общий размер кисти. Я постараюсь это исправить. Возможно, другой подход в любом случае проще. - person Clemens; 23.07.2014
comment
Размер окна 1024x1280. Это фиксированный. Итак, размер фонового изображения такой же. - person petko_stankoski; 23.07.2014
comment
Пожалуйста, смотрите мое редактирование. Вы можете поиграть со значениями Viewbox. Это может выглядеть даже лучше, если вы также обрежете внешние 10 пикселей или около того, установив 10,10,1004,1260. - person Clemens; 23.07.2014