<Page
    x:Class="ControlTemplates.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ControlTemplates"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Grid HorizontalAlignment="Left" VerticalAlignment="Top" Margin="58,54,0,0">
            <!-- Listing 19-25 -->
            <Button Content="OK">
                <Button.Template>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Rectangle Fill="#CCEEFF" Stroke="Green" StrokeThickness="10"
                           RadiusX="15" RadiusY="15" />

                            <ContentPresenter Margin="25" />
                        </Grid>
                    </ControlTemplate>
                </Button.Template>
            </Button>

        </Grid>

        <Grid HorizontalAlignment="Left" VerticalAlignment="Top" Margin="58,175,0,0">
            <Button Content="OK" Background="Red" BorderBrush="Yellow" BorderThickness="10" Padding="20" VerticalContentAlignment="Bottom" Height="120">
                <Button.Template>
                    <!-- Listing 19-26 -->
                    <ControlTemplate TargetType="Button">
                        <Border Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}" >

                            <ContentPresenter Margin="{TemplateBinding Padding}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Border>
                    </ControlTemplate>

                </Button.Template>
            </Button>
        </Grid>

        <Grid HorizontalAlignment="Left" VerticalAlignment="Top" Margin="253,175,0,0">
            <Button Content="OK" Background="Red" BorderBrush="Yellow" BorderThickness="10" Padding="20" VerticalContentAlignment="Bottom">
                <Button.Template>
                    <!-- Listing 19-27 -->
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="PointerOver">
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames
                                Storyboard.TargetProperty="Opacity"
                                Storyboard.TargetName="pressedBackground">
                                                <LinearDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled" />
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused" />
                                    <VisualState x:Name="Unfocused"/>
                                    <VisualState x:Name="PointerFocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <Rectangle x:Name="pressedBackground" Fill="#00FF00" Opacity="0"/>
                            <ContentPresenter Margin="15" />
                        </Grid>
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </Grid>
    </Grid>
</Page>
