Making images scale accordingly

Author: niels9001

components/MarkdownTextBlock/samples/MarkdownTextBlockCustomThemeSampleBase.cs

@@ -101,9 +101,6 @@ public abstract partial class MarkdownTextBlockCustomThemeSampleBase : Page
     public static readonly DependencyProperty ImageStretchIndexProperty =
         DependencyProperty.Register(nameof(ImageStretchIndex), typeof(int), typeof(MarkdownTextBlockCustomThemeSampleBase), new PropertyMetadata(0));
 
-    public static readonly DependencyProperty ImageCornerRadiusProperty =
-        DependencyProperty.Register(nameof(ImageCornerRadius), typeof(double), typeof(MarkdownTextBlockCustomThemeSampleBase), new PropertyMetadata(0d));
-
     public static readonly DependencyProperty BoldFontWeightIndexProperty =
         DependencyProperty.Register(nameof(BoldFontWeightIndex), typeof(int), typeof(MarkdownTextBlockCustomThemeSampleBase), new PropertyMetadata(0));
 
@@ -286,12 +283,6 @@ public int ImageStretchIndex
         set => SetValue(ImageStretchIndexProperty, value);
     }
 
-    public double ImageCornerRadius
-    {
-        get => (double)GetValue(ImageCornerRadiusProperty);
-        set => SetValue(ImageCornerRadiusProperty, value);
-    }
-
     public int BoldFontWeightIndex
     {
         get => (int)GetValue(BoldFontWeightIndexProperty);
@@ -435,7 +426,6 @@ public MarkdownThemes CreateThemes()
             ImageMaxWidth = ImageMaxWidth,
             ImageMaxHeight = ImageMaxHeight,
             ImageStretch = ImageStretchOptions[ImageStretchIndex],
-            ImageCornerRadius = new CornerRadius(ImageCornerRadius),
 
             BoldFontWeight = BoldFontWeights[BoldFontWeightIndex],
 
@@ -480,7 +470,6 @@ public void ResetToDefaults()
         ImageMaxWidth = 0;
         ImageMaxHeight = 0;
         ImageStretchIndex = 0;
-        ImageCornerRadius = 0;
 
         BoldFontWeightIndex = 0;
 

components/MarkdownTextBlock/samples/ThemeOptionsPane.xaml

@@ -346,13 +346,6 @@
                         Minimum="0"
                         SpinButtonPlacementMode="Compact"
                         ValueChanged="OnValueChanged" />
-                    <muxc:NumberBox
-                        x:Name="ImageCornerRadiusBox"
-                        Header="Corner Radius"
-                        Maximum="50"
-                        Minimum="0"
-                        SpinButtonPlacementMode="Compact"
-                        ValueChanged="OnValueChanged" />
                     <ComboBox
                         x:Name="ImageStretchComboBox"
                         HorizontalAlignment="Stretch"

components/MarkdownTextBlock/samples/ThemeOptionsPane.xaml.cs

@@ -71,7 +71,6 @@ private void LoadValuesFromSample()
         // Images
         ImageMaxWidthBox.Value = _sample.ImageMaxWidth;
         ImageMaxHeightBox.Value = _sample.ImageMaxHeight;
-        ImageCornerRadiusBox.Value = _sample.ImageCornerRadius;
         ImageStretchComboBox.SelectedIndex = _sample.ImageStretchIndex;
     }
 
@@ -124,7 +123,6 @@ private void SyncValuesToSample()
         // Images
         _sample.ImageMaxWidth = ImageMaxWidthBox.Value;
         _sample.ImageMaxHeight = ImageMaxHeightBox.Value;
-        _sample.ImageCornerRadius = ImageCornerRadiusBox.Value;
         _sample.ImageStretchIndex = ImageStretchComboBox.SelectedIndex;
     }
 

components/MarkdownTextBlock/src/MarkdownThemes.cs

@@ -120,7 +120,6 @@ public sealed class MarkdownThemes : DependencyObject
     public double ImageMaxWidth { get; set; } = 0; // 0 = no constraint
     public double ImageMaxHeight { get; set; } = 0;
     public Stretch ImageStretch { get; set; } = Stretch.Uniform;
-    public CornerRadius ImageCornerRadius { get; set; } = new CornerRadius(0);
 
     // Table styling
     public Brush TableBorderBrush { get; set; } = new SolidColorBrush(Colors.Gray);

components/MarkdownTextBlock/src/TextElements/MyImage.cs

