<controls:KeyboardView x:Class="JuliusSweetland.OptiKey.UI.Views.Keyboards.Common.PhysicalKeys"
                       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"
                      Text="F1"
                      SharedSizeGroup="FunctionKey">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.F1}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="3" Grid.ColumnSpan="2"
                      Text="F2"
                      SharedSizeGroup="FunctionKey">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.F2}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="5" Grid.ColumnSpan="2"
                      Text="F3"
                      SharedSizeGroup="FunctionKey">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.F3}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="7" Grid.ColumnSpan="2"
                      Text="F4"
                      SharedSizeGroup="FunctionKey">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.F4}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="9" Grid.ColumnSpan="2"
                      Text="F5"
                      SharedSizeGroup="FunctionKey">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.F5}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="11" Grid.ColumnSpan="2"
                      Text="F6"
                      SharedSizeGroup="FunctionKey">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.F6}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="13" Grid.ColumnSpan="2"
                      Text="F7"
                      SharedSizeGroup="FunctionKey">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.F7}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="15" Grid.ColumnSpan="2"
                      Text="F8"
                      SharedSizeGroup="FunctionKey">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.F8}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="17" Grid.ColumnSpan="2"
                      Text="F9"
                      SharedSizeGroup="FunctionKey">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.F9}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="19" Grid.ColumnSpan="2"
                      Text="F10"
                      SharedSizeGroup="FunctionKey">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.F10}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="21" />

        <controls:Key Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"
                      Text="ESC"
                      SharedSizeGroup="KeyWithDescription">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.Escape}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="2" Grid.ColumnSpan="2"
                      Text="BREAK"
                      SharedSizeGroup="KeyWithDescription">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.Break}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="4" Grid.ColumnSpan="2"
                      Text="DEL"
                      SharedSizeGroup="KeyWithDescription">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.Delete}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="6" Grid.ColumnSpan="2"
                      Text="INS"
                      SharedSizeGroup="KeyWithDescription">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.Insert}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="8" Grid.ColumnSpan="2"
                      Text="PG&#x0a;UP"
                      SharedSizeGroup="KeyWithDescription">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.PgUp}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="10" Grid.ColumnSpan="2"
                      SymbolGeometry="{StaticResource UpArrowKeyIcon}"
                      Text="UP&#x0a;ARROW"
                      SharedSizeGroup="KeyWithSymbol">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.ArrowUp}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="12" Grid.ColumnSpan="2"
                      Text="PG&#x0a;DN"
                      SharedSizeGroup="KeyWithDescription">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.PgDn}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="14" Grid.ColumnSpan="2"
                      Text="HOME"
                      SharedSizeGroup="KeyWithDescription">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.Home}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="16" Grid.ColumnSpan="2"
                      Text="F11"
                      SharedSizeGroup="FunctionKey">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.F11}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="18" Grid.ColumnSpan="2"
                      Text="F12"
                      SharedSizeGroup="FunctionKey">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.F12}" />
            </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"
                      Text="PRNT&#x0a;SCR"
                      SharedSizeGroup="KeyWithDescription">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.PrintScreen}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="4" Grid.Column="4" Grid.ColumnSpan="2"
                      Text="NUM&#x0a;LK"
                      SharedSizeGroup="KeyWithDescription">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.NumberLock}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="4" Grid.Column="6" Grid.ColumnSpan="2"
                      Text="SCR&#x0a;LK"
                      SharedSizeGroup="KeyWithDescription">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.ScrollLock}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="4" Grid.Column="8" Grid.ColumnSpan="2"
                      SymbolGeometry="{StaticResource LeftArrowKeyIcon}"
                      Text="LEFT&#x0a;ARROW"
                      SharedSizeGroup="KeyWithSymbol">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.ArrowLeft}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="4" Grid.Column="10" Grid.ColumnSpan="2"
                      SymbolGeometry="{StaticResource DownArrowKeyIcon}"
                      Text="DOWN&#x0a;ARROW"
                      SharedSizeGroup="KeyWithSymbol">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.ArrowDown}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="4" Grid.Column="12" Grid.ColumnSpan="2"
                      SymbolGeometry="{StaticResource RightArrowKeyIcon}"
                      Text="RIGHT&#x0a;ARROW"
                      SharedSizeGroup="KeyWithSymbol">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.ArrowRight}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="4" Grid.Column="14" Grid.ColumnSpan="2"
                      Text="END"
                      SharedSizeGroup="KeyWithDescription">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.End}" />
            </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 AlphaIcon}"
                      Text="LETTERS"
                      SharedSizeGroup="KeyWithSymbol">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.AlphaKeyboard}" />
            </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" />
        <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" />
        <controls:Key Grid.Row="5" Grid.Column="14" Grid.ColumnSpan="2"
                          Text="MENU"
                          SharedSizeGroup="KeyWithDescription">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="{x:Static enums:FunctionKeys.Menu}" />
            </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>
