<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    x:Key="Shared.ButtonStyles_8_1_RP">

    <Style x:Key="Resources.Shared.ResultButtonStyle"
           TargetType="Button">
        <!-- Background is controlling hover visual -->
        <Setter Property="Background"
                Value="{ThemeResource ImmersiveLightHoverBackgroundBrush}" />
        <!-- BorderBrush is controling focus visual -->
        <Setter Property="BorderBrush"
                Value="{ThemeResource ImmersiveControlLightFocusRectBrush}" />
        <Setter Property="BorderThickness"
                Value="2" />
        <Setter Property="Padding"
                Value="0" />
        <Setter Property="HorizontalAlignment"
                Value="Left" />
        <Setter Property="VerticalAlignment"
                Value="Top" />
        <Setter Property="HorizontalContentAlignment"
                Value="Left" />
        <Setter Property="VerticalContentAlignment"
                Value="Top" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="root">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity"
                                                                       Storyboard.TargetName="hoverVisual">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="1" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <PointerDownThemeAnimation TargetName="root" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled" />
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity"
                                                                       Storyboard.TargetName="focusVisual">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="1" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused" />
                                <VisualState x:Name="PointerFocused" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="hoverVisual"
                                   Fill="Transparent"
                                   Opacity="0"
                                   Margin="1"
                                   Stroke="{TemplateBinding Background}"
                                   StrokeThickness="3" />
                        <ContentPresenter x:Name="contentPresenter"
                                          Content="{TemplateBinding Content}"
                                          Margin="{TemplateBinding Padding}" />
                        <!-- GridViewItemPresenter's focus visual is always 2 pixel wide -->
                        <Border x:Name="focusVisual"
                                IsHitTestVisible="False"
                                Background="{x:Null}"
                                Opacity="0"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="2" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="Resources.Shared.TopLevelButtonStyle"
           TargetType="Button"
           BasedOn="{StaticResource Resources.Shared.ResultButtonStyle}">
        <Setter Property="Padding"
                Value="20" />
        <Setter Property="HorizontalAlignment"
                Value="Stretch" />
        <Setter Property="VerticalAlignment"
                Value="Stretch" />
        <Setter Property="HorizontalContentAlignment"
                Value="Stretch" />
        <Setter Property="VerticalContentAlignment"
                Value="Stretch" />
    </Style>

    <Style x:Key="Resources.Shared.SaturatedResultButtonStyle"
           TargetType="Button"
           BasedOn="{StaticResource Resources.Shared.ResultButtonStyle}">
        <!-- Background is controlling hover visual -->
        <Setter Property="Background"
                Value="{ThemeResource ImmersiveControlDarkButtonBackgroundHoverBrush}" />
        <!-- BorderBrush is controling focus visual -->
        <Setter Property="BorderBrush"
                Value="{ThemeResource ImmersiveSaturatedFocusRectBrush}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="root">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity"
                                                                       Storyboard.TargetName="hoverVisual">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="1" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <PointerDownThemeAnimation TargetName="root" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled" />
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity"
                                                                       Storyboard.TargetName="focusVisual">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="1" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused" />
                                <VisualState x:Name="PointerFocused" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="hoverVisual"
                                   Fill="{TemplateBinding Background}"
                                   Opacity="0"
                                   Margin="0"
                                   Stroke="{x:Null}"
                                   StrokeThickness="0" />
                        <ContentPresenter x:Name="contentPresenter"
                                          Content="{TemplateBinding Content}"
                                          Margin="{TemplateBinding Padding}" />
                        <!-- GridViewItemPresenter's focus visual is always 2 pixel wide -->
                        <Border x:Name="focusVisual"
                                IsHitTestVisible="False"
                                Background="{x:Null}"
                                Opacity="0"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="2" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="Resources.Shared.TransparentButtonStyle"
           TargetType="Button">
        <Setter Property="Background"
                Value="{x:Null}" />
        <Setter Property="BorderBrush"
                Value="{x:Null}" />
        <Setter Property="BorderThickness"
                Value="0" />
        <Setter Property="Padding"
                Value="0" />
        <Setter Property="HorizontalAlignment"
                Value="Left" />
        <Setter Property="VerticalAlignment"
                Value="Top" />
        <Setter Property="HorizontalContentAlignment"
                Value="Left" />
        <Setter Property="VerticalContentAlignment"
                Value="Top" />
        <Setter Property="IsTabStop"
                Value="False" />
        <Setter Property="IsHoldingEnabled"
                Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="PointerOver" />
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <PointerDownThemeAnimation TargetName="contentPresenter" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter x:Name="contentPresenter"
                                          Content="{TemplateBinding Content}"
                                          Margin="{TemplateBinding Padding}">
                        </ContentPresenter>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Style for images in image collage -->
    <Style x:Key="Resources.Shared.ImageButtonStyle"
           TargetType="Button"
           BasedOn="{StaticResource Resources.Shared.TransparentButtonStyle}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Image x:Name="image"
                           Source="{Binding Extended:thumbnail.Extended:src}"
                           Stretch="None"
                           Style="{CustomResource Resources.Shared.BaseImageStyle}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="PointerOver" />
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <PointerDownThemeAnimation TargetName="image" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Image>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>