sourcegit/src/Views/ImageDiffView.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             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:m="using:SourceGit.Models"
             xmlns:vm="using:SourceGit.ViewModels"
             xmlns:v="using:SourceGit.Views"
             xmlns:c="using:SourceGit.Converters"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="SourceGit.Views.ImageDiffView"
             x:DataType="m:ImageDiff">
  <TabControl Margin="0,0,0,8" TabStripPlacement="Bottom">
    <TabControl.Styles>
      <Style Selector="TabControl /template/ ItemsPresenter#PART_ItemsPresenter > WrapPanel">
        <Setter Property="HorizontalAlignment" Value="Center"/>
      </Style>
    </TabControl.Styles>

    <TabItem>
      <TabItem.Header>
        <TextBlock Text="SIDE-BY-SIDE" FontSize="11"/>
      </TabItem.Header>

      <UniformGrid Rows="1" Margin="0,16" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Grid RowDefinitions="Auto,*" Margin="16,0" IsVisible="{Binding Old, Converter={x:Static ObjectConverters.IsNotNull}}">
          <StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Center">
            <Border Height="16" Background="{DynamicResource Brush.Badge}" CornerRadius="8" VerticalAlignment="Center">
              <TextBlock Classes="monospace" Text="{DynamicResource Text.Diff.Binary.Old}" Margin="8,0" FontSize="10"/>
            </Border>

            <TextBlock Classes="monospace" Text="{Binding OldImageSize}" Margin="8,0,0,0"/>
            <TextBlock Classes="monospace" Text="{Binding OldFileSize}" Foreground="{DynamicResource Brush.FG2}" Margin="16,0,0,0" HorizontalAlignment="Right"/>
            <TextBlock Classes="monospace" Text="{DynamicResource Text.Bytes}" Foreground="{DynamicResource Brush.FG2}" Margin="2,0,0,0"/>
          </StackPanel>

          <Border Grid.Row="1" Margin="0,12,0,0" Effect="drop-shadow(0 0 8 #A0000000)">
            <Border Background="{DynamicResource Brush.Popup}" HorizontalAlignment="Center" Padding="8">
              <Border BorderThickness="1" BorderBrush="{DynamicResource Brush.Border1}">
                <Grid>
                  <v:ImageContainer/>
                  <Image Source="{Binding Old}" Stretch="Uniform" VerticalAlignment="Center"/>
                </Grid>
              </Border>
            </Border>
          </Border>
        </Grid>
        
        <Grid RowDefinitions="Auto,*" Margin="16,0" IsVisible="{Binding New, Converter={x:Static ObjectConverters.IsNotNull}}">
          <StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Center">
            <Border Height="16" Background="Green" CornerRadius="8" VerticalAlignment="Center">
              <TextBlock Classes="monospace" Text="{DynamicResource Text.Diff.Binary.New}" Margin="8,0" FontSize="10"/>
            </Border>

            <TextBlock Classes="monospace" Text="{Binding NewImageSize}" Margin="8,0,0,0"/>
            <TextBlock Classes="monospace" Text="{Binding NewFileSize}" Foreground="{DynamicResource Brush.FG2}" Margin="16,0,0,0" HorizontalAlignment="Right"/>
            <TextBlock Classes="monospace" Text="{DynamicResource Text.Bytes}" Foreground="{DynamicResource Brush.FG2}" Margin="2,0,0,0"/>
          </StackPanel>

          <Border Grid.Row="1" Margin="0,12,0,0" Effect="drop-shadow(0 0 8 #A0000000)">
            <Border Background="{DynamicResource Brush.Popup}" HorizontalAlignment="Center" Padding="8">
              <Border BorderThickness="1" BorderBrush="{DynamicResource Brush.Border1}">
                <Grid>
                  <v:ImageContainer/>
                  <Image Source="{Binding New}" Stretch="Uniform" VerticalAlignment="Center"/>
                </Grid>
              </Border>
            </Border>
          </Border>
        </Grid>
      </UniformGrid>
    </TabItem>

    <TabItem>
      <TabItem.Header>
        <TextBlock Text="SWIPE" FontSize="11"/>
      </TabItem.Header>
      
      <Grid RowDefinitions="Auto,*" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="8,16">
        <Grid Grid.Row="0" ColumnDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto" HorizontalAlignment="Center">
          <Border Grid.Column="0" Height="16" Background="{DynamicResource Brush.Badge}" CornerRadius="8" VerticalAlignment="Center">
            <TextBlock Classes="monospace" Text="{DynamicResource Text.Diff.Binary.Old}" Margin="8,0" FontSize="10"/>
          </Border>

          <TextBlock Grid.Column="1" Classes="monospace" Text="{Binding OldImageSize}" Margin="8,0,0,0"/>
          <TextBlock Grid.Column="2" Classes="monospace" Text="{Binding OldFileSize}" Foreground="{DynamicResource Brush.FG2}" Margin="16,0,0,0" HorizontalAlignment="Right"/>
          <TextBlock Grid.Column="3" Classes="monospace" Text="{DynamicResource Text.Bytes}" Foreground="{DynamicResource Brush.FG2}" Margin="2,0,0,0"/>

          <Border Grid.Column="4" Height="16" Background="Green" CornerRadius="8" VerticalAlignment="Center" Margin="32,0,0,0">
            <TextBlock Classes="monospace" Text="{DynamicResource Text.Diff.Binary.New}" Margin="8,0" FontSize="10"/>
          </Border>

          <TextBlock Grid.Column="5" Classes="monospace" Text="{Binding NewImageSize}" Margin="8,0,0,0"/>
          <TextBlock Grid.Column="6" Classes="monospace" Text="{Binding NewFileSize}" Foreground="{DynamicResource Brush.FG2}" Margin="16,0,0,0" HorizontalAlignment="Right"/>
          <TextBlock Grid.Column="7" Classes="monospace" Text="{DynamicResource Text.Bytes}" Foreground="{DynamicResource Brush.FG2}" Margin="2,0,0,0"/>
        </Grid>
        
        <Border Grid.Row="1" Margin="0,12,0,0" Effect="drop-shadow(0 0 8 #A0000000)">
          <Border HorizontalAlignment="Center" Background="{DynamicResource Brush.Window}">
            <Border BorderThickness="1" BorderBrush="{DynamicResource Brush.Border1}" Margin="8">
              <v:ImagesSwipeControl OldImage="{Binding Old}"
                                    NewImage="{Binding New}"
                                    RenderOptions.BitmapInterpolationMode="HighQuality"/>             
            </Border>
          </Border>
        </Border>
      </Grid>
    </TabItem>

    <TabItem>
      <TabItem.Header>
        <TextBlock Text="BLEND" FontSize="11"/>
      </TabItem.Header>
      
      <Grid RowDefinitions="Auto,*,Auto" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="8,16,8,0">
        <Grid Grid.Row="0" ColumnDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto" HorizontalAlignment="Center">
          <Border Grid.Column="0" Height="16" Background="{DynamicResource Brush.Badge}" CornerRadius="8" VerticalAlignment="Center">
            <TextBlock Classes="monospace" Text="{DynamicResource Text.Diff.Binary.Old}" Margin="8,0" FontSize="10"/>
          </Border>

          <TextBlock Grid.Column="1" Classes="monospace" Text="{Binding OldImageSize}" Margin="8,0,0,0"/>
          <TextBlock Grid.Column="2" Classes="monospace" Text="{Binding OldFileSize}" Foreground="{DynamicResource Brush.FG2}" Margin="16,0,0,0" HorizontalAlignment="Right"/>
          <TextBlock Grid.Column="3" Classes="monospace" Text="{DynamicResource Text.Bytes}" Foreground="{DynamicResource Brush.FG2}" Margin="2,0,0,0"/>

          <Border Grid.Column="4" Height="16" Background="Green" CornerRadius="8" VerticalAlignment="Center" Margin="32,0,0,0">
            <TextBlock Classes="monospace" Text="{DynamicResource Text.Diff.Binary.New}" Margin="8,0" FontSize="10"/>
          </Border>

          <TextBlock Grid.Column="5" Classes="monospace" Text="{Binding NewImageSize}" Margin="8,0,0,0"/>
          <TextBlock Grid.Column="6" Classes="monospace" Text="{Binding NewFileSize}" Foreground="{DynamicResource Brush.FG2}" Margin="16,0,0,0" HorizontalAlignment="Right"/>
          <TextBlock Grid.Column="7" Classes="monospace" Text="{DynamicResource Text.Bytes}" Foreground="{DynamicResource Brush.FG2}" Margin="2,0,0,0"/>
        </Grid>

        <Border Grid.Row="1" Margin="0,12,0,0" Effect="drop-shadow(0 0 8 #A0000000)">
          <Border HorizontalAlignment="Center" Background="{DynamicResource Brush.Window}">
            <Border BorderThickness="1" BorderBrush="{DynamicResource Brush.Border1}" Margin="8">
              <v:ImageBlendControl Alpha="{Binding #ImageBlendSlider.Value}"
                                   OldImage="{Binding Old}"
                                   NewImage="{Binding New}"/>
            </Border>
          </Border>
        </Border>

        <Grid Grid.Row="2" ColumnDefinitions="100,200,100" Margin="0,12,0,0" HorizontalAlignment="Center">
          <StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,8,0">
            <TextBlock Classes="monospace" Text="{DynamicResource Text.Diff.Binary.Old}"/>            
            <TextBlock Classes="monospace"
                       Margin="8,0,0,0"
                       Text="{Binding #ImageBlendSlider.Value, Converter={x:Static c:DoubleConverters.OneMinusToPercentage}}"
                       Foreground="{DynamicResource Brush.FG2}"/>
          </StackPanel>

          <Slider Grid.Column="1"
                  x:Name="ImageBlendSlider"
                  Minimum="0" Maximum="1"
                  VerticalAlignment="Top"
                  TickPlacement="None"
                  Margin="0"
                  MinHeight="0"
                  Foreground="{DynamicResource Brush.Border1}"
                  Value="0.5">
            <Slider.Resources>
              <Thickness x:Key="SliderTopHeaderMargin">0,0,0,4</Thickness>
              <GridLength x:Key="SliderPreContentMargin">0</GridLength>
              <GridLength x:Key="SliderPostContentMargin">0</GridLength>
              <CornerRadius x:Key="SliderThumbCornerRadius">8</CornerRadius>
              <x:Double x:Key="SliderHorizontalThumbWidth">16</x:Double>
              <x:Double x:Key="SliderHorizontalThumbHeight">16</x:Double>
            </Slider.Resources>
          </Slider>

          <StackPanel Grid.Column="2" Orientation="Horizontal" VerticalAlignment="Top" Margin="8,0,0,0">
            <TextBlock Classes="monospace" Text="{DynamicResource Text.Diff.Binary.New}"/>
            <TextBlock Classes="monospace"
                       Margin="8,0,0,0"
                       Text="{Binding #ImageBlendSlider.Value, Converter={x:Static c:DoubleConverters.ToPercentage}}"
                       Foreground="{DynamicResource Brush.FG2}"/>
          </StackPanel>
        </Grid>
      </Grid>
    </TabItem>
  </TabControl>
</UserControl>