FluentTerminal/FluentTerminal.App/Views/KeyBindingsView.xaml

<UserControl
    x:Class="FluentTerminal.App.Views.KeyBindingsView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:settings="using:FluentTerminal.App.ViewModels.Settings"
    d:DesignHeight="300"
    d:DesignWidth="400"
    mc:Ignorable="d">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="180" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <TextBlock
            Grid.Column="0"
            Margin="0,6,24,0"
            Text="{x:Bind ViewModel.CommandName, Mode=OneWay}" />
        <ItemsControl Grid.Column="1" ItemsSource="{x:Bind ViewModel.KeyBindings, Mode=OneWay}">
            <ItemsControl.ItemTemplate>
                <DataTemplate x:DataType="settings:KeyBindingViewModel">
                    <StackPanel
                        x:Name="Root"
                        Margin="0,0,0,6"
                        Orientation="Horizontal">
                        <Grid
                            Width="48"
                            Height="32"
                            Margin="0,0,6,0"
                            Background="{ThemeResource SystemControlBackgroundBaseLowBrush}"
                            Visibility="{x:Bind Ctrl, Mode=OneWay, Converter={StaticResource TrueToVisibleConverter}}">
                            <TextBlock
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Text="Ctrl" />
                        </Grid>
                        <Grid
                            Width="48"
                            Height="32"
                            Margin="0,0,6,0"
                            Background="{ThemeResource SystemControlBackgroundBaseLowBrush}"
                            Visibility="{x:Bind Meta, Mode=OneWay, Converter={StaticResource TrueToVisibleConverter}}">
                            <FontIcon
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                FontFamily="/Assets/settingsicons.ttf#settingsicons"
                                Glyph="f" />
                        </Grid>
                        <Grid
                            Width="48"
                            Height="32"
                            Margin="0,0,6,0"
                            Background="{ThemeResource SystemControlBackgroundBaseLowBrush}"
                            Visibility="{x:Bind Alt, Mode=OneWay, Converter={StaticResource TrueToVisibleConverter}}">
                            <TextBlock
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Text="Alt" />
                        </Grid>
                        <Grid
                            Width="48"
                            Height="32"
                            Margin="0,0,6,0"
                            Background="{ThemeResource SystemControlBackgroundBaseLowBrush}"
                            Visibility="{x:Bind Shift, Mode=OneWay, Converter={StaticResource TrueToVisibleConverter}}">
                            <TextBlock
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Text="Shift" />
                        </Grid>
                        <Grid
                            Width="64"
                            Height="32"
                            Margin="0,0,6,0"
                            Background="{ThemeResource SystemControlBackgroundBaseLowBrush}">
                            <TextBlock
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Text="{x:Bind Key, Mode=OneWay, Converter={StaticResource IntToExtendedVirtualKeyConverter}}" />
                        </Grid>
                        <HyperlinkButton
                            Margin="12,0,0,0"
                            Command="{x:Bind EditCommand}"
                            Content="Edit" />
                        <HyperlinkButton
                            Margin="12,0,0,0"
                            Command="{x:Bind DeleteCommand}"
                            Content="Delete" />
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</UserControl>