LinearGradientBrush

WPF --- Графика и анимация WPF --- LinearGradientBrush

Кисть LinearGradientBrush позволяет создавать смешанное заполнение, которое представляет собой переход от одного цвета к другому.

Рассмотрим пример простейшего градиента. Он заштриховывает прямоугольник по диагонали от синего цвета (в левом верхнем углу) к белому (в правом нижнем углу):

<Rectangle Width="150" Height="100">
   <Rectangle.Fill>
      <LinearGradientBrush>
         <GradientStop Color="Blue" Offset="0" />
         <GradientStop Color="White" Offset="1" />
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>

Для создания этого градиента необходимо добавить по одному объекту GradientStop для каждого цвета. Также нужно поместить каждый цвет в градиент, используя значение Offset от 0 до 1.

В этом примере GradientStop для синего цвета имеет смещение 0, а это означает, что он располагается в самом начале градиента. GradientStop для белого цвета имеет смещение 1, что размещает его в конце. Изменяя эти значения, можно управлять плавностью перехода одного цвета в другой.

Например, если установить GradientStop для белого цвета в 0.5. то градиент будет переходить от синего (в левом верхнем углу) к белому цвету в середине прямоугольника (точка между двумя углами). Правая сторона прямоугольника будет полностью белой (второй градиент на рисунке ниже).

Предыдущий код разметки создает градиент с диагональным наполнением, который простирается от одного угла до другого. Однако может понадобиться создать градиент, который распространяется сверху вниз или слева направо, либо же воспользоваться другим диагональным углом. Эти детали управляются свойствами StartPoint и EndPoint класса LinearGradientBrush. Упомянутые свойства позволяют выбирать точку, в которой начинается первый цвет, и изменять точку, в которой переход цвета завершается чистым вторым цветом. (Промежуточная область заполняется плавным переходом одного цвета в другой.)

Однако здесь имеется одна особенность. Координаты, используемые для указания начальной и конечной точек, не являются реальными координатами. Вместо этого LinearGradientBrush назначает точке в левом верхнем углу области, которую нужно заполнить, координату (0,0), а точке в правом нижнем углу — координату (1,1), независимо от реальной высоты и ширины области.

Чтобы создать горизонтальное заполнение сверху вниз, можно указать начальную точку (0,0) левого верхнего угла, а конечную точку — (0,1), представляющую левый нижний угол. Чтобы создать вертикальное заполнение слева направо (без наклона), можно использовать стартовую точку (0,0) и конечную точку (1,0). На рисунке ниже горизонтальный градиент — третий сверху.

Есть возможность схитрить, указав начальную и конечную точки так, чтобы они не были выровнены по углам градиента. Например, можно протянуть градиент от (0, 0) до (0, 0.5) — точки на середине левой стороны, на полпути вниз. Это создаст сжатый линейный градиент — один цвет начнется вверху, переходя во второй цвет на середине прямоугольника. Нижняя половина фигуры будет заполнена вторым цветом. Однако это поведение можно изменить с помощью свойства LinearGradientBrush.SpreadMethod. По умолчанию оно имеет значение Pad (означающее, что области вне градиента заполняются соответствующим сплошным цветом), но допускается присвоить этому свойству значение Reflect (для обращения градиента — переходом от второго цвета обратно к первому) или же Repeat (для дублирования той же цветовой последовательности). На рисунке эффект Reflect показан в четвертом сверху градиенте.

LinearGradientBrush также позволяет создавать градиенты с более чем двумя цветами, добавляя более двух объектов GradientStop. Ниже представлен общий пример иллюстрирующий все вышесказанное:

<Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    <Rectangle>
                        <Rectangle.Fill>
                            <LinearGradientBrush>
                                <GradientStop Color="Blue" Offset="0"></GradientStop>
                                <GradientStop Color="White" Offset="1"></GradientStop>
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <TextBlock VerticalAlignment="Center" Grid.Column="1" Margin="5">Диагональный градиент</TextBlock>
                    <TextBlock VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" Margin="5">Меняем значение Offset для белого цвета на 0.5</TextBlock>
                    <TextBlock VerticalAlignment="Center" Grid.Column="1" Grid.Row="2" Margin="5">Вертикальный градиент</TextBlock>
                    <TextBlock VerticalAlignment="Center" Grid.Column="1" Grid.Row="3" Margin="5">SpreadMethod=Reflect</TextBlock>
                    <TextBlock VerticalAlignment="Center" Grid.Column="1" Grid.Row="4" Margin="5">Радуга :)</TextBlock>
                    <Rectangle Grid.Row="1">
                        <Rectangle.Fill>
                            <LinearGradientBrush>
                                <GradientStop Color="Blue" Offset="0"></GradientStop>
                                <GradientStop Color="White" Offset="0.5"></GradientStop>
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <Rectangle Grid.Row="2">
                        <Rectangle.Fill>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="Blue" Offset="0"></GradientStop>
                                <GradientStop Color="White" Offset="0.9"></GradientStop>
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <Rectangle Grid.Row="3">
                        <Rectangle.Fill>
                            <LinearGradientBrush SpreadMethod="Reflect" StartPoint="0,0" EndPoint="0,0.5">
                                <GradientStop Color="Blue" Offset="0"></GradientStop>
                                <GradientStop Color="White" Offset="1"></GradientStop>
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <Rectangle Grid.Row="4">
                        <Rectangle.Fill>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                <GradientStop Color="Yellow" Offset="0.0" />
                                <GradientStop Color="Red" Offset="0.25" />
                                <GradientStop Color="Blue" Offset="0.75" />
                                <GradientStop Color="LimeGreen" Offset="1.0" />
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                </Grid>

Кисть LinearGradientBrush может быть указана в любом месте, где используется SolidColorBrush — например, для заполнения фоновой поверхности элемента (через свойство Background), фонового цвета текста (используя свойство Foreground) или для заполнения границы (с помощью свойства BorderBrush). На рисунке показан пример заполненного градиентом элемента TextBlock:

<TextBlock FontSize="110" Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" Text="It's Gradient Text!"
                               TextWrapping="Wrap" TextAlignment="Center" HorizontalAlignment="Center" FontFamily="Vivaldi">
                        <TextBlock.Foreground>
                            <LinearGradientBrush>
                                <GradientStop Color="Yellow" Offset="0.0" />
                                <GradientStop Color="Red" Offset="0.25" />
                                <GradientStop Color="Blue" Offset="0.75" />
                                <GradientStop Color="LimeGreen" Offset="1.0" />
                            </LinearGradientBrush>
                        </TextBlock.Foreground>
                    </TextBlock>