<Window.Resources>
<ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
<Grid>
<Ellipse Name="Ellipse1" Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="{TemplateBinding BorderThickness}">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin=".5, .5">
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Orange" Offset=".25" />
<GradientStop Color="Blue" Offset=".5" />
<GradientStop Color="Yellow" Offset=".75" />
<GradientStop Color="Green" Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Ellipse1" Property="Fill">
<Setter.Value>
<RadialGradientBrush GradientOrigin=".5, .5">
<GradientStop Color="LightCoral" Offset="0" />
<GradientStop Color="LightSalmon" Offset=".25" />
<GradientStop Color="LightBlue" Offset=".5" />
<GradientStop Color="LightYellow" Offset=".75" />
<GradientStop Color="LightGreen" Offset="1" />
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Ellipse1" Property="Fill">
<Setter.Value>
<RadialGradientBrush GradientOrigin=".5,.5">
<GradientStop Color="Gray" Offset="0" />
<GradientStop Color="LightGray" Offset=".25" />
<GradientStop Color="Black" Offset=".5" />
<GradientStop Color="White" Offset=".75" />
<GradientStop Color="DarkGray" Offset="1" />
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard AutoReverse="True">
<DoubleAnimation To="0" Duration="0:0:0.1"
Storyboard.TargetProperty="Width" />
<DoubleAnimation To="0" Duration="0:0:0.1"
Storyboard.TargetProperty="Height" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style TargetType="{x:Type Button}">
<Setter Property="Template" Value="{StaticResource ButtonTemplate}" />
</Style>
</Window.Resources>
This creates a button template that applies a style (very ugly) and behavior that can be associated with any button. By including the following style block and associated setters, the template is automatically applied to all buttons contained in the current window.
<Style TargetType="{x:Type Button}">
<Setter Property="Template" Value="{StaticResource ButtonTemplate}" />
</Style>
If I wanted to apply this template and style to the entire application, I would simply move these snippets to the app.xaml. Another level of dynamism comes by allowing you to link to external xaml files as application resources and swap them. So, not only could you customize the look and feel of the application, you can dynamically customize the inherent behavior of elements at the application level. There is a ton more to get into with this kind of thing, and we will at a later date. Other possibilities include, command triggers, gestures, framed animations and much more. It has been very interesting to date and I will bring back some renewed focus on pushing the ui envelope within our applications.
Is this making an elliptical shaped button with an animated gradient background?
ReplyDeleteYeah. Actually, it is defining a rounded button with 3 gradient patterns, one for hover, one for disabled and one default. Then when you click it, there is an animation on the button size. It's pretty cool. Slap it in a xaml page and try it out.
ReplyDelete