Кисти и эффекты

Кисти

Рассматривая выше элементы и их свойства, были упомянуты такие свойства, как Background и Foreground и назначение им определенного цвета Background="Blue". Но если посмотреть чуть глубже, то для установки цвета нам нужен объект класса System.Media.Brush. Значение "Blue" в данном случае является свойством класса Brushes, которое инкапсулирует объект SolidColorBrush. Например, в коде мы можем установить цвет так button1.Background=Brushes.Blue

А класс SolidColorBrush является кистью или наследником класса Brush, с помощью которого, таким образом, можно устанавливать свойства Background, Foreground и BorderBrush.

WPF поддерживает целый ряд кистей:

• SolidColorBrush заливает содержимое сплошным цветом

• LinearGradientBrush - градиентная кисть, представляет плавный переход от одного цвета к другому

• RadialGradientBrush- градиентная кисть, плавно распределяющая заданные цвета от центральной точки к внешним границам.

• ImageBrush в качестве заполнителя использует не цвет, а изображение

• VideoBrush в качестве заполнителя использует MediaElement, который проигрывает определенное видео на элементе.

SolidColorBrush

Задает цвет для сплошной заливки:

        <Button Height="30" Width="160" VerticalAlignment="Top"  Content="SolidColorBrush">
            <Button.Background>
                <SolidColorBrush Color="Blue" Opacity="0.8"  />
            </Button.Background>
            <Button.Foreground>
                <SolidColorBrush Color="DarkBlue"/>
            </Button.Foreground>
        </Button>

Использование SolidColorBrush в коде:

button1.Background = new SolidColorBrush(Colors.Blue);
//или так - это цвет #cfffff
button1.Background = new SolidColorBrush(Color.FromRgb(207, 255, 255));

LinearGradientBrush

Эта кисть создает плавный переход от одного цвета к другому. Для указания цвета и точек, от которых начинается переход, используется объект GradientStop. Его свойство Color указывает на цвет, а свойство Offset- на точку, с которой начинается переход.

<Button Content="LinearGradientBrush" VerticalAlignment="Top" Width="150" Height="30">
                <Button.Background>
                    <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
                        <GradientStop Color="Black" Offset="0" />
                        <GradientStop Color="White" Offset="1" />
                    </LinearGradientBrush>
                </Button.Background>
                <Button.Foreground>
                    <LinearGradientBrush>
                        <GradientStop Color="Blue" Offset="1" />
                        <GradientStop Color="Red" Offset="0.5" />
                        <GradientStop Color="Yellow" Offset="0" />
                    </LinearGradientBrush>
                </Button.Foreground>
</Button>

С помощью свойств StartPoint и EndPoint можно определить направление градиента, сделать горизонтальный градиент или градиент под углом.

RadientGradientBrush

Эта кисть заполняет элемент радиальным градиентом. Объект RadientGradientBrush также имеет коллекцию объектов GradientStop, задающих цвет и смещение. Кроме того, он позволяет задавать центр градиента с помощью свойства GradientOrigin

<Button Content="RadialGradientBrush" VerticalAlignment="Top" Width="150" Height="30">
                <Button.Background>
                    <RadialGradientBrush GradientOrigin="0.4,0.1">
                        <GradientStop Color="Black" Offset="1" />
                        <GradientStop Color="White" Offset="0" />
                    </RadialGradientBrush>
                </Button.Background>
                <Button.Foreground>
                    <RadialGradientBrush Center="0.4,0.4"  SpreadMethod="Reflect">
                        <GradientStop Color="Black" Offset="1" />
                        <GradientStop Color="Yellow" Offset="0.2" />
                    </RadialGradientBrush>                
                </Button.Foreground>
</Button>

Также RadientGradientBrush позволяет ограничить область градиента с помощью свойств RadiusX и RadiusY

<Ellipse Width="60" Height="60">
                <Ellipse.Fill>
                    <RadialGradientBrush RadiusX="0.6" RadiusY="0.8" GradientOrigin="0.3,0.3">
                        <GradientStop Color="Red" Offset="1" />
                        <GradientStop Color="White" Offset="0" />
                    </RadialGradientBrush>
                </Ellipse.Fill>
</Ellipse>

ImageBrush

Эта кисть использует изображение в качестве фона. Источник устанавливается свойством ImageSource. Свойство Stretch задает способ заполнения элемента изображением - если оно равно Fill (по умолчанию), то изображение заполняет весь элемент, растягиваясь, если это нужно. Если Stretch="Uniform", то изображение масштабируется пропорционально размеру элемента и по краям могут образоваться пустые места, не заполненные изображением.

        <Ellipse Width="120" Height="100">
            <Ellipse.Fill>
                <ImageBrush ImageSource="bronz.jpg" />
            </Ellipse.Fill>
        </Ellipse>

Эффекты

Эффекты в Silverlight реализованы с помощью пиксельных шейдеров и представлены тремя классами: BlurEffect, DropShadowEffect и ShaderEffect. Эффекты изменяют отображение элементов в соответствии с логикой эффекта, применяя преобразования цвета к пикселям элемента.

BlurEffect

Этот эффект создает эффект размытия:

	<Button VerticalAlignment="Top" Content="Blur Effect">
            <Button.Effect>
                <BlurEffect Radius="2" />
            </Button.Effect>
        </Button>
        <Ellipse Width="120" Height="100">
            <Ellipse.Fill>
                <ImageBrush ImageSource="bronz.jpg" />
            </Ellipse.Fill>
            <Ellipse.Effect>
                <BlurEffect Radius="3" />
            </Ellipse.Effect>
        </Ellipse>

DropShadowEffect

Этот эффект позволяет создать эффект отбрасывания тени. Он имеет ряд свойств, позволяющих настроить отображение тени:

• Color - позволяет настроить цвет тени

• BlurRadius - определяет размытие тени

• Direction- определяет угол направления тени против часовой стрелки

• Opacity - определяет прозрачность тени

• ShadowDepth - определяет, как далеко (в пикселях, по умолчанию - 5) тень будет находиться от элемента

	<Button VerticalAlignment="Top" Content="Blur Effect">
            <Button.Effect>
                <DropShadowEffect ShadowDepth="2"/>
            </Button.Effect>
        </Button>
        <Ellipse Width="120" Height="100">
            <Ellipse.Fill>
                <ImageBrush ImageSource="bronz.jpg" />
            </Ellipse.Fill>
            <Ellipse.Effect>
                <DropShadowEffect />
            </Ellipse.Effect>
        </Ellipse>
        <TextBlock  VerticalAlignment="Bottom" FontSize="14" HorizontalAlignment="Center" >
            <TextBlock.Effect>
                <DropShadowEffect ShadowDepth="3" />
            </TextBlock.Effect>
            <TextBlock.Text>DropShadowEffect</TextBlock.Text>
        </TextBlock>

ShaderEffect

Этот эффект не имеет непосредственной реалиации, но при при его наследовании можно создать свои собственные эффекты. Как это сделать, смотрите соответствующую статью про Cоздание шейдеров в проектах Silverlight/WPF