<controls:KeyboardView x:Class="JuliusSweetland.OptiKey.UI.Views.Keyboards.English.Alpha"
                       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                       xmlns:controls="clr-namespace:JuliusSweetland.OptiKey.UI.Controls"
                       xmlns:models="clr-namespace:JuliusSweetland.OptiKey.Models"
                       xmlns:enums="clr-namespace:JuliusSweetland.OptiKey.Enums"
                       mc:Ignorable="d" 
                       d:DesignHeight="300" d:DesignWidth="300">

    <UserControl.Resources>
        <ResourceDictionary Source="/OptiKey;component/Resources/Icons/KeySymbols.xaml" />
    </UserControl.Resources>
    
    <Grid Background="{DynamicResource KeyDefaultBackgroundBrush}"
          Grid.IsSharedSizeScope="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <controls:Output Grid.Row="0" Grid.Column="0"
                        Grid.RowSpan="2" Grid.ColumnSpan="22" 
                        NumberOfSuggestionsDisplayed="{Binding Path=DataContext.SuggestionService.SuggestionsPerPage, RelativeSource={RelativeSource AncestorType=controls:KeyboardHost}, Mode=TwoWay}" /> <!--N.B. This MUST be TwoWay to detect changes to the DataContext used in the binding path-->
        
        <controls:Key Grid.Row="2" Grid.Column="0" />
        <controls:Key Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2"
                      ShiftUpText="q" ShiftDownText="Q"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="q" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="3" Grid.ColumnSpan="2"
                      ShiftUpText="w" ShiftDownText="W"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="w" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="5" Grid.ColumnSpan="2"
                      ShiftUpText="e" ShiftDownText="E" 
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="e" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="7" Grid.ColumnSpan="2"
                      ShiftUpText="r" ShiftDownText="R"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="r" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="9" Grid.ColumnSpan="2"
                      ShiftUpText="t" ShiftDownText="T"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="t" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="11" Grid.ColumnSpan="2"
                      ShiftUpText="y" ShiftDownText="Y"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="y" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="13" Grid.ColumnSpan="2"
                      ShiftUpText="u" ShiftDownText="U"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="u" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="15" Grid.ColumnSpan="2"
                      ShiftUpText="i" ShiftDownText="I"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="i" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="17" Grid.ColumnSpan="2"
                      ShiftUpText="o" ShiftDownText="O"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="o" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="19" Grid.ColumnSpan="2"
                      ShiftUpText="p" ShiftDownText="P"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="p" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="21" />

        <controls:Key Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"
                      SymbolGeometry="{StaticResource TabIcon}" 
                      Text="TAB"
                      SharedSizeGroup="KeyWithSymbol">
            <controls:Key.Value>
                <models:KeyValue String="&#x09;" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="2" Grid.ColumnSpan="2"
                      ShiftUpText="a" ShiftDownText="A"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="a" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="4" Grid.ColumnSpan="2"
                      ShiftUpText="s" ShiftDownText="S"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="s" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="6" Grid.ColumnSpan="2"
                      ShiftUpText="d" ShiftDownText="D"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="d" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="8" Grid.ColumnSpan="2"
                      ShiftUpText="f" ShiftDownText="F"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="f" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="10" Grid.ColumnSpan="2"
                      ShiftUpText="g" ShiftDownText="G"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="g" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="12" Grid.ColumnSpan="2"
                      ShiftUpText="h" ShiftDownText="H"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="h" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="14" Grid.ColumnSpan="2"
                      ShiftUpText="j" ShiftDownText="J"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="j" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="16" Grid.ColumnSpan="2"
                      ShiftUpText="k" ShiftDownText="K"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="k" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="18" Grid.ColumnSpan="2"
                      ShiftUpText="l" ShiftDownText="L"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="l" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="20" Grid.ColumnSpan="2"
                      SymbolGeometry="{StaticResource MenuIcon}"
                      Text="MENU"
                      SharedSizeGroup="KeyWithSymbol">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.MenuKeyboard}" />
            </controls:Key.Value>
        </controls:Key>

        <controls:Key Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2"
                      SymbolGeometry="{StaticResource ShiftIcon}"
                      Text="SHIFT"
                      SharedSizeGroup="KeyWithSymbol">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.LeftShift}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="4" Grid.Column="2" Grid.ColumnSpan="2"
                      ShiftUpText="z" ShiftDownText="Z"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="z" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="4" Grid.Column="4" Grid.ColumnSpan="2"
                      ShiftUpText="x" ShiftDownText="X"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="x" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="4" Grid.Column="6" Grid.ColumnSpan="2"
                      ShiftUpText="c" ShiftDownText="C"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="c" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="4" Grid.Column="8" Grid.ColumnSpan="2"
                      ShiftUpText="v" ShiftDownText="V"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="v" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="4" Grid.Column="10" Grid.ColumnSpan="2"
                      ShiftUpText="b" ShiftDownText="B"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="b" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="4" Grid.Column="12" Grid.ColumnSpan="2"
                      ShiftUpText="n" ShiftDownText="N"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="n" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="4" Grid.Column="14" Grid.ColumnSpan="2"
                      ShiftUpText="m" ShiftDownText="M"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="m" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="4" Grid.Column="16" Grid.ColumnSpan="2"
                      SymbolGeometry="{StaticResource BackOneIcon}"
                      Text="BACK&#x0a;ONE"
                      SharedSizeGroup="KeyWithSymbol">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.BackOne}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="4" Grid.Column="18" Grid.ColumnSpan="2"
                      SymbolGeometry="{StaticResource BackManyIcon}"
                      Text="BACK&#x0a;WORD"
                      SharedSizeGroup="KeyWithSymbol">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.BackMany}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="4" Grid.Column="20" Grid.ColumnSpan="2"
                      SymbolGeometry="{StaticResource NumericAndSymbolsIcon}"
                      Text="NUM&#x0a;SYM"
                      SharedSizeGroup="KeyWithSymbol">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.NumericAndSymbols1Keyboard}" />
            </controls:Key.Value>
        </controls:Key>

        <controls:Key Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2"
                      Text="CTRL"
                      SharedSizeGroup="KeyWithDescription">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.LeftCtrl}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="5" Grid.Column="2" Grid.ColumnSpan="2"
                      SymbolGeometry="{StaticResource WinIcon}"
                      Text="WIN"
                      SharedSizeGroup="KeyWithSymbol">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.LeftWin}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="5" Grid.Column="4" Grid.ColumnSpan="2"
                      Text="ALT"
                      SharedSizeGroup="KeyWithDescription">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.LeftAlt}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="5" Grid.Column="6" Grid.ColumnSpan="2"
                      Text=","
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="," />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="5" Grid.Column="8" Grid.ColumnSpan="4"
                      SymbolGeometry="{StaticResource SpaceIcon}"
                      Text="SPACE"
                      WidthSpan="2" 
                      SharedSizeGroup="KeyWithSymbol">
            <controls:Key.Value>
                <models:KeyValue String=" " />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="5" Grid.Column="12" Grid.ColumnSpan="2"
                      Text="."
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="." />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="5" Grid.Column="14" Grid.ColumnSpan="2"
                      SymbolGeometry="{StaticResource MultiKeySelectionIcon}"
                      Text="MULTI-KEY&#x0a;SELECTION"
                      SharedSizeGroup="KeyWithSymbol">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="MultiKeySelectionIsOn" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="5" Grid.Column="16" Grid.ColumnSpan="4"
                      SymbolGeometry="{StaticResource EnterIcon}"
                      Text="ENTER"
                      SharedSizeGroup="KeyWithSymbol"
                      WidthSpan="2">
            <controls:Key.Value>
                <models:KeyValue String="&#x0a;" /> <!--Hex for "\n"-->
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="5" Grid.Column="20" Grid.ColumnSpan="2"
                      SymbolGeometry="{StaticResource SleepIcon}"
                      Text="SLEEP"
                      SharedSizeGroup="KeyWithSymbol">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.Sleep}" />
            </controls:Key.Value>
        </controls:Key>
    </Grid>
</controls:KeyboardView>
