Рис. 34.22. Пример применения шаблона с двумя кнопками

Класс ControlTemplate определяет содержимое элемента управления и разрешает доступ к содержимому из самого элемента управления, в чем вы вскоре убедитесь. Здесь ControlTemplate определяет Grid из двух строк. Строки используют звездообразное изменение размеров, причем первая строка по высоте вдвое больше второй. Затем определяются два элемента Rectangle. Первый прямоугольник охватывает обе строки, устанавливает свойство Stroke в Green (для подчеркивания зеленым), а также значения RoundX и RoundY для скругленных углов. Второй прямоугольник, расположенный внутри первой строки, имеет свойство

Fill, установленное в кисть линейного градиента. button3 с содержимым Template Button, ссылается на стиль ButtonStyle2. На рис. 34.23 показана кнопка button3 с новым стилем, но отсутствующим содержимым.

<Window x:Class= TemplateSample.Window1

xmlns= http: schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:x= http: schemas.microsoft.com/winfx/2006/xaml Title= Template Sample Height= 300 Width= 300

>

<Window.Resources> <!-- другие стили -->

<Style x:Key= ButtonStyle2 TargetType= {x:Type Button} > <Setter Property= Template > <Setter.Value> <ControlTemplate> <Grid>

<Grid.RowDefinitions>

<RowDefinition Height= 2* /> <RowDefinition Height= * /> </Grid.RowDefinitions>

<Rectangle Grid.RowSpan= 2 RadiusX= 4 RadiusY= 8 Stroke= Green

/>

<Rectangle RadiusX= 4 RadiusY= 8 Margin= 2 > <Rectangle.Fill> <LinearGradientBrush StartPoint= 0,0 EndPoint= 0,1 > <GradientStop Offset= 0 Color= LightBlue /> <GradientStop Offset= 0.5 Color= #afff /> <GradientStop Offset= 1 Color= #6faa />

</LinearGradientBrush>

</Rectangle.Fill> </Rectangle> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <StackPanel> <!- другие кнопки -->

<Button Name= button3 Background= Yellow Height= 100 Width= 220 FontSize= 24

Style= {StaticResource ButtonStyle2} >Template Button </Button> </StackPanel> </Window>

Теперь кнопка выглядит совершенно по-другому, но определенное в ней содержимое на рис. 34.23 полностью отсутствует. Ранее созданный шаблон необходимо расширить. Первый прямоугольник в шаблоне теперь имеет свойство Fill установленное в {TemplateBinding Background}. Расширение разметки TemplateBinding позволяет шаблону элемента управления использовать содержимое шаблонного элемента. Здесь прямоугольник заполняется фоном, определенным для кнопки. Для button3 определен желтый фон, так что этот фон комбинируется с фоном из второго прямоугольника шаблона элемента управления. После определения второго прямоугольника используется элемент ContentPresenter. Элемент ContentPresenter берет содержимое из шаблонного элемента управления и помещает его, как определено в данном случае, в обе строки, поскольку Grid.RawSpan имеет значение 2. Если определен ContentPresenter, то TargetType c ControlTemplate также должен быть установлен. Содержимое позиционируется установкой свойств HorizontalAlignment, VerticalAlignment и Margin в значения, определенные самой кнопкой посредством расширений разметки TemplateBinding. С помощью ControlTemplate вы можете также определить триггеры в ресурсах, как было показано ранее. На рис. 34.24 представлен новый вид кнопки, включая содержимое и фон, скомбинированные с шаблоном.

<Style x:Key= ButtonStyle2 TargetType= {x:Type Button} > <Setter Property= Template >

<Setter.Value>

<ControlTemplate TargetType= {x:Type Button} > <Grid>

<Grid.RowDefinitions>

<RowDefinition Height= 2* />

<RowDefinition Height= * /> </Grid.RowDefinitions>

<Rectangle Grid.RowSpan= 2 RadiusX= 4 RadiusY= 8 Stroke= Green

Fill= {TemplateBinding Background} /> <Rectangle RadiusX= 4 RadiusY= 8 Margin= 2 > <Rectangle.Fill>

<LinearGradientBrush StartPoint= 0,0 EndPoint= 0,1 > <GradientStop Offset= 0 Color= LightBlue /> <GradientStop Offset= 0.5 Color= #afff /> <GradientStop Offset= 1 Color= #6faa /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>

<ContentPresenter Grid.RowSpan= 2

HorizontalAlignment= {TemplateBinding HorizontalContentAlignment}

VerticalAlignment= {TemplateBinding VerticalContentAlignment} Margin= {TemplateBinding Padding} />

</Grid>

<ControlTemplate.Triggers>

<Trigger Property= IsMouseOver Value= True >

<Setter Property= Foreground Value= Aqua /> </Trigger>

<Trigger Property= IsPressed Value= True >

<Setter Property= Foreground Value= Black />

</Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>

</Window.Resources>

Рис. 34.23. Третья кнопка в примере применения шаблона

Рис. 34.24. Новый вид кнопки

Давайте попробуем сделать нашу кнопку еще симпатичнее: воспользуемся средством прозрачности. Стиль GetButton устанавливает свойства Background, Height, Foreground, Margin и Template. Шаблон - наиболее интересный аспект этого стиля. Шаблон специфицирует Grid с единственной строкой и столбцом.

Внутри этой ячейки вы можете найти прямоугольник по имени GelBackground. Этот прямоугольник имеет скругленные углы и кисть линейного градиента для штрихов. Скругленные углы определены установками RadiusX и RadiusY. Штрих, очерчивающий прямоугольник, очень тонкий, поскольку свойство StrokeThickness установлено в 0.35.

Второй прямоугольник GetShine - это просто маленький прямоугольник высотой 15 пикселей, и из-за настройки Margin он видим внутри первого прямоугольника. Штрих прозрачен, так что нет линии, очерчивающей прямоугольник. Этот прямоугольник просто использует кисть заполнения линейного градиента, которая дает переход от легкого, частично прозрачного цвета до полной прозрачности. Это создает некоторый мерцающий (shimmering) эффект.

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

Такая стилизованная кнопка выглядит на экране очень симпатично. Однако пока нет никакого действия в ответ на щелчок кнопкой мыши или перемещение курсора мыши над поверхностью кнопки. Для шаблонно-стилизованной кнопки вы должны иметь триггеры, изменяющие отображение кнопки в ответ на щелчки. Триггер свойства IsMouseOver определяет новое значение свойства Rectangle.Fill с отличающимся цветом для кисти радиального градиента. На прямоугольник, получающий новое заполнение, ссылается свойство TargetName. Триггер свойства IsPressed очень похож; здесь просто используется другая кисть радиального градиента для заполнения прямоугольника. На рис. 34.25 вы можете видеть кнопку, ссылающуюся на стиль GelButton. На рис. 34.26 показана та же кнопка в момент перемещения над ней курсора мыши, так что видим эффект от кисти радиального градиента.

<Style x:Key= GelButton TargetType= {x:Type Button} > <Setter Property= Background Value= Black />

<Setter Property= Height Value= 40 /> <Setter Property= Foreground Value= White /> <Setter Property= Margin Value= 3 /> <Setter Property= Template > <Setter.Value> <ControlTemplate TargetType= {x:Type Button} >