Artemis/src/Artemis.UI/Screens/Settings/Device/Tabs/InputMappingsTabView.xaml

<UserControl
    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:local="clr-namespace:Artemis.UI.Screens.Settings.Device.Tabs"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:s="https://github.com/canton7/Stylet"
    xmlns:Shared="clr-namespace:Artemis.UI.Shared;assembly=Artemis.UI.Shared" x:Class="Artemis.UI.Screens.Settings.Device.Tabs.InputMappingsTabView"
    mc:Ignorable="d"
    d:DesignHeight="450" d:DesignWidth="800"
    d:DataContext="{d:DesignInstance {x:Type local:InputMappingsTabViewModel}}">
    <UserControl.Resources>
        <ResourceDictionary>
            <Shared:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
            <Style x:Key="CenteredTextColumn" TargetType="TextBlock">
                <Setter Property="VerticalAlignment" Value="Center" />
            </Style>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid Margin="15">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0">
            <TextBlock Style="{StaticResource MaterialDesignHeadline6TextBlock}">
                <Run Text="Introduction" />
            </TextBlock>
            <TextBlock Style="{StaticResource MaterialDesignTextBlock}" TextWrapping="Wrap">
                In some cases you may want Artemis to map key presses to different LEDs.
                This is useful when your logical layout swaps keys around (like Hungarian layouts where the Z and Y keys are swapped).<LineBreak /><LineBreak />
                In this tab you can set up these custom input mappings, simply click on a LED and press a key, Artemis will from then on consider that LED pressed whenever you press the same key again.
            </TextBlock>
        </StackPanel>

        <StackPanel Grid.Row="1" Margin="0 20" Visibility="{Binding SelectedLed, Converter={StaticResource NullToVisibilityConverter}, ConverterParameter=Inverted}">
            <TextBlock Style="{StaticResource MaterialDesignHeadline6TextBlock}" TextAlignment="Center">Select a LED in the preview on the left side to get started...</TextBlock>
        </StackPanel>

        <StackPanel Grid.Row="1" Margin="0 20" Visibility="{Binding SelectedLed, Converter={StaticResource NullToVisibilityConverter}}">
            <TextBlock Style="{StaticResource MaterialDesignHeadline6TextBlock}" TextAlignment="Center">
                <Run Text="Current target LED: " /><Run Text="{Binding SelectedLed.RgbLed.Id, Mode=OneWay}" />
            </TextBlock>
            <TextBlock Style="{StaticResource MaterialDesignTextBlock}" TextAlignment="Center">
                <Run Text="Press the key you want to remap" /><Run Text=" " /><Run FontWeight="Bold" Text="{Binding SelectedLed.RgbLed.Id, Mode=OneWay}" /><Run Text=" " /><Run Text="to..." />
            </TextBlock>
        </StackPanel>

        <DataGrid Grid.Row="2"
                  ItemsSource="{Binding InputMappings}"
                  CanUserSortColumns="True"
                  IsReadOnly="True"
                  CanUserAddRows="False"
                  AutoGenerateColumns="False"
                  CanUserResizeRows="False"
                  materialDesign:DataGridAssist.CellPadding="16 5 5 5"
                  materialDesign:DataGridAssist.ColumnHeaderPadding="16 5 5 5"
                  VirtualizingPanel.VirtualizationMode="Standard"
                  Margin="10">
            <DataGrid.Columns>
                <materialDesign:DataGridTextColumn Binding="{Binding Item1.RgbLed.Id}" ElementStyle="{StaticResource CenteredTextColumn}" Header="Original LED ID" Width="*" />
                <materialDesign:DataGridTextColumn Binding="{Binding Item2.RgbLed.Id}" ElementStyle="{StaticResource CenteredTextColumn}" Header="Remapped LED ID" Width="*" />

                <DataGridTemplateColumn Width="45" IsReadOnly="True">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button Command="{s:Action DeleteMapping}"
                                    CommandParameter="{Binding}"
                                    Style="{StaticResource MaterialDesignIconForegroundButton}"
                                    ToolTip="Delete mapping"
                                    Width="25"
                                    Height="25">
                                <materialDesign:PackIcon Kind="Delete" Width="18" Height="18" />
                            </Button>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</UserControl>