<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      HorizontalAlignment="Center" VerticalAlignment="Center">

<!-- Example 16-11. Templates and animation targets -->

<StackPanel Orientation="Horizontal">
  <StackPanel.Resources>
    <Style TargetType="{x:Type Button}">
      <Setter Property="Background" Value="CornflowerBlue" />
      <Setter Property="Height" Value="26" />
      <Setter Property="Template">
        <Setter.Value>

          <ControlTemplate TargetType="{x:Type Button}">
            <Grid Height="{TemplateBinding Height}">
              <Grid.RowDefinitions>
                <RowDefinition Height="1.8*" />
                <RowDefinition Height="*" />
              </Grid.RowDefinitions>

              <Rectangle Grid.RowSpan="2" RadiusX="13" RadiusY="13"
                                       Fill="{TemplateBinding Background}">
                <Rectangle.Stroke>
                  <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Offset="0" Color="Black" />
                        <GradientStop Offset="1" Color="LightGray" />
                  </LinearGradientBrush>
                </Rectangle.Stroke>
              </Rectangle>


              <!-- Glow -->

              <Rectangle Grid.RowSpan="2" RadiusX="13" RadiusY="13">
                <Rectangle.Fill>
                  <RadialGradientBrush Center="0.5, 1" GradientOrigin="0.5,1"
                                             RadiusX="0.7" RadiusY="0.8">
                    <RadialGradientBrush.GradientStops>
                      <GradientStop x:Name="glowStop" Offset="0" Color="White" />
                      <GradientStop Offset="1" Color="Transparent" />
                    </RadialGradientBrush.GradientStops>
                  </RadialGradientBrush>
                </Rectangle.Fill>
              </Rectangle>


              <Rectangle Margin="3,1.1" RadiusX="11" RadiusY="12">
                <Rectangle.Fill>
                  <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Offset="0" Color="#dfff" />
                        <GradientStop Offset="1" Color="#0fff" />
                  </LinearGradientBrush>
                </Rectangle.Fill>
              </Rectangle>

              <ContentPresenter Grid.RowSpan="3" Margin="13,2,13,4"
                                              HorizontalAlignment="Center"
                                              VerticalAlignment="Center" />

            </Grid>

            <ControlTemplate.Triggers>
              <EventTrigger RoutedEvent="Button.Loaded">
                <BeginStoryboard>
                  <Storyboard>

                    <ColorAnimation From="#1fff" To="#cfff"
                         Storyboard.TargetName="glowStop"
                         Storyboard.TargetProperty="(GradientStop.Color)"
                         Duration="0:0:1"
                         AutoReverse="True" RepeatBehavior="Forever"
                         AccelerationRatio="0.4" DecelerationRatio="0.6"/>
                  </Storyboard>
                </BeginStoryboard>
              </EventTrigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </StackPanel.Resources>

  <Button Margin="4,0">Click me!</Button>
  <Button Background="DarkRed" Foreground="White">And me!</Button>
</StackPanel>

<!-- End of Example 16-11. -->

</Page>