@@ -12,7 +12,6 @@ namespace CommunityToolkit.WinUI.Controls.TextElements;
 internal class MyImage : IAddChild
 {
     private InlineUIContainer _container = new InlineUIContainer();
-    private Border _border = new Border();
     private LinkInline? _linkInline;
     private Image _image = new Image();
     private Uri _uri;
@@ -85,8 +84,7 @@ out var height
     private void Init()
     {
         _image.Loaded += LoadImage;
-        _border.Child = _image;
-        _container.Child = _border;
+        _container.Child = _image;
     }
 
     private async void LoadImage(object sender, RoutedEventArgs e)
@@ -97,7 +95,7 @@ private async void LoadImage(object sender, RoutedEventArgs e)
             if (_imageProvider != null && _imageProvider.ShouldUseThisProvider(_uri.AbsoluteUri))
             {
                 _image = await _imageProvider.GetImage(_uri.AbsoluteUri);
-                _border.Child = _image;
+                _container.Child = _image;
             }
             else
             {
@@ -121,7 +119,7 @@ private async void LoadImage(object sender, RoutedEventArgs e)
                     if (resImage != null)
                     {
                         _image = resImage;
-                        _border.Child = _image;
+                        _container.Child = _image;
                     }
                 }
                 else
@@ -139,57 +137,39 @@ private async void LoadImage(object sender, RoutedEventArgs e)
                         await bitmap.SetSourceAsync(stream);
                     }
                     _image.Source = bitmap;
-                    _image.Width = bitmap.PixelWidth == 0 ? bitmap.DecodePixelWidth : bitmap.PixelWidth;
-                    _image.Height = bitmap.PixelHeight == 0 ? bitmap.DecodePixelHeight : bitmap.PixelHeight;
-
+                    // Don't set fixed Width/Height - let layout system handle it
+                    // Store natural dimensions for MaxWidth/MaxHeight constraints
+                    double naturalWidth = bitmap.PixelWidth == 0 ? bitmap.DecodePixelWidth : bitmap.PixelWidth;
+                    double naturalHeight = bitmap.PixelHeight == 0 ? bitmap.DecodePixelHeight : bitmap.PixelHeight;
+
+                    // Use natural size as max constraint so image doesn't upscale
+                    _image.MaxWidth = naturalWidth;
+                    _image.MaxHeight = naturalHeight;
                 }
 
                 _loaded = true;
             }
 
-            // Determine the actual image dimensions
-            double actualWidth = _precedentWidth != 0 ? _precedentWidth : _image.Width;
-            double actualHeight = _precedentHeight != 0 ? _precedentHeight : _image.Height;
-
-            // Apply max constraints and calculate the final size
-            // When using Uniform stretch with max constraints, we need to calculate
-            // the actual rendered size to avoid gaps
-            double finalWidth = actualWidth;
-            double finalHeight = actualHeight;
-
-            bool hasMaxWidth = _themes.ImageMaxWidth > 0;
-            bool hasMaxHeight = _themes.ImageMaxHeight > 0;
-
-            if (hasMaxWidth || hasMaxHeight)
+            // Apply precedent (markdown-specified) dimensions if provided
+            if (_precedentWidth != 0)
             {
-                double scaleX = hasMaxWidth && actualWidth > _themes.ImageMaxWidth 
-                    ? _themes.ImageMaxWidth / actualWidth 
-                    : 1.0;
-                double scaleY = hasMaxHeight && actualHeight > _themes.ImageMaxHeight 
-                    ? _themes.ImageMaxHeight / actualHeight 
-                    : 1.0;
-
-                // For Uniform stretch, use the smaller scale to maintain aspect ratio
-                if (_themes.ImageStretch == Stretch.Uniform || _themes.ImageStretch == Stretch.UniformToFill)
-                {
-                    double uniformScale = Math.Min(scaleX, scaleY);
-                    finalWidth = actualWidth * uniformScale;
-                    finalHeight = actualHeight * uniformScale;
-                }
-                else
-                {
-                    // For other stretch modes, apply constraints independently
-                    finalWidth = actualWidth * scaleX;
-                    finalHeight = actualHeight * scaleY;
-                }
+                _image.MaxWidth = _precedentWidth;
+            }
+            if (_precedentHeight != 0)
+            {
+                _image.MaxHeight = _precedentHeight;
             }
 
-            _image.Width = finalWidth;
-            _image.Height = finalHeight;
+            // Apply theme constraints - these override natural/precedent if smaller
+            if (_themes.ImageMaxWidth > 0 && _themes.ImageMaxWidth < _image.MaxWidth)
+            {
+                _image.MaxWidth = _themes.ImageMaxWidth;
+            }
+            if (_themes.ImageMaxHeight > 0 && _themes.ImageMaxHeight < _image.MaxHeight)
+            {
+                _image.MaxHeight = _themes.ImageMaxHeight;
+            }
             _image.Stretch = _themes.ImageStretch;
-
-            // Apply corner radius via the border
-            _border.CornerRadius = _themes.ImageCornerRadius;
         }
         catch (Exception) { }
     }