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

И снова следует отметить, что вам очень редко придется вручную строить или анализировать строковый литерал, содержащий инструкции мини-языка моделирования путей. Тем не менее, цель в том, чтобы разметка XAML, генерируемая специализированными инструментами, не казалась вам совершенно непонятной.

Кисти и перья WPF

Каждый способ графической визуализации (фигуры, рисование и геометрические объекты, а также визуальные объекты) интенсивно использует кисти, которые позволяют управлять заполнением внутренней области двумерной фигуры. Инфраструктура WPF предлагает шесть разных типов кистей, и все они расширяют класс System.Windows.Media.Brush. Несмотря на то что 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):