Стиль для круглой кнопки

нет комментариев
29 декабря 2009 - 19:22
В Window Vista (а также судя по бета версии и в Windows 7) кнопка "Пуск" перестала выглядеть как унылый прямоугольник, и стала красивой круглой. Также аналогичная кругла кнопка была использована в Windows Media Player, в Windows Photo Viewer , в Windows Live Gallery и, с другой расцветкой, в Microsoft Office 2007.
Стиль для круглой кнопки
Реализовать аналогичную кнопку в WPF достаточно легко.

Для данного примера я использова те же цвета, что и в той версии Windows Medial Player, которая была представлена вместе с бетой Windows 7, для Windows Vista они могут отличаться.
Итак, для начала возьмём эллипс с градиентной заливкой и однородным бордером:
<Ellipse Margin="2,2,2,2" StrokeThickness="1.5" x:Name="ellipse" Grid.RowSpan="2">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" MappingMode="RelativeToBoundingBox">
<GradientStop Color="#FFA3B0D8" Offset="0"/>
<GradientStop Color="#FF5F8BC3" Offset="0.444"/>
</LinearGradientBrush>
</Ellipse.Fill>
<Ellipse.Stroke>
<LinearGradientBrush EndPoint="0.505,1" StartPoint="0.495,0">
<GradientStop Color="#FF485EA4" Offset="1"/>
<GradientStop Color="#FF485EA4" Offset="0"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
Сверху поместим path специфической формы (наиболее простой способ получить такую форму - обрисовать скриншот в Expression Blend):
<Path Margin="4,0,4,4" Stretch="Uniform" StrokeThickness="0" Data="M4.0973642,44.617 C12.256034,49.602413 13.93001,38.587614 45.001306,38.781983 76.427898,38.978575 77.268608,49.183727 86.132746,43.809973 86.393574,43.65185 87.77373,62.552321 73.046597,74.974389 56.040774,89.318491 35.10706,88.493983 20.113414,77.486464 1.7395959,63.997406 4.0322094,44.577187 4.0973642,44.617 z" x:Name="path" Width="Auto" Height="Auto" VerticalAlignment="Stretch" Grid.Row="1">
<Path.Fill>
<RadialGradientBrush GradientOrigin="0.501,0.691" RadiusY="1.014">
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1" ScaleY="1.435"/>
<SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.5"/>
<RotateTransform Angle="0" CenterX="0.5" CenterY="0.5"/>
<TranslateTransform X="-0.002" Y="0.216"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FF47CBFA" Offset="0"/>
<GradientStop Color="#FF163893" Offset="1"/>
</RadialGradientBrush>
</Path.Fill>
<Path.Stroke>
<LinearGradientBrush EndPoint="0.505,1" StartPoint="0.495,0">
<GradientStop Color="#FF000D61" Offset="0"/>
<GradientStop Color="#FF819DFF" Offset="1"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
Данный path должен занимать примерно 55-56% от высоты всего контрола, поэтому для корневого grid`а зададим следующие размеры строк:
<Grid.RowDefinitions>
<RowDefinition Height="0.44*"/>
<RowDefinition Height="0.56*"/>
</Grid.RowDefinitions>
Теперь сверху поместим ещё один эллипс, который будет представлять собой внутрений бордер:
<Ellipse Margin="3,3,3,3" StrokeThickness="1.5" x:Name="ellipse_Copy" Fill="{x:Null}" Grid.RowSpan="2">
<Ellipse.Stroke>
<LinearGradientBrush EndPoint="0.505,1" StartPoint="0.495,0">
<GradientStop Color="#FFA2F6FF" Offset="1"/>
<GradientStop Color="#FFD3D8ED" Offset="0"/>
<GradientStop Color="#FF5D7FC2" Offset="0.487"/>
<GradientStop Color="#FF193095" Offset="0.5"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
Теперь добавляем ContentPresenter:
<ContentPresenter HorizontalAlignment="Center" Margin="5" VerticalAlignment="Center" Grid.RowSpan="2"/>
И основная часть работы завершена. Осталось только сделать обработку наведения мыши и нажатия кнопки. Для этого в самый низ добавим ещё один эллипс с полупрозрачным радиальным градиентом, который будет служить подсветкой при наведении/нажатии:
<Ellipse HorizontalAlignment="Stretch" Margin="-2,-2,-2,-2" Width="Auto" StrokeThickness="0" x:Name="hightlightCircle" Opacity="1" Visibility="Collapsed" Grid.RowSpan="2">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF000A4B" Offset="0"/>
<GradientStop Color="#1961B6E3" Offset="1"/>
<GradientStop Color="#FF61B6E3" Offset="0.85"/>
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.Stroke>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
Теперь добавляем триггеры для событий мыши:
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsPressed" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="Visibility" TargetName="hightlightCircle" Value="Visible"/>
<Setter Property="Stroke" TargetName="ellipse_Copy">
<Setter.Value>
<LinearGradientBrush EndPoint="0.505,1" StartPoint="0.495,0">
<GradientStop Color="#FFD3FFFF" Offset="1"/>
<GradientStop Color="#FFCDE2F2" Offset="0"/>
<GradientStop Color="#FF6AA9DA" Offset="0.487"/>
<GradientStop Color="#FF246AB5" Offset="0.5"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Stroke" TargetName="ellipse">
<Setter.Value>
<LinearGradientBrush EndPoint="0.505,1" StartPoint="0.495,0">
<GradientStop Color="#FF3485C2" Offset="1"/>
<GradientStop Color="#FF69C5F1" Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Fill" TargetName="ellipse">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" MappingMode="RelativeToBoundingBox">
<GradientStop Color="#FF9EC0E1" Offset="0"/>
<GradientStop Color="#FF58A0D6" Offset="0.444"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Fill" TargetName="path">
<Setter.Value>
<RadialGradientBrush GradientOrigin="0.501,0.691" RadiusY="1.014">
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1" ScaleY="1.435"/>
<SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.5"/>
<RotateTransform Angle="0" CenterX="0.5" CenterY="0.5"/>
<TranslateTransform X="-0.002" Y="0.216"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FF7CF0FC" Offset="0"/>
<GradientStop Color="#FF105399" Offset="1"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</MultiTrigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Visibility" TargetName="hightlightCircle" Value="Visible"/>
<Setter Property="Stroke" TargetName="ellipse_Copy">
<Setter.Value>
<LinearGradientBrush EndPoint="0.505,1" StartPoint="0.495,0">
<GradientStop Color="#FF51BDE9" Offset="1"/>
<GradientStop Color="#FFA4AFBC" Offset="0"/>
<GradientStop Color="#FF627A94" Offset="0.487"/>
<GradientStop Color="#FF344262" Offset="0.5"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Stroke" TargetName="ellipse">
<Setter.Value>
<LinearGradientBrush EndPoint="0.505,1" StartPoint="0.495,0">
<GradientStop Color="#FF245379" Offset="1"/>
<GradientStop Color="#FF6CC6EF" Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Fill" TargetName="ellipse">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" MappingMode="RelativeToBoundingBox">
<GradientStop Color="#FF8993A3" Offset="0"/>
<GradientStop Color="#FF5B7998" Offset="0.444"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Fill" TargetName="path">
<Setter.Value>
<RadialGradientBrush GradientOrigin="0.501,0.691" RadiusY="1.014">
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1" ScaleY="1.435"/>
<SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.5"/>
<RotateTransform Angle="0" CenterX="0.5" CenterY="0.5"/>
<TranslateTransform X="-0.002" Y="0.216"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FF54D1FE" Offset="0"/>
<GradientStop Color="#FF192E54" Offset="1"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
И всё, стиль для круглой кнопки готов.

Скачать исходники:

ссылка | Лента RSS комментариев RSS записи

Метки: c#,  wpf,  dotnet,  programming,  office,  windows vista,  windows 7,  xaml

КОММЕНТАРИИ


НОВЫЙ КОММЕНТАРИЙ


*жирный*
_курсив_
+подчеркнутый+
! заголовок 1
!! заголовок 2
* список
** список 2
# нумерованый список
## нумерованый список 2
[url:http://www.example.com]
{"без форматирования"}
Полное описание синтаксиса






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

последние записи

метки

календарь

<< >> октябрь 2020
пн вт ср чт пт сб вс
1234
567891011
12131415161718
19202122232425
262728293031