Главная » Silverlight » Начало создания шаблона, используемого по умолчанию

0

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

Для заполнения передней и обратной областей содержимого в FlipPanel исполь­зуется элемент ContentPresenter. Этот же способ заполнения применяется в примере с пользовательской кнопкой {см. ранее). Разница лишь в том, что в FlipPanel необходи­мы два элемента ContentPresenter, по одному для каждой стороны панели. Кроме того, объект FlipPanel содержит отдельный элемент Border, охватывающий каждый объект ContentPresenter. Благодаря этому потребитель элемента управления может нарисо­вать рамку вокруг области содержимого путем установки свойств FlipPanel (таких, как BorderBrush, BorderThickness, Background и CornerRadius), избавляя от необходимости добавлять рамку вручную.

Ниже приведена базовая разметка шаблона, применяемого по умолчанию.

<ControlTemplate TargetType="local:FlipPanel"> <Grid>

<VisualStateManager.VisualStateGroups>

<!— Здесь размещается анимация состояний —> </VisualStateManager.VisualStateGroups>

<Grid.RowDefinitions> <RowDefinition Height="Auto"X/RowDefinition> <RowDefinition Height="Auto"x/RowDefinition> </Grid.RowDefinitions>

<!— Здесь находится переднее содержимое —> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius^"{TemplateBinding CornerRadius}" Background="{TemplateBinding Background}"> <ContentPresenter Content=

"{TemplateBinding FrontContent}"> </ContentPresenter> </Border>

<!— Здесь находится обратное содержимое —> <Border BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" Background="{TemplateBinding Background}"> <ContentPresenter Content=

"{TemplateBinding BackContent}"> </ContentPresenter> </Border>

<!— Кнопка, запускающая переворачивание —> <ToggleButton Grid.Row="l" x:Name="FlipButton"

Margin="0,10,0,0"> </ToggleButton>

</Grid>

</ControlTemplate>

При создании шаблона, применяемого по умолчанию, лучше избегать жесткого ко­дирования параметров, настраиваемых потребителем элемента управления. Вместо это­го применим выражение связывания шаблона. В данном примере выражение связыва­ния устанавливает свойства BorderBrush, BorderThickness, CornerRadius, Background, FrontContent и BackContent. Для установки значений этих свойств, используемых по умолчанию (чтобы элемент правильно выглядел, если потребитель элемента не установит его свойства), нужно добавить несколько процедур доступа к стилю элемента управления.

Элемент управления ToggleButton

Приведенный выше шаблон элемента управления содержит объект ToggleButton. Используется внешний вид TuggleButton, установленный по умолчанию. Благодаря этому объект ToggleButton выглядит, как обычная кнопка с традиционным закрашен­ным фоном. Для панели FlipPanel это не подходит.

Необходимое содержимое можно разместить в элементе ToggleButton, однако для FlipPanel нужно, чтобы внешний вид элемента зависел от состояния панели. Как вид­но на рис. 13.8, внешний вид кнопки подсказывает, как будет повернута панель при щелчке на кнопке.

Для реализации этого эффекта нужно создать шаблон пользовательского элемен­та ToggleButton. Шаблон может содержать фигуры, изображающие стрелки. В данном примере элемент ToggleButton рисуется с помощью объектов Ellipse и Path. Оба они расположены в контейнере Grid, содержащем одну ячейку.

<ToggleButton Grid.Row="l" x:Name="FlipButton" RenderTransformC)rigin="0.5,0.5" Margin="0,10,0,0"> <ToggleButton.Template> <ControlTemplate> <Grid>

<Ellipse Stroke="#FFA9A9A9" Fill="AliceBlue" Width="19" Height="19"x/Ellipse> <Path RenderTransform0rigin="0.5,0.5"

Data="Ml,1.5L4.5,5 8,1.5" Stroke="#FF666666" StrokeThickness="2" HorizontalAlignment="Center" VerticalAlignment="Center"x/Path> </Grid> </ControlTemplate> </ToggleButton.Template>

</ToggleButton>

Источник: Мак-Дональд, Мэтью. Silverlight 3 с примерами на С# для профессионалов. : Пер. с англ. —- М. : ООО «И.Д. Вильяме», 2010. — 656 с. : ил. — Парал. тит. англ.

По теме:

  • Комментарии