Язык программирования C#9 и платформа .NET5 - Эндрю Троелсен

на то что Brush является абстрактным классом, его потомки, описанные в табл. 26.4, могут применяться для заполнения области содержимым почти любого мыслимого вида.

Классы DrawingBrush и VisualBrush позволяют строить кисть на основе существующего класса, производного от Drawing или Visual. Такие классы кистей используются при работе с двумя другими способами визуализации графики WPF (рисунками или визуальными объектами) и будут объясняться далее в главе.

Класс ImageBrush позволяет строить кисть, отображающую данные изображения из внешнего файла или встроенного ресурса приложения, который указан в его свойстве ImageSource. Оставшиеся типы кистей (LinearGradientBrush и RadialGradientBrush) довольно просты в применении, хотя требуемая разметка XAML может оказаться многословной. К счастью, в среде Visual Studio поддерживаются интегрированные редакторы кистей, которые облегчают задачу генерации стилизованных кистей.

Конфигурирование кистей с использованием Visual Studio

Давайте обновим приложение WPF для рисования RenderingShapes, чтобы использовать в нем более интересные кисти. В трех фигурах, которые были задействованы до сих пор при визуализации данных в панели инструментов, применяются обычные сплошные цвета, так что их значения можно зафиксировать с помощью простых строковых литералов. Чтобы сделать задачу чуть более интересной, теперь вы будете использовать интегрированный редактор кистей. Удостоверьтесь в том, что в IDE-среде открыт редактор XAML для начального окна и выберите элемент Ellipse. В окне Properties отыщите категорию Brush (Кисть) и щелкните на свойстве Fill (рис. 26.5).

В верхней части редактора кистей находится набор свойств, которые являются "совместимыми с кистью" для выбранного элемента (т.е. Fill, Stroke и OpacityMask). Под ними расположен набор вкладок, которые позволяют конфигурировать разные типы кистей, включая текущую кисть со сплошным цветом. Для управления цветом текущей кисти можно применять инструмент выбора цвета, а также ползунки ARGB (alpha, red, green, blue — прозрачность, красный, зеленый, синий). С помощью этих ползунков и связанной с ними области выбора цвета можно создавать сплошной цвет любого вида. Используйте указанные инструменты для изменения цвета в свойстве Fill элемента Ellipse и просмотрите результирующую разметку XAML. Как видите, цвет сохраняется в виде шестнадцатеричного значения:

<Ellipse Fill="#FF47CE47" Height="35" Width="35" />

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

Щелкните на вкладке градиентной кисти; редактор отобразит несколько новых настроек (рис. 26.6).

Три кнопки в левом нижнем углу позволяют выбрать линейный градиент, радиальный градиент или обратить градиентные переходы. Полоса внизу покажет текущий цвет каждого градиентного перехода, который будет представлен специальным ползунком. Перетаскивая ползунок по полосе градиента, можно управлять смещением градиента. Кроме того, щелкая на конкретном ползунке, можно изменять цвет определенного градиентного перехода с помощью селектора цвета. Наконец, щелчок прямо на полосе градиента позволяет добавлять градиентные переходы.

Потратьте некоторое время на освоение этого редактора, чтобы построить радиальную градиентную кисть, содержащую три градиентных перехода, и установить их цвета. На рис. 26.6 показан пример кисти, использующей три оттенка зеленого цвета.

В результате IDE-среда обновит разметку XAML, добавив набор специальных кистей и присвоив их совместимым с кистями свойствам (свойство Fill элемента Ellipse в рассматриваемом примере) с применением синтаксиса "свойство-элемент":

<Ellipse Height="35" Width="35">

  <Ellipse.Fill>

    <RadialGradientBrush>

      <GradientStop Color="#FF17F800"/>

      <GradientStop Color="#FF24F610" Offset="1"/>

      <GradientStop Color="#FF1A6A12" Offset="0.546"/>

    </RadialGradientBrush>

   </Ellipse.Fill>

</Ellipse>

Конфигурирование кистей в коде

Теперь, когда вы построили специальную кисть для определения XAML элемента Ellipse, соответствующий код C# устарел в том плане, что он по-прежнему будет визуализировать круг со сплошным зеленым цветом. Для восстановления синхронизации модифицируйте нужный оператор case, чтобы использовать только что созданную кисть. Ниже показано необходимое обновление, которое выглядит более сложным, чем можно было ожидать, т.к. шестнадцатеричное значение преобразуется в подходящий объект Color посредством класса System.Windows.Media.ColorConverter (результат изменения представлен на рис. 26.7):

case SelectedShape.Circle:

  shapeToRender = new Ellipse() { Height = 35, Width = 35 };

  // Создать кисть RadialGradientBrush в коде.

  RadialGradientBrush brush = new RadialGradientBrush();

  brush.GradientStops.Add(new GradientStop(

    (Color)ColorConverter.ConvertFromString("#FF77F177"), 0));

  brush.GradientStops.Add(new GradientStop(

    (Color)ColorConverter.ConvertFromString("#FF11E611"), 1));

  brush.GradientStops.Add(new GradientStop(

    (Color)ColorConverter.ConvertFromString("#FF5A8E5A"), 0.545));

  shapeToRender.Fill = brush;

  break;

Кстати, объекты GradientStop можно строить, указывая простой цвет в качестве первого параметра конструктора с применением перечисления Colors, которое дает сконфигурированный объект Color:

GradientStop g = new GradientStop(Colors.Aquamarine, 1);

Если требуется более тонкий контроль, то можно передавать объект Color, сконфигурированный в коде, например:

Color myColor = new Color() { R = 200, G = 100, B = 20, A = 40 };

GradientStop g = new GradientStop(myColor, 34);

Разумеется, использование перечисления Colors и класса Color не ограничивается градиентными кистями. Их можно применять всякий раз, когда необходимо представить значение цвета в коде.

Конфигурирование перьев

В сравнении с кистями перо представляет собой объект для рисования границ геометрических объектов или в случае класса Line либо PolyLine — самого линейного геометрического объекта. В частности, класс Pen позволяет рисовать линию указанной толщины, представленной значением типа double. Вдобавок объект Pen может быть сконфигурирован с помощью того же самого вида свойств, что и в классе Shape, таких как начальный и конечный концы пера, шаблоны точек-тире и т.д. Например, для определения атрибутов пера к определению фигуры можно добавить следующую разметку:

<Pen Thickness="10" LineJoin="Round" EndLineCap="Triangle"

    StartLineCap="Round" />

Во многих случаях создавать объект Pen непосредственно не придется, потому что это делается косвенно, когда присваиваются значения свойствам вроде StrokeThickness производного от Shape типа (а также других типов UIElement). Однако строить специальный объект Pen удобно при работе с типами,