VerticalAlignment= Center

<Grid>

<Rectangle Name= GelBackground RadiusX= 9 RadiusY= 9

Fill= {TemplateBinding Background} StrokeThickness= 0.35 > <Rectangle.Stroke> <LinearGradientBrush StartPoint= 0,0 EndPoint= 0,1 > <GradientStop Offset= 0 Color= White /> <GradientStop Offset= 1 Color= #666666 /> </LinearGradientBrush> </Rectangle.Stroke> </Rectangle>

<Rectangle Name= GelShine Margin= 2,2,2,0 VerticalAlignment= Top RadiusX= 6 RadiusY= 6 Stroke= Transparent Height= 15px >

<Rectangle.Fill> <LinearGradientBrush StartPoint= 0,0 EndPoint= 0,1 > <GradientStop Offset= 0 Color= #ccffffff /> <GradientStop Offset= 1 Color= Transparent />

</LinearGradientBrush>

</Rectangle.Fill> </Rectangle>

<ContentPresenter Name= GelButtonContent HorizontalAlignment= Center Content= {TemplateBinding Content}

</Grid>

<ControlTemplate.Triggers>

<Trigger Property= IsMouseOver Value= True >

<Setter Property= Rectangle.Fill TargetName= GelBackground > <Setter.Value>

<RadialGradientBrush>

<GradientStop Offset= 0 Color= Lime /> <GradientStop Offset= 1 Color= DarkGreen /> </RadialGradientBrush> </Setter.Value> </Setter>

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

<Trigger Property= IsPressed Value= True >

<Setter Property= Rectangle.Fill TargetName= GelBackground >

<Setter.Value>

<RadialGradientBrush> <GradientStop Offset= 0 <GradientStop Offset= 1 </RadialGradientBrush> </Setter.Value> </Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>

Color= #ffcc00 /> Color= #cc9900 />

Рис. 34.25. Кнопка, ссылающаяся на стильGelButton

Рис. 34.26. Кнопка, сс1лающаяся на стиль GelButton, в момент перемещения над ней курсора мыши

Рис. 34.27. Кнопка с формой, отличной от прямоугольной

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

Стиль RoundedGelButton может быть построен на основе стиля GelButton установкой свойства BasedOn с элементом Style. Если один стиль основывается на другом, то новый стиль получает все установки базового стиля, если только какие-либо из настроек не переопределяются. Например, RoundedGelButton получает установки ForeGround и Margin из GelButton, поскольку эти настройки не переопределены. Если вы измените установки в базовом стиле, то все стили, основанные на нем, автоматически получат эти новые значения.

Переопределим в новом стиле свойства Height и Template. Здесь шаблон определит два элемента Ellipse вместо прямоугольников. Внешний эллипс GelBackground определит черный эллипс с градиентной линией вокруг него. Второй эллипс будет поменьше, с небольшим полем (5) вверху и полем побольше (50) внизу. Этот эллипс, опять же, имеет линейный градиент, от светлого цвета до прозрачного, имитирующий эффект блеска. Снова будут присутствовать триггеры IsMouseOver и IsPressed, которые изменят значение свойства Fill первого из эллипсов.

В результате получим новую кнопку, основанную на стиле RoundedGelButton, и это по-прежнему будет именно кнопка, как показано на рис. 34.27.

<Style x:Key= RoundedGelButton BasedOn= {StaticResource GelButton}

TargetType= Button > <Setter Property= Width Value= 100 /> <Setter Property= Height Value= 100 /> <Setter Property= Grid.Row Value= 2 />

<Setter Property= Template >

<Setter.Value>

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

<Ellipse Name= GelBackground StrokeThickness= 0.5 Fill= Black > <Ellipse.Stroke>

<LinearGradientBrush StartPoint= 0,0 EndPoint= 0,1 > <GradientStop Offset= 0 Color= #ff7e7e7e /> <GradientStop Offset= 1 Color= Black /> </LinearGradientBrush> </Ellipse.Stroke> </Ellipse>

<Ellipse Margin= 15,5,15,50 > <Ellipse.Fill>

<LinearGradientBrush StartPoint= 0,0 EndPoint= 0,1 > <GradientStop Offset= 0 Color= #aaffffff /> <GradientStop Offset= 1 Color= Transparent />

</LinearGradientBrush>

</Ellipse.Fill> </Ellipse>

<ContentPresenter Name= GelButtonContent VerticalAlignment= Center HorizontalAlignment= Center Content= {TemplateBinding Content}

/>

</Grid>

<ControlTemplate.Triggers>

<Trigger Property= IsMouseOver Value= True > <Setter Property= Rectangle.Fill TargetName= GelBackground > <Setter.Value>

<RadialGradientBrush> <GradientStop Offset= 0 Color= Lime /> <GradientStop Offset= 1 Color= DarkGreen /> </RadialGradientBrush> </Setter.Value> </Setter>

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

<Trigger Property= IsPressed Value= True >

<Setter Property= Rectangle.Fill TargetName= GelBackground > <Setter.Value> <RadialGradientBrush>

<GradientStop Offset= 0 Color= #ffcc00 /> <GradientStop Offset= 1 Color= #cc9900 /> </RadialGradientBrush> </Setter.Value> </Setter>

<Setter Property= Foreground Value= Black />

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

Стилизация ListBox

Изменение стиля кнопки или метки - простая задача. А как насчет изменения стиля элемента, содержащего список элементов, например, ListBox? Кроме того, окно списка имеет поведение и внешний вид. Окно списка может отображать список элементов; вы можете выбирать в нем один или более элементов. Для обеспечения требуемого поведения в классе ListBox определены методы, свойства и события. Внешний вид ListBox отделен от его поведения. Элемент ListBox имеет внешний вид по умолчанию, но вы можете изменить его, создав соответствующий шаблон.

Чтобы отобразить некоторые элементы в списке, мы создадим класс Country, представляющий наименование и флаг, с путем к файлу его изображения. Класс Country определяет свойства Name и ImagePath, а также имеет переопределенный метод ToString() для строкового представления по умолчанию:

public class Country

public Country(string name) : this(name, null)

public Country(string name, string imagePath)

this.name = name; this.imagePath = imagePath;

public string Name { get; set; } public string ImagePath { get; set; } public override string ToString()

return Name;