Разместите кнопки моей собственной экранной клавиатуры

Question

Что я хочу?

Я хочу создать свою собственную простую экранную клавиатуру, используя WPF с MVVM.
Я хочу разместить кнопки, как здесь:

| q | w | e | r | t | y | u | i | o | p | 
|  a  | s | d | f | g | h | j | k |  l  |
|  z  |  x  |  c  | v |  b  |  n  |  m  |

Примечание: первый ряд содержит 10 кнопок , второй ряд - 8 кнопок и третий ряд - 7 кнопок .

Просмотреть модель

В модели представления я создал следующие List символов клавиатуры, которые я буду связывать в представлении.

class ViewModel
{ 
    // ...

    public List<char> EnglishKeyboard { get; set; } = "qwertyuiopasdfghjklzxcvbnm".ToList();

    // ...
}

Представление

В представлении я использую ItemsControl для отображения кнопок:

<ItemsControl ItemsSource="{Binding EnglishKeyboard}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <!-- Which panel should I use here? -->
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button FontFamily="Arial"
                    FontSize="24"
                    Content="{Binding}"
            />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Вопрос

Как я могу отобразить мои кнопки, как я показывал ранее? Какую панель мне следует использовать в ItemsPanelTemplate из ItemsControl?

Answer 1

Как сказал @GregaMohorko, я должен использовать List<List<char>>, представляющий список строк символов.

Просмотр модели

class ViewModel
{
    // ...

    public ViewModel()
    {
        EnglishKeyboard = new List<List<char>>()
        {
            // Keyboard lines.
            "qwertyuiop".ToList(),
            "asdfghjkl".ToList(),
            "zxcvbnm".ToList()
        };
    }

    public List<char> EnglishKeyboard { get; set; }

    // ...
}

Просмотр

<ItemsControl ItemsSource="{Binding EnglishKeyboard}">
    <!-- Show keyboard lines in the StackPanel -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemTemplate>
        <DataTemplate>

            <ItemsControl ItemsSource="{Binding}">
                <!-- Keyboard line -->
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid Rows="1"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Button FontFamily="Arial"
                                FontSize="24"
                                Content="{Binding}"
                        />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Спасибо!