<controls:KeyboardView x:Class="JuliusSweetland.OptiKey.UI.Views.Keyboards.Common.NumericAndSymbols2"
                       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" Grid.ColumnSpan="2"
                      Text="·"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="·" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2"
                      Text="•"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="•" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="4" Grid.ColumnSpan="2"
                      Text="°"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="°" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="6" Grid.ColumnSpan="2"
                      Text="~"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="~" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="8" Grid.ColumnSpan="2"
                      Text="^"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="^" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="10" Grid.ColumnSpan="2"
                      Text="±"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="±" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="12" Grid.ColumnSpan="2"
                      Text="«"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="«" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="14" Grid.ColumnSpan="2"
                      Text="»"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="»" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="16" Grid.ColumnSpan="2"
                      Text="{}{"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="{}{" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="18" Grid.ColumnSpan="2"
                      Text="{}}"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="{}}" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="2" Grid.Column="20" Grid.ColumnSpan="2"
                      SymbolGeometry="{StaticResource 2of3Icon}"
                      Text="NEXT"
                      SharedSizeGroup="KeyWithSymbol">
            <controls:Key.Value>
                <models:KeyValue FunctionKey="NumericAndSymbols3Keyboard" />
            </controls:Key.Value>
        </controls:Key>

        <controls:Key Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"
                      Text="µ"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="µ" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="2" Grid.ColumnSpan="2"
                      Text="©"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="©" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="4" Grid.ColumnSpan="2"
                      Text="®"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="®" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="6" Grid.ColumnSpan="2"
                      Text="\"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="\" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="8" Grid.ColumnSpan="2"
                      Text="|"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="|" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="10" Grid.ColumnSpan="2"
                      Text="¦"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="¦" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="12" Grid.ColumnSpan="2"
                      Text="["
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="[" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="14" Grid.ColumnSpan="2"
                      Text="]"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="]" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="16" Grid.ColumnSpan="2"
                      Text="&lt;"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="&lt;" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="3" Grid.Column="18" Grid.ColumnSpan="2"
                      Text="&gt;"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="&gt;" />
            </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="℗"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="℗" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="4" Grid.Column="4" Grid.ColumnSpan="2"
                      Text="™"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="™" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="4" Grid.Column="6" Grid.ColumnSpan="2"
                      Text="℠"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="℠" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="4" Grid.Column="8" Grid.ColumnSpan="2"
                      Text="℡"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="℡" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="4" Grid.Column="10" Grid.ColumnSpan="2"
                      Text="`"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="`" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="4" Grid.Column="12" Grid.ColumnSpan="2"
                      Text="π"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="π" />
            </controls:Key.Value>
        </controls:Key>
        <controls:Key Grid.Row="4" Grid.Column="14" Grid.ColumnSpan="2"
                      Text="¡"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="¡" />
            </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"
                      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"
                      Text="¿"
                      SharedSizeGroup="KeyWithSingleLetter">
            <controls:Key.Value>
                <models:KeyValue String="¿" />
            </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>
