style: add a background for image diff view

Author: love-linger

src/SourceGit/Views/DiffView.axaml

@@ -111,8 +111,8 @@
 
           <!-- Image Diff -->
           <DataTemplate DataType="m:ImageDiff">
-            <Grid Margin="8,8,8,0" RowDefinitions="Auto,*,Auto" HorizontalAlignment="Center" VerticalAlignment="Center">
-              <Grid Grid.Row="0" Margin="0,0,0,8" ColumnDefinitions="Auto,Auto,*,Auto,Auto">
+            <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>
@@ -126,19 +126,21 @@
                 <TextBlock Grid.Column="4" Classes="monospace" Text="{Binding NewSize}" Foreground="{DynamicResource Brush.FG2}" Margin="8,0,0,0"/>
               </Grid>
 
-              <Border Grid.Row="1" BorderThickness="1" BorderBrush="{DynamicResource Brush.Border1}">
-                <v:ImageDiffView Alpha="{Binding #ImageDiffSlider.Value}" 
-                                 OldImage="{Binding Old}" 
-                                 NewImage="{Binding New}"/>
+              <Border Grid.Row="1" Background="{DynamicResource Brush.Window}" Effect="drop-shadow(0 0 8 #A0000000)" Margin="0,8,0,0">
+                <Border BorderThickness="1" BorderBrush="{DynamicResource Brush.Border1}" Margin="8">
+                  <v:ImageDiffView Alpha="{Binding #ImageDiffSlider.Value}"
+                                   OldImage="{Binding Old}"
+                                   NewImage="{Binding New}"/>
+                </Border>                
               </Border>
 
               <Slider Grid.Row="2" 
                       x:Name="ImageDiffSlider" 
                       Minimum="0" Maximum="1"
                       VerticalAlignment="Top"
-                      TickPlacement="BottomRight"
-                      TickFrequency="0.1"
+                      TickPlacement="None"
                       Margin="0,4,0,0"
+                      MinHeight="0"
                       Foreground="{DynamicResource Brush.Border1}"
                       Value="0.5">
                 <Slider.Resources>

src/SourceGit/Views/DiffView.axaml.cs

@@ -4,6 +4,7 @@
 using Avalonia.Controls;
 using Avalonia.Media;
 using Avalonia.Media.Imaging;
+using Avalonia.Styling;
 
 namespace SourceGit.Views
 {
@@ -45,27 +46,54 @@ static ImageDiffView()
         public override void Render(DrawingContext context)
         {
             var alpha = Alpha;
-            var x = Bounds.Width * Alpha;
+            var bgMaskBrush = new SolidColorBrush(ActualThemeVariant == ThemeVariant.Dark ? 0xFF404040 : 0xFFBBBBBB);
+
+            var bg = new DrawingGroup()
+            {
+                Children =
+                {
+                    new GeometryDrawing() { Brush = bgMaskBrush, Geometry = new RectangleGeometry(new Rect(0, 0, 12, 12)) },
+                    new GeometryDrawing() { Brush = bgMaskBrush, Geometry = new RectangleGeometry(new Rect(12, 12, 12, 12)) },
+                }
+            };
+
+            var brushBG = new DrawingBrush(bg)
+            {
+                AlignmentX = AlignmentX.Left,
+                AlignmentY = AlignmentY.Top,
+                DestinationRect = new RelativeRect(new Size(24, 24), RelativeUnit.Absolute),
+                Stretch = Stretch.None,
+                TileMode = TileMode.Tile,
+            };
+
+            context.FillRectangle(brushBG, new Rect(Bounds.Size));
 
             var left = OldImage;
             if (left != null && alpha > 0)
             {
                 var src = new Rect(0, 0, left.Size.Width * Alpha, left.Size.Height);
-                var dst = new Rect(0, 0, x, Bounds.Height);
+                var dst = new Rect(8, 8, (Bounds.Width - 16) * Alpha, Bounds.Height - 16);
                 context.DrawImage(left, src, dst);
             }
 
             var right = NewImage;
             if (right != null)
             {
                 var src = new Rect(right.Size.Width * Alpha, 0, right.Size.Width - right.Size.Width * Alpha, right.Size.Height);
-                var dst = new Rect(x, 0, Bounds.Width - x, Bounds.Height);
+                var dst = new Rect((Bounds.Width - 16) * Alpha + 8, 8, (Bounds.Width - 16) * (1 - Alpha), Bounds.Height - 16);
                 context.DrawImage(right, src, dst);
             }
-            
+
+            var x = (Bounds.Width - 16) * Alpha + 8;
             context.DrawLine(new Pen(Brushes.DarkGreen, 2), new Point(x, 0), new Point(x, Bounds.Height));
         }
 
+        protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs change)
+        {
+            base.OnPropertyChanged(change);
+            if (change.Property.Name == "ActualThemeVariant") InvalidateVisual();
+        }
+
         protected override Size MeasureOverride(Size availableSize)
         {
             var left = OldImage;
@@ -87,21 +115,24 @@ protected override Size MeasureOverride(Size availableSize)
 
         private Size GetDesiredSize(Size img, Size available)
         {
-            if (img.Width <= available.Width)
+            var w = available.Width - 16;
+            var h = available.Height - 16;
+
+            if (img.Width <= w)
             {
-                if (img.Height <= available.Height)
+                if (img.Height <= h)
                 {
-                    return img;
+                    return new Size(img.Width + 16, img.Height + 16);
                 }
                 else
                 {
-                    return new Size(available.Height * img.Width / img.Height, available.Height);
+                    return new Size(h * img.Width / img.Height + 16, available.Height);
                 }
             }
             else
             {
-                var s = Math.Max(img.Width / available.Width, img.Height / available.Height);
-                return new Size(img.Width / s, img.Height / s);
+                var s = Math.Max(img.Width / w, img.Height / h);
+                return new Size(img.Width / s + 16, img.Height / s + 16);
             }
         }
     }