同梱スキン - タイプライター風.xaml

テンプレートサンプル用 実用性はあまりありません
画像を1枚使っていますがスペースキーの質感用です 大した意味はありません
丸いキーはxamlだけで出来ています 見た目に関しては想像できるものは大体実現可能です
どのスキンもキーの定義部分が同じようになって冗長なんですが スタイルを使って出来る限り短くしています

<!--  This file is zeKey skinfile  https://ze-key.blogspot.jp/  -->
<z:Keyboard xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:z="clr-namespace:zeKey.Skin;assembly=zeKey"
            Width="660"
            Height="270"
            z:DragMoveBehavior.CanMove="True">
  <z:Keyboard.SkinInfo>
    <z:SkinInfo Title="タイプライター風"
                Author="T.Naga"
                License="改変自由"
                Version="1.0.0">
      <z:SkinInfo.Information>
        <TextBlock TextWrapping="Wrap">
          雰囲気重視で実用性は二の次仕様<Run Text="&#10;" />
          <LineBreak />
          使い方:<Run Text="&#10;" />
          一部キーは通常時隠れています [Fn]キー押し込みで出現<Run Text="&#10;" />
          クリックで通常のキー打鍵 右クリックで[Shift]＋キー打鍵<Run Text="&#10;" />
          [Shift][Ctrl][Alt][Win]キーは押し込みでロックされ その他のキーが押されると同時押ししロック解除
          (正確には押し込んだ時にDown送信 その他のキーのDownUpの後にUp送信)<Run Text="&#10;" />
          右クリックすると押し込み状態がもう一度押すまで継続<Run Text="&#10;" />
          <LineBreak />
          注意:<Run Text="&#10;" />
          ・全キーリピート無し設定になっています<Run Text="&#10;" />
          ・修飾キーが押されたままzeKeyが異常終了すると そのキーが押しっぱなしとみなされます
          その場合は（リアル）キーボードで該当キーを一度押してください<Run Text="&#10;" />
          <LineBreak />
          詳しい説明は
          <z:Hyperlink NavigateUri="https://ze-key.blogspot.jp/">ブログ</z:Hyperlink>
          を参照してください
        </TextBlock>
      </z:SkinInfo.Information>
    </z:SkinInfo>
  </z:Keyboard.SkinInfo>

  <z:Keyboard.Resources>
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    <z:BooleanToCollapsedConverter x:Key="BooleanToCollapsedConverter" />

    <SolidColorBrush x:Key="キーボード 背景" Color="DimGray" />
    <SolidColorBrush x:Key="キーボード 枠" Color="DimGray" />
    <SolidColorBrush x:Key="キー 押し込み" Color="OrangeRed" />
    <SolidColorBrush x:Key="キー 背景" Color="Black" />
    <SolidColorBrush x:Key="キー 影" Color="#7A000000" />
    <SolidColorBrush x:Key="文字" Color="Snow" />

    <ControlTemplate x:Key="TypeWriterKey">
      <Grid x:Name="Outer" RenderTransformOrigin="0.5,0.5">
        <Grid.RenderTransform>
          <ScaleTransform x:Name="ScaleTransform" />
        </Grid.RenderTransform>
        <Grid.RowDefinitions>
          <RowDefinition />
          <RowDefinition Height="2" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition />
          <ColumnDefinition Width="2" />
        </Grid.ColumnDefinitions>
        <Ellipse Grid.RowSpan="2"
                 Grid.ColumnSpan="2"
                 Margin="3,3,-5,-5"
                 StrokeThickness="4">
          <Ellipse.Fill>
            <RadialGradientBrush>
              <GradientStop Color="Black" />
              <GradientStop Offset="0.9" Color="{Binding BorderBrush.Color, RelativeSource={RelativeSource TemplatedParent}}" />
              <GradientStop Offset="1" Color="#0000" />
            </RadialGradientBrush>
          </Ellipse.Fill>
        </Ellipse>
        <Grid x:Name="Inner">
          <Ellipse Grid.RowSpan="2"
                   Grid.ColumnSpan="2"
                   Fill="{Binding Background,
                                  RelativeSource={RelativeSource TemplatedParent}}"
                   StrokeThickness="4">
            <Ellipse.Stroke>
              <RadialGradientBrush>
                <GradientStop Color="#FF7F7F7F" />
                <GradientStop Offset="0.9" Color="#FF878787" />
                <GradientStop Offset="1" Color="#FFE4E4E4" />
              </RadialGradientBrush>
            </Ellipse.Stroke>
          </Ellipse>
          <Ellipse StrokeThickness="2">
            <Ellipse.Stroke>
              <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                <LinearGradientBrush.RelativeTransform>
                  <RotateTransform Angle="-45"
                                   CenterX="0.5"
                                   CenterY="0.5" />
                </LinearGradientBrush.RelativeTransform>
                <GradientStop Offset="0.2" Color="White" />
                <GradientStop Offset="0.25" />
                <GradientStop Offset="0.75" />
                <GradientStop Offset="0.8" Color="White" />
              </LinearGradientBrush>
            </Ellipse.Stroke>
          </Ellipse>
          <Viewbox Grid.RowSpan="2"
                   Grid.ColumnSpan="2"
                   Margin="{Binding Padding,
                                    RelativeSource={RelativeSource TemplatedParent}}">
            <TextBlock Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" />
          </Viewbox>
        </Grid>
      </Grid>
      <ControlTemplate.Triggers>
        <EventTrigger RoutedEvent="MouseEnter">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation Duration="0:0:0.1"
                               Storyboard.TargetName="Outer"
                               Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)"
                               To="1.2" />
              <DoubleAnimation Duration="0:0:0.1"
                               Storyboard.TargetName="Outer"
                               Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)"
                               To="1.2" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseLeave">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation Duration="0:0:0.1"
                               Storyboard.TargetName="Outer"
                               Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)"
                               To="1" />
              <DoubleAnimation Duration="0:0:0.1"
                               Storyboard.TargetName="Outer"
                               Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)"
                               To="1" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
        <Trigger Property="IsMouseOver" Value="True">
          <Setter Property="Panel.ZIndex" Value="1" />
        </Trigger>
        <Trigger Property="Button.IsPressed" Value="True">
          <Setter TargetName="Inner"
                  Property="Margin"
                  Value="2,2,-2,-2" />
        </Trigger>
        <Trigger Property="ToggleButton.IsChecked" Value="True">
          <Setter TargetName="Inner"
                  Property="Margin"
                  Value="2,2,-2,-2" />
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>

    <ControlTemplate x:Key="TypeWriterSpace">
      <Grid x:Name="Outer" RenderTransformOrigin="0.5,0.5">
        <Grid.RenderTransform>
          <ScaleTransform x:Name="ScaleTransform" />
        </Grid.RenderTransform>
        <Grid x:Name="Inner">
          <Rectangle x:Name="Shadow"
                     Fill="{TemplateBinding Background}"
                     RadiusX="10"
                     RadiusY="10">
            <Rectangle.Effect>
              <DropShadowEffect Opacity="1"
                                ShadowDepth="6"
                                Color="{Binding BorderBrush.Color,
                                                RelativeSource={RelativeSource TemplatedParent}}" />
            </Rectangle.Effect>
          </Rectangle>
          <Rectangle Fill="Gray"
                     RadiusX="10"
                     RadiusY="10">
            <Rectangle.OpacityMask>
              <ImageBrush ImageSource="pack://siteoforigin:,,,/Skin/noise.png" />
            </Rectangle.OpacityMask>
          </Rectangle>
          <Viewbox Margin="{TemplateBinding Padding}">
            <TextBlock Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" />
          </Viewbox>
        </Grid>
      </Grid>
      <ControlTemplate.Triggers>
        <EventTrigger RoutedEvent="MouseEnter">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation Duration="0:0:0.1"
                               Storyboard.TargetName="Outer"
                               Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)"
                               To="1.2" />
              <DoubleAnimation Duration="0:0:0.1"
                               Storyboard.TargetName="Outer"
                               Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)"
                               To="1.2" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseLeave">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation Duration="0:0:0.1"
                               Storyboard.TargetName="Outer"
                               Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)"
                               To="1" />
              <DoubleAnimation Duration="0:0:0.1"
                               Storyboard.TargetName="Outer"
                               Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)"
                               To="1" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
        <Trigger Property="IsMouseOver" Value="True">
          <Setter Property="Panel.ZIndex" Value="1" />
        </Trigger>
        <Trigger Property="Button.IsPressed" Value="True">
          <Setter TargetName="Inner"
                  Property="Margin"
                  Value="2,2,-2,-2" />
          <Setter TargetName="Shadow" Property="Effect">
            <Setter.Value>
              <DropShadowEffect Opacity="1"
                                ShadowDepth="3"
                                Color="{Binding BorderBrush.Color,
                                                RelativeSource={RelativeSource TemplatedParent}}" />
            </Setter.Value>
          </Setter>
          <Setter TargetName="Outer"
                  Property="Margin"
                  Value="2,2,-2,-2" />
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>

    <Style TargetType="{x:Type ButtonBase}">
      <Setter Property="Width" Value="35" />
      <Setter Property="Height" Value="35" />
      <Setter Property="Padding" Value="5" />
      <Setter Property="Foreground" Value="{DynamicResource 文字}" />
      <Setter Property="Background" Value="{DynamicResource キー 背景}" />
      <Setter Property="BorderBrush" Value="{DynamicResource キー 影}" />
      <Setter Property="Template" Value="{StaticResource TypeWriterKey}" />
      <Style.Triggers>
        <Trigger Property="IsPressed" Value="True">
          <Setter Property="Background" Value="{DynamicResource キー 押し込み}" />
        </Trigger>
        <Trigger Property="ToggleButton.IsChecked" Value="True">
          <Setter Property="Background" Value="{DynamicResource キー 押し込み}" />
        </Trigger>
      </Style.Triggers>
    </Style>

    <Style BasedOn="{StaticResource {x:Type ButtonBase}}" TargetType="{x:Type z:LRButton}" />
    <Style x:Key="HideButton"
           BasedOn="{StaticResource {x:Type z:LRButton}}"
           TargetType="{x:Type z:LRButton}">
      <Setter Property="Padding" Value="8" />
      <Setter Property="Visibility" Value="{Binding IsChecked, Converter={StaticResource BooleanToVisibilityConverter}, ElementName=Fn}" />
    </Style>
    <Style x:Key="Function"
           BasedOn="{StaticResource HideButton}"
           TargetType="{x:Type z:LRButton}">
      <Setter Property="Width" Value="30" />
      <Setter Property="Height" Value="30" />
      <Setter Property="Padding" Value="8" />
    </Style>
    <Style x:Key="Space"
           BasedOn="{StaticResource {x:Type z:LRButton}}"
           TargetType="{x:Type z:LRButton}">
      <Setter Property="Template" Value="{StaticResource TypeWriterSpace}" />
    </Style>

    <Style BasedOn="{StaticResource {x:Type ButtonBase}}" TargetType="{x:Type ToggleButton}" />
    <Style BasedOn="{StaticResource {x:Type ToggleButton}}" TargetType="{x:Type z:LRToggleButton}" />
    <Style x:Key="HideToggleButton"
           BasedOn="{StaticResource {x:Type z:LRToggleButton}}"
           TargetType="{x:Type z:LRToggleButton}">
      <Setter Property="Padding" Value="8" />
      <Setter Property="Visibility" Value="{Binding IsChecked, Converter={StaticResource BooleanToVisibilityConverter}, ElementName=Fn}" />
    </Style>
  </z:Keyboard.Resources>

  <Grid>
    <Rectangle Fill="{DynamicResource キーボード 背景}"
               RadiusX="20"
               RadiusY="20"
               Stroke="{DynamicResource キーボード 枠}"
               StrokeThickness="3" />

    <Viewbox Stretch="Fill">
      <Canvas Width="660" Height="270">
        <TextBlock Width="660"
                   Height="60"
                   FontFamily="Mongolian Baiti"
                   FontSize="48"
                   FontStyle="Italic"
                   Foreground="#4CFFFFFF"
                   Text="Typewriter"
                   TextAlignment="Center"
                   Visibility="{Binding IsChecked,
                                        Converter={StaticResource BooleanToCollapsedConverter},
                                        ElementName=Fn}" />

        <z:LRButton Canvas.Left="37"
                    Canvas.Top="20"
                    Content="Esc"
                    Style="{StaticResource HideButton}"
                    TypeKey="Esc" />
        <z:LRButton Canvas.Left="103"
                    Canvas.Top="20"
                    Content="F1"
                    Style="{StaticResource Function}"
                    TypeKey="F1" />
        <z:LRButton Canvas.Left="143"
                    Canvas.Top="20"
                    Content="F2"
                    Style="{StaticResource Function}"
                    TypeKey="F2" />
        <z:LRButton Canvas.Left="183"
                    Canvas.Top="20"
                    Content="F3"
                    Style="{StaticResource Function}"
                    TypeKey="F3" />
        <z:LRButton Canvas.Left="223"
                    Canvas.Top="20"
                    Content="F4"
                    Style="{StaticResource Function}"
                    TypeKey="F4" />
        <z:LRButton Canvas.Left="283"
                    Canvas.Top="20"
                    Content="F5"
                    Style="{StaticResource Function}"
                    TypeKey="F5" />
        <z:LRButton Canvas.Left="323"
                    Canvas.Top="20"
                    Content="F6"
                    Style="{StaticResource Function}"
                    TypeKey="F6" />
        <z:LRButton Canvas.Left="363"
                    Canvas.Top="20"
                    Content="F7"
                    Style="{StaticResource Function}"
                    TypeKey="F7" />
        <z:LRButton Canvas.Left="403"
                    Canvas.Top="20"
                    Content="F8"
                    Style="{StaticResource Function}"
                    TypeKey="F8" />
        <z:LRButton Canvas.Left="463"
                    Canvas.Top="20"
                    Content="F9"
                    Style="{StaticResource Function}"
                    TypeKey="F9" />
        <z:LRButton Canvas.Left="503"
                    Canvas.Top="20"
                    Content="F10"
                    Style="{StaticResource Function}"
                    TypeKey="F10" />
        <z:LRButton Canvas.Left="543"
                    Canvas.Top="20"
                    Content="F11"
                    Style="{StaticResource Function}"
                    TypeKey="F11" />
        <z:LRButton Canvas.Left="583"
                    Canvas.Top="20"
                    Content="F12"
                    Style="{StaticResource Function}"
                    TypeKey="F12" />
        <z:LRButton Canvas.Left="20"
                    Canvas.Top="60"
                    Content="IME"
                    TypeKey="KanjiMode">
          <z:LRButton.Style>
            <Style BasedOn="{StaticResource HideButton}" TargetType="{x:Type z:LRButton}">
              <Style.Triggers>
                <DataTrigger Binding="{Binding ModeKeys.ImeLock}" Value="true">
                  <Setter Property="Background" Value="{DynamicResource キー 押し込み}" />
                </DataTrigger>
              </Style.Triggers>
            </Style>
          </z:LRButton.Style>
        </z:LRButton>
        <z:LRButton Canvas.Left="60"
                    Canvas.Top="60"
                    Content="1 !"
                    Padding="8"
                    TypeKey="D1" />
        <z:LRButton Canvas.Left="100"
                    Canvas.Top="60"
                    Content="2 &quot;"
                    Padding="8"
                    TypeKey="D2" />
        <z:LRButton Canvas.Left="140"
                    Canvas.Top="60"
                    Content="3 #"
                    Padding="8"
                    TypeKey="D3" />
        <z:LRButton Canvas.Left="180"
                    Canvas.Top="60"
                    Content="4 $"
                    Padding="8"
                    TypeKey="D4" />
        <z:LRButton Canvas.Left="220"
                    Canvas.Top="60"
                    Content="5 %"
                    Padding="8"
                    TypeKey="D5" />
        <z:LRButton Canvas.Left="260"
                    Canvas.Top="60"
                    Content="6 &amp;"
                    Padding="8"
                    TypeKey="D6" />
        <z:LRButton Canvas.Left="300"
                    Canvas.Top="60"
                    Content="7 '"
                    Padding="8"
                    TypeKey="D7" />
        <z:LRButton Canvas.Left="340"
                    Canvas.Top="60"
                    Content="8 ("
                    Padding="8"
                    TypeKey="D8" />
        <z:LRButton Canvas.Left="380"
                    Canvas.Top="60"
                    Content="9 )"
                    Padding="8"
                    TypeKey="D9" />
        <z:LRButton Canvas.Left="420"
                    Canvas.Top="60"
                    Content="0  "
                    Padding="8"
                    TypeKey="D0" />
        <z:LRButton Canvas.Left="460"
                    Canvas.Top="60"
                    Content="- ="
                    Padding="8"
                    TypeKey="OemMinus" />
        <z:LRButton Canvas.Left="500"
                    Canvas.Top="60"
                    Content="^ ~"
                    Padding="8"
                    TypeKey="OemQuotes" />
        <z:LRButton Canvas.Left="540"
                    Canvas.Top="60"
                    Content="\ |"
                    Padding="8"
                    TypeKey="Oem5" />
        <z:LRButton Canvas.Left="580"
                    Canvas.Top="60"
                    Content="␈"
                    TypeKey="Backspace" />

        <z:LRButton Canvas.Left="40"
                    Canvas.Top="100"
                    Content="⇥"
                    TypeKey="Tab" />
        <z:LRButton Canvas.Left="80"
                    Canvas.Top="100"
                    Content="Q"
                    TypeKey="Q" />
        <z:LRButton Canvas.Left="120"
                    Canvas.Top="100"
                    Content="W"
                    TypeKey="W" />
        <z:LRButton Canvas.Left="160"
                    Canvas.Top="100"
                    Content="E"
                    TypeKey="E" />
        <z:LRButton Canvas.Left="200"
                    Canvas.Top="100"
                    Content="R"
                    TypeKey="R" />
        <z:LRButton Canvas.Left="240"
                    Canvas.Top="100"
                    Content="T"
                    TypeKey="T" />
        <z:LRButton Canvas.Left="280"
                    Canvas.Top="100"
                    Content="Y"
                    TypeKey="Y" />
        <z:LRButton Canvas.Left="320"
                    Canvas.Top="100"
                    Content="U"
                    TypeKey="U" />
        <z:LRButton Canvas.Left="360"
                    Canvas.Top="100"
                    Content="I"
                    TypeKey="I" />
        <z:LRButton Canvas.Left="400"
                    Canvas.Top="100"
                    Content="O"
                    TypeKey="O" />
        <z:LRButton Canvas.Left="440"
                    Canvas.Top="100"
                    Content="P"
                    TypeKey="P" />
        <z:LRButton Canvas.Left="480"
                    Canvas.Top="100"
                    Content="@ `"
                    Padding="8"
                    TypeKey="Oem3" />
        <z:LRButton Canvas.Left="520"
                    Canvas.Top="100"
                    Content="[ {"
                    Padding="8"
                    TypeKey="OemOpenBrackets" />
        <z:LRButton Canvas.Left="560"
                    Canvas.Top="100"
                    Width="75"
                    Height="75"
                    Content="⏎"
                    TypeKey="Enter" />
        <z:LRButton Canvas.Left="44"
                    Canvas.Top="140"
                    Content="⇪"
                    TypeKey="CapsLock">
          <z:LRButton.Style>
            <Style BasedOn="{StaticResource {x:Type z:LRButton}}" TargetType="z:LRButton">
              <Style.Triggers>
                <DataTrigger Binding="{Binding ModeKeys.CapsLock}" Value="true">
                  <Setter Property="Background" Value="{DynamicResource キー 押し込み}" />
                </DataTrigger>
              </Style.Triggers>
            </Style>
          </z:LRButton.Style>
        </z:LRButton>
        <z:LRButton Canvas.Left="84"
                    Canvas.Top="140"
                    Content="A"
                    TypeKey="A" />
        <z:LRButton Canvas.Left="124"
                    Canvas.Top="140"
                    Content="S"
                    TypeKey="S" />
        <z:LRButton Canvas.Left="164"
                    Canvas.Top="140"
                    Content="D"
                    TypeKey="D" />
        <z:LRButton Canvas.Left="204"
                    Canvas.Top="140"
                    Content="F"
                    TypeKey="F" />
        <z:LRButton Canvas.Left="244"
                    Canvas.Top="140"
                    Content="G"
                    TypeKey="G" />
        <z:LRButton Canvas.Left="284"
                    Canvas.Top="140"
                    Content="H"
                    TypeKey="H" />
        <z:LRButton Canvas.Left="324"
                    Canvas.Top="140"
                    Content="J"
                    TypeKey="J" />
        <z:LRButton Canvas.Left="364"
                    Canvas.Top="140"
                    Content="K"
                    TypeKey="K" />
        <z:LRButton Canvas.Left="404"
                    Canvas.Top="140"
                    Content="L"
                    TypeKey="L" />
        <z:LRButton Canvas.Left="444"
                    Canvas.Top="140"
                    Content="; +"
                    Padding="8"
                    TypeKey="OemPlus" />
        <z:LRButton Canvas.Left="484"
                    Canvas.Top="140"
                    Content=": *"
                    Padding="8"
                    TypeKey="Oem1" />
        <z:LRButton Canvas.Left="524"
                    Canvas.Top="140"
                    Content="] }"
                    Padding="8"
                    TypeKey="OemCloseBrackets" />
        <z:LRToggleButton Canvas.Left="48"
                          Canvas.Top="180"
                          Width="50"
                          Height="50"
                          Content="⇧"
                          TypeKey="Shift" />
        <z:LRButton Canvas.Left="105"
                    Canvas.Top="180"
                    Content="Z"
                    TypeKey="Z" />
        <z:LRButton Canvas.Left="145"
                    Canvas.Top="180"
                    Content="X"
                    TypeKey="X" />
        <z:LRButton Canvas.Left="185"
                    Canvas.Top="180"
                    Content="C"
                    TypeKey="C" />
        <z:LRButton Canvas.Left="225"
                    Canvas.Top="180"
                    Content="V"
                    TypeKey="V" />
        <z:LRButton Canvas.Left="265"
                    Canvas.Top="180"
                    Content="B"
                    TypeKey="B" />
        <z:LRButton Canvas.Left="305"
                    Canvas.Top="180"
                    Content="N"
                    TypeKey="N" />
        <z:LRButton Canvas.Left="345"
                    Canvas.Top="180"
                    Content="M"
                    TypeKey="M" />
        <z:LRButton Canvas.Left="385"
                    Canvas.Top="180"
                    Content=", &lt;"
                    Padding="8"
                    TypeKey="OemComma" />
        <z:LRButton Canvas.Left="425"
                    Canvas.Top="180"
                    Content=". &gt;"
                    Padding="8"
                    TypeKey="OemPeriod" />
        <z:LRButton Canvas.Left="465"
                    Canvas.Top="180"
                    Content="/ ?"
                    Padding="8"
                    TypeKey="OemQuestion" />
        <z:LRButton Canvas.Left="505"
                    Canvas.Top="180"
                    Content="\ _"
                    FontFamily="Arial"
                    Padding="8"
                    TypeKey="OemBackslash" />
        <z:LRToggleButton Canvas.Left="105"
                          Canvas.Top="220"
                          Content="Ctrl"
                          Style="{StaticResource HideToggleButton}"
                          TypeKey="Ctrl" />
        <z:LRToggleButton Canvas.Left="145"
                          Canvas.Top="220"
                          Content="Win"
                          Style="{StaticResource HideToggleButton}"
                          TypeKey="Win" />
        <z:LRToggleButton Canvas.Left="185"
                          Canvas.Top="220"
                          Content="Alt"
                          Style="{StaticResource HideToggleButton}"
                          TypeKey="Alt" />
        <z:LRButton Canvas.Left="225"
                    Canvas.Top="220"
                    Content="無変換"
                    Style="{StaticResource HideButton}"
                    TypeKey="ImeNonConvert" />
        <z:LRButton Canvas.Left="265"
                    Canvas.Top="220"
                    Width="115"
                    Height="35"
                    Style="{StaticResource Space}" />
        <z:LRButton Canvas.Left="122"
                    Canvas.Top="220"
                    Width="400"
                    Height="35"
                    Style="{StaticResource Space}"
                    TypeKey="Space"
                    Visibility="{Binding IsChecked,
                                         Converter={StaticResource BooleanToCollapsedConverter},
                                         ElementName=Fn}" />

        <z:LRButton Canvas.Left="385"
                    Canvas.Top="220"
                    Content="変換"
                    Style="{StaticResource HideButton}"
                    TypeKey="ImeConvert" />
        <z:LRButton Canvas.Left="425"
                    Canvas.Top="220"
                    Content="ひらがな"
                    Style="{StaticResource HideButton}"
                    TypeKey="OemAttn" />
        <z:LRButton Canvas.Left="465"
                    Canvas.Top="220"
                    Content="App"
                    Style="{StaticResource HideButton}"
                    TypeKey="Apps" />

        <z:LRButton x:Name="Up"
                    Canvas.Left="555"
                    Canvas.Top="180"
                    Content="↑"
                    Padding="5"
                    Style="{StaticResource HideButton}"
                    TypeKey="Up" />
        <ToggleButton x:Name="Fn"
                      Canvas.Left="595"
                      Canvas.Top="180"
                      Content="Fn"
                      Focusable="False"
                      Padding="8" />
        <z:LRButton Canvas.Left="515"
                    Canvas.Top="220"
                    Content="←"
                    Padding="5"
                    Style="{StaticResource HideButton}"
                    TypeKey="Left" />
        <z:LRButton x:Name="Down"
                    Canvas.Left="555"
                    Canvas.Top="220"
                    Content="↓"
                    Padding="5"
                    Style="{StaticResource HideButton}"
                    TypeKey="Down" />
        <z:LRButton Canvas.Left="595"
                    Canvas.Top="220"
                    Content="→"
                    Padding="5"
                    Style="{StaticResource HideButton}"
                    TypeKey="Right" />
      </Canvas>
    </Viewbox>
    <z:ResizeGrip Background="#01000000" Foreground="Snow">
      <z:ResizeGrip.Style>
        <Style TargetType="{x:Type z:ResizeGrip}">
          <Setter Property="HorizontalAlignment" Value="Right" />
          <Setter Property="VerticalAlignment" Value="Bottom" />
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate>
                <Grid>
                  <Rectangle Fill="{TemplateBinding Background}" />
                  <Path Data="M6,0 L7,0 7,1 6,1 z M6,2 L6,3 7,3 7,2 z M6,4 L6,5 7,5 7,4 z M6,6 L6,7 7,7 7,6 z M0,6 L0,7 1,7 1,6 z M2,6 L2,7 3,7 3,6 z M4,6 L4,7 5,7 5,6 z M4,2 L4,3 5,3, 5,2 z M4,4 L4,5 5,5, 5,4 z M2,4 L2,5 3,5, 3,4 z" Fill="{TemplateBinding Foreground}" />
                </Grid>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </z:ResizeGrip.Style>
    </z:ResizeGrip>
  </Grid>
</z:Keyboard>