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

<UserControl x:Class="Artemis.UI.Screens.Settings.Device.Tabs.DevicePropertiesTabView"
             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:shared="clr-namespace:Artemis.UI.Shared;assembly=Artemis.UI.Shared"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:s="https://github.com/canton7/Stylet"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800"
             d:DataContext="{d:DesignInstance local:DevicePropertiesTabViewModel}">
    <UserControl.Resources>
        <shared:SKColorToColorConverter x:Key="SKColorToColorConverter" />
    </UserControl.Resources>

    <!-- Body -->
    <Grid Margin="15">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="40"/>
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="0">
                    <TextBlock Style="{StaticResource MaterialDesignSubtitle1TextBlock}">
                        Surface properties
                    </TextBlock>

                    <TextBox materialDesign:HintAssist.Hint="X-coordinate"
                             materialDesign:TextFieldAssist.SuffixText="mm"
                             Text="{Binding X, UpdateSourceTrigger=PropertyChanged}"
                             Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                             Margin="0 5" />
                    <TextBox materialDesign:HintAssist.Hint="Y-coordinate"
                             materialDesign:TextFieldAssist.SuffixText="mm"
                             Text="{Binding Y, UpdateSourceTrigger=PropertyChanged}"
                             Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                             Margin="0 5" />
                    <TextBox materialDesign:HintAssist.Hint="Scale"
                             materialDesign:TextFieldAssist.SuffixText="times"
                             Text="{Binding Scale, UpdateSourceTrigger=PropertyChanged}"
                             Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                             Margin="0 5" />
                    <TextBox materialDesign:HintAssist.Hint="Rotation"
                             materialDesign:TextFieldAssist.SuffixText="deg"
                             Text="{Binding Rotation, UpdateSourceTrigger=PropertyChanged}"
                             Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                             Margin="0 5 0 12" />
                </StackPanel>

                <Rectangle Grid.Column="1" VerticalAlignment="Stretch" Fill="{StaticResource MaterialDesignTextBoxBorder}" Width="1" Margin="0 0 0 5" />

                <StackPanel Grid.Column="2">
                    <TextBlock Style="{StaticResource MaterialDesignSubtitle1TextBlock}">
                        Color calibration
                    </TextBlock>

                    <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}"
                               Foreground="{DynamicResource MaterialDesignBodyLight}"
                               TextWrapping="Wrap"
                               TextAlignment="Justify">
                        Use the sliders below to adjust the colors of your device so that it matches your other devices.
                    </TextBlock>

                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" Content="R" VerticalAlignment="Center" />
                        <Slider Grid.Column="1"
                                Minimum="0"
                                Maximum="200"
                                ValueChanged="{s:Action ApplyScaling}"
                                Value="{Binding RedScale, UpdateSourceTrigger=PropertyChanged}"
                                Margin="10"
                                VerticalAlignment="Center" />
                        <TextBox Grid.Column="2"
                                 VerticalAlignment="Center"
                                 Text="{Binding RedScale, StringFormat={}{0:0.0}, UpdateSourceTrigger=PropertyChanged}"
                                 materialDesign:TextFieldAssist.SuffixText="%"
                                 Width="50" />
                    </Grid>

                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" Content="G" VerticalAlignment="Center" />
                        <Slider Grid.Column="1"
                                Minimum="0"
                                Maximum="200"
                                ValueChanged="{s:Action ApplyScaling}"
                                Value="{Binding GreenScale, UpdateSourceTrigger=PropertyChanged}"
                                Margin="10"
                                VerticalAlignment="Center" />
                        <TextBox Grid.Column="2"
                                 VerticalAlignment="Center"
                                 Text="{Binding GreenScale, StringFormat={}{0:0.0}, UpdateSourceTrigger=PropertyChanged}"
                                 materialDesign:TextFieldAssist.SuffixText="%"
                                 Width="50" />
                    </Grid>

                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" Content="B" VerticalAlignment="Center" />
                        <Slider Grid.Column="1"
                                Minimum="0"
                                Maximum="200"
                                ValueChanged="{s:Action ApplyScaling}"
                                Value="{Binding BlueScale, UpdateSourceTrigger=PropertyChanged}"
                                Margin="10"
                                Ticks="100"
                                VerticalAlignment="Center" />
                        <TextBox Grid.Column="2"
                                 VerticalAlignment="Center"
                                 Text="{Binding BlueScale, StringFormat={}{0:0.0}, UpdateSourceTrigger=PropertyChanged}"
                                 materialDesign:TextFieldAssist.SuffixText="%"
                                 Width="50" />
                    </Grid>

                    <Grid Margin="0 28 0 0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <CheckBox Grid.Column="0"
                                  IsChecked="{Binding DisplayOnDevices}"
                                  Content="Show preview"
                                  VerticalAlignment="Center" />
                        <shared:ColorPicker Grid.Column="1"
                                            Margin="0,0,5,0"
                                            HorizontalAlignment="Right"
                                            Color="{Binding CurrentColor, Converter={StaticResource SKColorToColorConverter}}"
                                            VerticalAlignment="Center" />
                    </Grid>
                </StackPanel>
            </Grid>

            <!-- Layout -->
            <TextBlock Style="{StaticResource MaterialDesignSubtitle1TextBlock}" Margin="0 25 0 0">
                Custom layout
            </TextBlock>
            <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}"
                       Foreground="{DynamicResource MaterialDesignBodyLight}"
                       TextWrapping="Wrap"
                       TextAlignment="Justify">
                Select a custom layout below if you want to change the appearance and/or LEDs of this device.
            </TextBlock>

            <TextBox Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                     Text="{Binding Device.CustomLayoutPath}"
                     VerticalAlignment="Center"
                     materialDesign:TextFieldAssist.HasClearButton="True"
                     IsReadOnly="True"
                     PreviewMouseLeftButtonUp="{s:Action BrowseCustomLayout}">
                <materialDesign:HintAssist.Hint>
                    <StackPanel Orientation="Horizontal" Margin="-2 0 0 0">
                        <materialDesign:PackIcon Kind="Xml" Width="20" />
                        <TextBlock>Layout path</TextBlock>
                    </StackPanel>
                </materialDesign:HintAssist.Hint>
            </TextBox>

            <Button Style="{StaticResource MaterialDesignRaisedButton}" Margin="0 8 8 0" Command="{s:Action SelectPhysicalLayout}">
                SELECT PHYSICAL LAYOUT (PLACEHOLDER)
            </Button>
        </StackPanel>

        <!-- Buttons -->
        <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Style="{StaticResource MaterialDesignOutlinedButton}" IsCancel="True" Margin="0 8 8 0" Command="{s:Action Reset}">
                RESET
            </Button>
            <Button Style="{StaticResource MaterialDesignRaisedButton}" IsDefault="True" Margin="0 8 8 0" Command="{s:Action Apply}">
                APPLY
            </Button>
        </StackPanel>
    </Grid>
</UserControl>