sourcegit/src/Views/DiffView.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.DiffView"
             x:DataType="vm:DiffContext">
  <Border BorderThickness="1" BorderBrush="{DynamicResource Brush.Border2}" Background="{DynamicResource Brush.Window}">
    <Grid RowDefinitions="26,*">
      <!-- Toolbar -->
      <Border Grid.Row="0" BorderThickness="0,0,0,1" BorderBrush="{DynamicResource Brush.Border2}">
        <Grid ColumnDefinitions="Auto,*,Auto,Auto">
          <StackPanel Grid.Column="0" Orientation="Horizontal" IsVisible="{Binding IsOrgFilePathVisible}" VerticalAlignment="Center">
            <Path Width="12" Height="12" Data="{StaticResource Icons.File}" Margin="8,0,0,0"/>
            <TextBlock Classes="monospace" Margin="4,0,0,0" Text="{Binding OrgFilePath, Converter={x:Static c:PathConverters.TruncateIfTooLong}}" FontSize="11"/>
            <TextBlock Margin="8,0,0,0" Text="→"/>
          </StackPanel>

          <DockPanel Grid.Column="1" VerticalAlignment="Center">
            <Path DockPanel.Dock="Left" Width="12" Height="12" Data="{StaticResource Icons.File}" Margin="8,0,0,0"/>
            <TextBlock Classes="monospace" Margin="4,0,0,0" Text="{Binding FilePath}"
                       TextTrimming="{Binding PathTrimming}" TextWrapping="NoWrap" HorizontalAlignment="Stretch" ToolTip.Tip="{Binding FilePath}" FontSize="11"/>
            <Path DockPanel.Dock="Right" Classes="rotating" Width="10" Height="10" Margin="8,0" Data="{StaticResource Icons.Loading}" IsVisible="{Binding IsLoading}"/>
          </DockPanel>

          <StackPanel Grid.Column="2" Orientation="Horizontal" VerticalAlignment="Center" IsVisible="{Binding FileModeDiff, Converter={x:Static c:ObjectConverters.IsNotNull}}">
            <TextBlock Classes="monospace" Margin="8,0,0,0" Text="{DynamicResource Text.Diff.FileModeChanged}" FontSize="11"/>
            <TextBlock Classes="monospace" Text="{Binding FileModeDiff.Old}" FontSize="11"/>
            <TextBlock Margin="4,0" Text="→"/>
            <TextBlock Classes="monospace" Text="{Binding FileModeDiff.New}" FontSize="11"/>
          </StackPanel>

          <StackPanel Grid.Column="3" Margin="32,0,0,0" Orientation="Horizontal" VerticalAlignment="Center">
            <ToggleButton Classes="line_path"
                          Width="32" Height="18"
                          Background="Transparent"
                          Padding="9,6"
                          IsChecked="{Binding Source={x:Static vm:Preference.Instance}, Path=UseSyntaxHighlighting, Mode=TwoWay}"
                          IsVisible="{Binding IsTextDiff}" 
                          ToolTip.Tip="{DynamicResource Text.Diff.SyntaxHighlight}">
              <Path Width="13" Height="13" Data="{StaticResource Icons.SyntaxHighlight}" Margin="0,3,0,0"/>
            </ToggleButton>

            <ToggleButton Classes="line_path"
                          Width="32" Height="18"
                          Background="Transparent"
                          Padding="9,6"
                          IsChecked="{Binding Source={x:Static vm:Preference.Instance}, Path=UseSideBySideDiff, Mode=TwoWay}"
                          IsVisible="{Binding IsTextDiff}" 
                          ToolTip.Tip="{DynamicResource Text.Diff.SideBySide}">
              <Path Width="12" Height="12" Data="{StaticResource Icons.LayoutHorizontal}" Margin="0,2,0,0"/>
            </ToggleButton>
            
            <Button Classes="icon_button" Width="32" Command="{Binding OpenExternalMergeTool}" ToolTip.Tip="{DynamicResource Text.Diff.UseMerger}">
              <Path Width="12" Height="12" Stretch="Uniform" Data="{StaticResource Icons.OpenWith}"/>
            </Button>
          </StackPanel>
        </Grid>
      </Border>

      <!-- Diff Contents -->
      <ContentControl Grid.Row="1" Content="{Binding Content}">
        <ContentControl.DataTemplates>
          <!-- Binary Diff -->
          <DataTemplate DataType="m:BinaryDiff">
            <StackPanel Orientation="Vertical" VerticalAlignment="Center">
              <TextBlock Text="{DynamicResource Text.Diff.Binary}"
                         Margin="0,0,0,32"
                         FontSize="18" FontWeight="Bold"
                         Foreground="{DynamicResource Brush.FG2}"
                         HorizontalAlignment="Center"/>
              <Path Width="64" Height="64" Data="{StaticResource Icons.Binary}" Fill="{DynamicResource Brush.FG2}"/>
              <Grid Margin="0,16,0,0" HorizontalAlignment="Center" RowDefinitions="32,32" ColumnDefinitions="Auto,Auto,Auto">
                <Border Grid.Row="0" 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.Row="0" Grid.Column="1" Classes="monospace" Text="{Binding OldSize}" Foreground="{DynamicResource Brush.FG2}" HorizontalAlignment="Right" FontSize="16" Margin="8,0"/>
                <TextBlock Grid.Row="0" Grid.Column="2" Classes="monospace" Text="{DynamicResource Text.Bytes}" Foreground="{DynamicResource Brush.FG2}" FontSize="16"/>

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

                <TextBlock Grid.Row="1" Grid.Column="1" Classes="monospace" Text="{Binding NewSize}" Foreground="{DynamicResource Brush.FG2}" HorizontalAlignment="Right" FontSize="16" Margin="8,0"/>
                <TextBlock Grid.Row="1" Grid.Column="2" Classes="monospace" Text="{DynamicResource Text.Bytes}" Foreground="{DynamicResource Brush.FG2}" FontSize="16"/>
              </Grid>
            </StackPanel>
          </DataTemplate>

          <!-- LFS Diff -->
          <DataTemplate DataType="m:LFSDiff">
            <StackPanel Orientation="Vertical" VerticalAlignment="Center">
              <TextBlock Text="{DynamicResource Text.Diff.LFS}"
                         Margin="0,0,0,32"
                         FontSize="18" FontWeight="Bold"
                         Foreground="{DynamicResource Brush.FG2}"
                         HorizontalAlignment="Center"/>
              <Path Width="64" Height="64" Data="{StaticResource Icons.LFS}" Fill="{DynamicResource Brush.FG2}"/>
              <Grid Margin="0,16,0,0" HorizontalAlignment="Center" RowDefinitions="32,32" ColumnDefinitions="Auto,Auto,Auto">
                <Border Grid.Row="0" 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.Row="0" Grid.Column="1" Classes="monospace" Text="{Binding Old.Size}" Foreground="{DynamicResource Brush.FG2}" HorizontalAlignment="Right" FontSize="16" Margin="8,0"/>
                <TextBlock Grid.Row="0" Grid.Column="2" Classes="monospace" Text="{DynamicResource Text.Bytes}" Foreground="{DynamicResource Brush.FG2}" FontSize="16"/>

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

                <TextBlock Grid.Row="1" Grid.Column="1" Classes="monospace" Text="{Binding New.Size}" Foreground="{DynamicResource Brush.FG2}" HorizontalAlignment="Right" FontSize="16" Margin="8,0"/>
                <TextBlock Grid.Row="1" Grid.Column="2" Classes="monospace" Text="{DynamicResource Text.Bytes}" Foreground="{DynamicResource Brush.FG2}" FontSize="16"/>
              </Grid>
            </StackPanel>
          </DataTemplate>

          <!-- Image Diff -->
          <DataTemplate DataType="m:ImageDiff">
            <Grid RowDefinitions="Auto,*,Auto" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="8,8,8,0">
              <Grid Grid.Row="0" ColumnDefinitions="Auto,Auto,*,Auto,Auto">
                <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 OldSize}" Foreground="{DynamicResource Brush.FG2}" Margin="8,0,0,0"/>

                <Border Grid.Column="3" 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="4" Classes="monospace" Text="{Binding NewSize}" Foreground="{DynamicResource Brush.FG2}" Margin="8,0,0,0"/>
              </Grid>
              
              <Border Grid.Row="1" Background="{DynamicResource Brush.Window}" Effect="drop-shadow(0 0 8 #A0000000)" Margin="0,8,0,0" HorizontalAlignment="Center">
                <Border BorderThickness="1" BorderBrush="{DynamicResource Brush.Border1}" Margin="8">
                  <v:ImageDiffView Alpha="{Binding #ImageDiffSlider.Value}"
                                   OldImage="{Binding Old}"
                                   NewImage="{Binding New}"
                                   RenderOptions.BitmapInterpolationMode="HighQuality"/>
                </Border>                
              </Border>

              <Slider Grid.Row="2" 
                      x:Name="ImageDiffSlider" 
                      Minimum="0" Maximum="1"
                      VerticalAlignment="Top"
                      TickPlacement="None"
                      Margin="0,4,0,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>
            </Grid>
          </DataTemplate>

          <!-- Text Diff -->
          <DataTemplate DataType="m:TextDiff">
            <v:TextDiffView TextDiff="{Binding}" UseSideBySideDiff="{Binding Source={x:Static vm:Preference.Instance}, Path=UseSideBySideDiff, Mode=OneWay}"/>
          </DataTemplate>

          <!-- No or only EOL changes -->
          <DataTemplate DataType="m:NoOrEOLChange">
            <StackPanel Orientation="Vertical" VerticalAlignment="Center">
              <Path Width="64" Height="64" Data="{StaticResource Icons.Check}" Fill="{DynamicResource Brush.FG2}"/>
              <TextBlock Margin="0,16,0,0"
                         Text="{DynamicResource Text.Diff.NoChange}"
                         FontSize="18" FontWeight="Bold"
                         Foreground="{DynamicResource Brush.FG2}"
                         HorizontalAlignment="Center"/>
            </StackPanel>
          </DataTemplate>
        </ContentControl.DataTemplates>
      </ContentControl>
    </Grid>
  </Border>
</UserControl>