<!--
Copyright (c) Microsoft Corporation.  All rights reserved.
-->
<!--
Use of this source code is subject to the terms of the Microsoft
premium shared source license agreement under which you licensed
this source code. If you did not accept the terms of the license
agreement, you are not authorized to use this source code.
For the terms of the license, please see the license agreement
signed by you and Microsoft.
THE SOURCE CODE IS PROVIDED "AS IS", WITH NO WARRANTIES OR INDEMNITIES.
-->
<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:xrpack="http://schemas.microsoft.com/windowsembedded/silverlight/packaging"
    mc:Ignorable="d xrpack"
    xrpack:ClassResourceId="Class:1205(IDR_SLD_KBRD_PANEL_PAGE)"
    Width="800" Height="600">
    <UserControl.Resources>
        <Storyboard x:Name="Init" RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="keyboard" RepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="-80"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="400"/>
                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="-80"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>


        <Style x:Key="KeyboardCommonButtonStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="CommonStates">
                                    <vsm:VisualState x:Name="Normal"/>
                                    <vsm:VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="pressed" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                                                <SplineDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                                                <SplineDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Disabled"/>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="FocusStates">
                                    <vsm:VisualState x:Name="Focused"/>
                                    <vsm:VisualState x:Name="Unfocused"/>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>

                            <Border x:Name="outerBorder" BorderThickness="1" CornerRadius="3" Visibility="Visible">
                                <Border.BorderBrush>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FF627E88"/>
                                        <GradientStop Color="#FF324248" Offset="0.4"/>
                                        <GradientStop Color="#FF354348" Offset="1"/>
                                    </LinearGradientBrush>
                                </Border.BorderBrush>
                                <Grid>
                                    <Grid x:Name="normal">
                                        <Border x:Name="background" CornerRadius="3">
                                            <Border.Background>
                                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                                    <GradientStop Color="#FFF9FCFF"/>
                                                    <GradientStop Color="#FFE2ECF4" Offset="0.6"/>
                                                    <GradientStop Color="#FFBBC2CA" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Border.Background>
                                        </Border>
                                        <Border x:Name="innerBorder" CornerRadius="2" BorderThickness="1" BorderBrush="#99FFFFFF"/>
                                    </Grid>
                                    <Grid x:Name="pressed" Visibility="Collapsed">
                                        <Border x:Name="backgroundPressed" CornerRadius="3">
                                            <Border.Background>
                                                <LinearGradientBrush StartPoint="0,1" EndPoint="0,0">
                                                    <GradientStop Color="#FFF9FCFF"/>
                                                    <GradientStop Color="#FFE2ECF4" Offset="0.6"/>
                                                    <GradientStop Color="#FFBBC2CA" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Border.Background>
                                        </Border>
                                        <Border x:Name="innerBorderPressed" CornerRadius="2" BorderThickness="1" BorderBrush="#99FFFFFF"/>
                                    </Grid>
                                </Grid>
                            </Border>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" x:Name="contentPresenter" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" RenderTransformOrigin="0.5,0.5">
                                <ContentPresenter.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </ContentPresenter.RenderTransform>
                            </ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="KeyboardFunctionButtonStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="CommonStates">
                                    <vsm:VisualState x:Name="Normal"/>
                                    <vsm:VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="pressed" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                                                <SplineDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                                                <SplineDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="normal" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Disabled"/>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="FocusStates">
                                    <vsm:VisualState x:Name="Focused"/>
                                    <vsm:VisualState x:Name="Unfocused"/>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>

                            <Border x:Name="outerBorder" BorderThickness="1" CornerRadius="3" Background="#FFFFFFFF">
                                <Border.BorderBrush>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#D3000000"/>
                                        <GradientStop Color="#FF000000" Offset="0.75"/>
                                    </LinearGradientBrush>
                                </Border.BorderBrush>
                                <Grid>
                                    <Grid x:Name="normal">
                                        <Border x:Name="background" CornerRadius="3">
                                            <Border.Background>
                                                <LinearGradientBrush EndPoint="0,0" StartPoint="0,1">
                                                    <GradientStop Color="#FF000000" Offset="0.38"/>
                                                    <GradientStop Color="#E5000000" Offset="0.7"/>
                                                    <GradientStop Color="#B5000000" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Border.Background>
                                        </Border>
                                        <Border x:Name="innerBorder" CornerRadius="2" BorderThickness="1" BorderBrush="#4C7398D1"/>
                                    </Grid>
                                    <Grid x:Name="pressed" Visibility="Collapsed">
                                        <Border x:Name="backgroundPressed" CornerRadius="3">
                                            <Border.Background>
                                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                                    <GradientStop Color="#FF000000" Offset="0.38"/>
                                                    <GradientStop Color="#E5000000" Offset="0.7"/>
                                                    <GradientStop Color="#B5000000" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Border.Background>
                                        </Border>
                                        <Border x:Name="innerBorderPressed" CornerRadius="2" BorderThickness="1" BorderBrush="#4C7398D1"/>
                                    </Grid>
                                </Grid>
                            </Border>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" x:Name="contentPresenter" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" RenderTransformOrigin="0.5,0.5">
                                <ContentPresenter.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </ContentPresenter.RenderTransform>
                            </ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="KeyboardShiftButtonStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="KeyboardStates">
                                    <vsm:VisualState x:Name="KBNormal"/>
                                    <vsm:VisualState x:Name="KBRelease">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="pressedImg" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="normalImg" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="checkOuterBorder" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="KBLockRelease">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="checkOuterBorder" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="normalImg" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="pressedImg" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="KBPressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="pressed" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="normal" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="pressedImg" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="normalImg" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="checkOuterBorder" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>

                            <Border x:Name="outerBorder" BorderThickness="1" CornerRadius="3" Background="#FFFFFFFF">
                                <Border.BorderBrush>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#D3000000"/>
                                        <GradientStop Color="#FF000000" Offset="0.75"/>
                                    </LinearGradientBrush>
                                </Border.BorderBrush>
                                <Grid>
                                    <Grid x:Name="normal">
                                        <Border x:Name="background" CornerRadius="3">
                                            <Border.Background>
                                                <LinearGradientBrush EndPoint="0,0" StartPoint="0,1">
                                                    <GradientStop Color="#FF000000" Offset="0.38"/>
                                                    <GradientStop Color="#E5000000" Offset="0.7"/>
                                                    <GradientStop Color="#B5000000" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Border.Background>
                                        </Border>
                                        <Border x:Name="innerBorder" CornerRadius="2" BorderThickness="1" BorderBrush="#4C7398D1"/>
                                    </Grid>
                                    <Grid x:Name="pressed" Visibility="Collapsed">
                                        <Border x:Name="backgroundPressed" CornerRadius="3">
                                            <Border.Background>
                                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                                    <GradientStop Color="#FF000000" Offset="0.38"/>
                                                    <GradientStop Color="#E5000000" Offset="0.7"/>
                                                    <GradientStop Color="#B5000000" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Border.Background>
                                        </Border>
                                        <Border x:Name="innerBorderPressed" CornerRadius="2" BorderThickness="1" BorderBrush="#4C7398D1"/>
                                    </Grid>
                                </Grid>
                            </Border>
                            <Border x:Name="checkOuterBorder" CornerRadius="3" BorderThickness="1" BorderBrush="#FF3CFF00" Visibility="Collapsed">
                                <Border x:Name="checkInnerBorder" CornerRadius="2" BorderThickness="1" BorderBrush="#990CE911"/>
                            </Border>
                            <Image x:Name="normalImg" Source="BackgroundAnimation/ShiftNormal.png" Stretch="None"/>
                            <Image x:Name="pressedImg" Source="BackgroundAnimation/ShiftPressed.png" Stretch="None" Visibility="Collapsed"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="KeyboardAltButtonStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="KeyboardStates">
                                    <vsm:VisualState x:Name="KBNormal"/>
                                    <vsm:VisualState x:Name="KBPressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="pressed" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="normal" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="checkOuterBorder" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="KBChecked">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="checkOuterBorder" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="normalImg" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="checkedImg" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>

                            <Border x:Name="outerBorder" BorderThickness="1" CornerRadius="3" Background="#FFFFFFFF">
                                <Border.BorderBrush>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#D3000000"/>
                                        <GradientStop Color="#FF000000" Offset="0.75"/>
                                    </LinearGradientBrush>
                                </Border.BorderBrush>
                                <Grid>
                                    <Grid x:Name="normal">
                                        <Border x:Name="background" CornerRadius="3">
                                            <Border.Background>
                                                <LinearGradientBrush EndPoint="0,0" StartPoint="0,1">
                                                    <GradientStop Color="#FF000000" Offset="0.38"/>
                                                    <GradientStop Color="#E5000000" Offset="0.7"/>
                                                    <GradientStop Color="#B5000000" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Border.Background>
                                        </Border>
                                        <Border x:Name="innerBorder" CornerRadius="2" BorderThickness="1" BorderBrush="#4C7398D1"/>
                                    </Grid>
                                    <Grid x:Name="pressed" Visibility="Collapsed">
                                        <Border x:Name="backgroundPressed" CornerRadius="3">
                                            <Border.Background>
                                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                                    <GradientStop Color="#FF000000" Offset="0.38"/>
                                                    <GradientStop Color="#E5000000" Offset="0.7"/>
                                                    <GradientStop Color="#B5000000" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Border.Background>
                                        </Border>
                                        <Border x:Name="innerBorderPressed" CornerRadius="2" BorderThickness="1" BorderBrush="#4C7398D1"/>
                                    </Grid>
                                </Grid>
                            </Border>
                            <Border x:Name="checkOuterBorder" CornerRadius="3" BorderThickness="1" BorderBrush="#FF3CFF00" Visibility="Collapsed">
                                <Border x:Name="checkInnerBorder" CornerRadius="2" BorderThickness="1" BorderBrush="#990CE911"/>
                            </Border>
                            <Image x:Name="checkedImg" Source="BackgroundAnimation/AltChecked.png" Stretch="None" Visibility="Collapsed" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,1,0,0"/>
                            <TextBlock x:Name="normalImg" Text="Alt" Foreground="#FFC8E2F1" FontSize="21" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>


    <Grid x:Name="LayoutRoot">
        <Grid Grid.Row="1" x:Name="keyboard" Visibility="Visible" RenderTransformOrigin="0.5,0.5">
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Grid.RenderTransform>

            <Grid x:Name="Keyboard" Visibility="Visible">
                <Grid.RowDefinitions>
                    <RowDefinition Height="2"/>
                    <RowDefinition Height="10*"/>
                    <RowDefinition Height="63*"/>
                    <RowDefinition Height="7*"/>
                    <RowDefinition Height="63*"/>
                    <RowDefinition Height="7*"/>
                    <RowDefinition Height="63*"/>
                    <RowDefinition Height="7*"/>
                    <RowDefinition Height="55*"/>
                    <RowDefinition Height="3*"/>
                </Grid.RowDefinitions>

                <Grid Grid.Row="2" x:Name="LtrLine1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.5*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="0.5*"/>
                    </Grid.ColumnDefinitions>
                    <Button x:Name="LtrQ" Grid.Column="1" Content="q" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="LtrW" Grid.Column="3" Content="w" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="LtrE" Grid.Column="5" Content="e" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="LtrR" Grid.Column="7" Content="r" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="LtrT" Grid.Column="9" Content="t" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="LtrY" Grid.Column="11" Content="y" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="LtrU" Grid.Column="13" Content="u" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="LtrI" Grid.Column="15" Content="i" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="LtrO" Grid.Column="17" Content="o" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="LtrP" Grid.Column="19" Content="p" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                </Grid>

                <Grid Grid.Row="4" x:Name="LtrLine2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.5*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="0.5*"/>
                    </Grid.ColumnDefinitions>
                    <Button x:Name="LtrA" Grid.Column="1" Content="a" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="LtrS" Grid.Column="3" Content="s" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="LtrD" Grid.Column="5" Content="d" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="LtrF" Grid.Column="7" Content="f" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="LtrG" Grid.Column="9" Content="g" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="LtrH" Grid.Column="11" Content="h" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="LtrJ" Grid.Column="13" Content="j" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="LtrK" Grid.Column="15" Content="k" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="LtrL" Grid.Column="17" Content="l" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="Comma_At" Grid.Column="19" Content="," Style="{StaticResource KeyboardCommonButtonStyle}"/>
                </Grid>

                <Grid Grid.Row="6" x:Name="LtrLine3">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.5*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="0.5*"/>
                    </Grid.ColumnDefinitions>
                    <Button x:Name="Shift" Grid.Column="1" Style="{StaticResource KeyboardShiftButtonStyle}">
                        <Image Source="BackgroundAnimation/BackSpace.png" Stretch="None"/>
                    </Button>
                    <Button x:Name="Alt" Grid.Column="1" Visibility="Collapsed" Style="{StaticResource KeyboardAltButtonStyle}"/>
                    <Button x:Name="LtrZ" Grid.Column="3" Content="z" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="LtrX" Grid.Column="5" Content="x" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="LtrC" Grid.Column="7" Content="c" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="LtrV" Grid.Column="9" Content="v" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="LtrB" Grid.Column="11" Content="b" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="LtrN" Grid.Column="13" Content="n" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="LtrM" Grid.Column="15" Content="m" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="FullStop" Grid.Column="17" Content="." Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="Backspace" Grid.Column="19" Style="{StaticResource KeyboardFunctionButtonStyle}">
                        <Image Source="BackgroundAnimation/BackSpace.png" Stretch="None"/>
                    </Button>
                </Grid>

                <Grid Grid.Row="8" x:Name="LtrLine4">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.5*"/>
                        <ColumnDefinition Width="24*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="24*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="56*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="24*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="27*"/>
                        <ColumnDefinition Width="0.5*"/>
                    </Grid.ColumnDefinitions>
                    <Button x:Name="LanguageSwitch" Tag="default_EN_FingerKB" Grid.Column="1" Style="{StaticResource KeyboardFunctionButtonStyle}">
                        <Image x:Name="LanguageSwitch_Image" Source="BackgroundAnimation/EnglishKeyboard.png" Stretch="None"/>
                    </Button>
                    <Button x:Name="SymbolSwitch" Grid.Column="3" Style="{StaticResource KeyboardFunctionButtonStyle}">
                        <TextBlock x:Name="SymSwitchText" Text="123#?" Foreground="#FFC8E2F1" FontSize="20" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Button>
                    <Button x:Name="Space" Grid.Column="5" Grid.ColumnSpan="3" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="URLSpace" Grid.Column="5" Visibility="Collapsed" Style="{StaticResource KeyboardCommonButtonStyle}"/>
                    <Button x:Name="URLPostfix" Grid.Column="7" Content=".com" Visibility="Collapsed" Style="{StaticResource KeyboardFunctionButtonStyle}" Foreground="#FFC8E2F1" FontSize="20"/>
                    <Button x:Name="Enter" Grid.Column="9" Style="{StaticResource KeyboardFunctionButtonStyle}">
                        <Image Source="BackgroundAnimation/Enter.png" Stretch="None"/>
                    </Button>
                    <Button x:Name="URLGo" Grid.Column="9" Content="Go" Visibility="Collapsed" Style="{StaticResource KeyboardFunctionButtonStyle}" Foreground="#FFC8E2F1" FontSize="20"/>
                </Grid>

            </Grid>

        </Grid>
    </Grid>
</UserControl>