XplorePlane/XP.Camera/Calibration/Controls/CalibrationControl.xaml

<UserControl x:Class="XP.Camera.Calibration.Controls.CalibrationControl"
             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:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
             xmlns:cal="clr-namespace:XP.Camera.Calibration"
             xmlns:controls="clr-namespace:XP.Camera.Calibration.Controls"
             mc:Ignorable="d"
             d:DesignHeight="850"
             d:DesignWidth="1400">
    <UserControl.Resources>
        <cal:CalibrationLocalizedStrings x:Key="LocalizedStrings" />
        <SolidColorBrush x:Key="PrimaryColor" Color="#F5F5F5" />
        <SolidColorBrush x:Key="AccentColor" Color="#0078D4" />
        <SolidColorBrush x:Key="BackgroundColor" Color="#FAFAFA" />
        <SolidColorBrush x:Key="SidebarColor" Color="#FFFFFF" />
        <SolidColorBrush x:Key="BorderColor" Color="#E1E1E1" />
        <SolidColorBrush x:Key="TextColor" Color="#333333" />
        <SolidColorBrush x:Key="TextSecondaryColor" Color="#666666" />

        <Style x:Key="ToolbarButtonStyle" TargetType="Button">
            <Setter Property="Width" Value="90" />
            <Setter Property="Height" Value="70" />
            <Setter Property="Margin" Value="0,0,8,0" />
            <Setter Property="Background" Value="White" />
            <Setter Property="Foreground" Value="{StaticResource TextColor}" />
            <Setter Property="BorderBrush" Value="{StaticResource BorderColor}" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="3">
                            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                                <ContentPresenter Content="{TemplateBinding Tag}"
                                                  HorizontalAlignment="Center"
                                                  Margin="0,4,0,4" />
                                <TextBlock Text="{TemplateBinding Content}"
                                           FontSize="12"
                                           HorizontalAlignment="Center"
                                           Foreground="{TemplateBinding Foreground}"
                                           TextWrapping="Wrap"
                                           TextAlignment="Center" />
                            </StackPanel>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#E5F3FF" />
                                <Setter Property="BorderBrush" Value="{StaticResource AccentColor}" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" Value="#CCE8FF" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Opacity" Value="0.5" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Border Grid.Row="0" Background="{StaticResource PrimaryColor}" BorderBrush="{StaticResource BorderColor}"
                BorderThickness="0,0,0,1" Padding="15,10">
            <StackPanel Orientation="Horizontal">
                <Button Content="{Binding Source={StaticResource LocalizedStrings}, Path=Resources.CalibrationLoadImage}"
                        Command="{Binding LoadImageCommand}" FontFamily="Segoe UI"
                        Style="{StaticResource ToolbarButtonStyle}">
                    <Button.Tag>
                        <iconPacks:PackIconMaterial Kind="ImageOutline" Width="24" Height="24" />
                    </Button.Tag>
                </Button>
                <Button Content="{Binding Source={StaticResource LocalizedStrings}, Path=Resources.CalibrationLoadCsv}"
                        Command="{Binding LoadCsvCommand}" FontFamily="Segoe UI"
                        Style="{StaticResource ToolbarButtonStyle}">
                    <Button.Tag>
                        <iconPacks:PackIconMaterial Kind="FileDelimited" Width="24" Height="24" />
                    </Button.Tag>
                </Button>
                <Button Content="{Binding Source={StaticResource LocalizedStrings}, Path=Resources.CalibrationExecute}"
                        Command="{Binding CalibrateCommand}" FontFamily="Segoe UI"
                        Style="{StaticResource ToolbarButtonStyle}">
                    <Button.Tag>
                        <iconPacks:PackIconMaterial Kind="Crosshairs" Width="24" Height="24" />
                    </Button.Tag>
                </Button>
                <Button Content="{Binding Source={StaticResource LocalizedStrings}, Path=Resources.CalibrationSave}"
                        Command="{Binding SaveCalibrationCommand}" FontFamily="Segoe UI"
                        Style="{StaticResource ToolbarButtonStyle}">
                    <Button.Tag>
                        <iconPacks:PackIconMaterial Kind="ContentSave" Width="24" Height="24" />
                    </Button.Tag>
                </Button>
                <Button Content="{Binding Source={StaticResource LocalizedStrings}, Path=Resources.CalibrationLoad}"
                        Command="{Binding LoadCalibrationCommand}" FontFamily="Segoe UI"
                        Style="{StaticResource ToolbarButtonStyle}">
                    <Button.Tag>
                        <iconPacks:PackIconMaterial Kind="FolderOpen" Width="24" Height="24" />
                    </Button.Tag>
                </Button>
                <CheckBox Content="{Binding Source={StaticResource LocalizedStrings}, Path=Resources.CalibrationShowWorld}"
                          VerticalAlignment="Center" FontFamily="Segoe UI"
                          IsChecked="{Binding ShowWorldCoordinates}"
                          Margin="10,0,0,0" FontSize="13" Foreground="{StaticResource TextColor}" />
            </StackPanel>
        </Border>

        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="400" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Border Grid.Column="0" BorderBrush="{StaticResource BorderColor}" BorderThickness="0,0,1,0"
                    Background="{StaticResource SidebarColor}">
                <Grid Margin="12">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <TextBlock Grid.Row="0" Text="{Binding Source={StaticResource LocalizedStrings}, Path=Resources.CalibrationPointList}"
                               FontSize="15" FontWeight="SemiBold" FontFamily="Segoe UI"
                               Margin="0,0,0,12" Foreground="{StaticResource TextColor}" />

                    <DataGrid Grid.Row="1" AutoGenerateColumns="False" CanUserAddRows="True"
                              ItemsSource="{Binding CalibrationPoints}"
                              HeadersVisibility="Column" GridLinesVisibility="All"
                              FontFamily="Segoe UI"
                              BorderBrush="{StaticResource BorderColor}" BorderThickness="1">
                        <DataGrid.Columns>
                            <DataGridTextColumn Header="{Binding Source={StaticResource LocalizedStrings}, Path=Resources.CalibrationPixelX}"
                                                Binding="{Binding PixelX}" FontFamily="Segoe UI" Width="*" />
                            <DataGridTextColumn Header="{Binding Source={StaticResource LocalizedStrings}, Path=Resources.CalibrationPixelY}"
                                                Binding="{Binding PixelY}" FontFamily="Segoe UI" Width="*" />
                            <DataGridTextColumn Header="{Binding Source={StaticResource LocalizedStrings}, Path=Resources.CalibrationWorldX}"
                                                Binding="{Binding WorldX}" FontFamily="Segoe UI" Width="*" />
                            <DataGridTextColumn Header="{Binding Source={StaticResource LocalizedStrings}, Path=Resources.CalibrationWorldY}"
                                                Binding="{Binding WorldY}" FontFamily="Segoe UI" Width="*" />
                        </DataGrid.Columns>
                    </DataGrid>
                </Grid>
            </Border>

            <Grid Grid.Column="1" Background="{StaticResource BackgroundColor}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <controls:ImageCanvasControl Grid.Row="0" x:Name="imageCanvas" Margin="12,12,12,8" />

                <Border Grid.Row="1" Background="White" BorderBrush="{StaticResource BorderColor}" BorderThickness="1"
                        Margin="12,0,12,12" Padding="12" MinHeight="80">
                    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
                        <TextBlock TextWrapping="Wrap" FontSize="12"
                                   Text="{Binding StatusText}" FontFamily="Segoe UI"
                                   Foreground="{StaticResource TextColor}" />
                    </ScrollViewer>
                </Border>
            </Grid>
        </Grid>
    </Grid>
</UserControl>