設定Matrix使得控制元件填滿整個ScrollViewer的實際寬高

阿遇而已發表於2024-10-17
控制元件View

先看示例：

<ScrollViewer>
    <Canvas
        Name="CanvasMap"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        Background="LightGray"
        MouseLeftButtonDown="Canvas_Map_MouseLeftButtonDown"
        MouseLeftButtonUp="Canvas_Map_MouseLeftButtonUp"
        MouseMove="Canvas_Map_MouseMove"
        MouseWheel="Canvas_Map_MouseWheel">
        <Canvas.RenderTransform>
            <MatrixTransform x:Name="Matrix" />
        </Canvas.RenderTransform>
        <Image x:Name="DrawingImage" />
    </Canvas>
</ScrollViewer>

AI回覆

要讓 Image 填滿 ScrollViewer 的實際寬高，你可以透過設定 MatrixTransform 來縮放 Canvas，使其內容適配 ScrollViewer 的可視區域。下面是實現的步驟和程式碼示例：

1. 獲取 ScrollViewer 的實際尺寸

在載入或調整視窗時，獲取 ScrollViewer 的實際寬度和高度，以便將其與 Image 的原始尺寸進行比較，計算縮放因子。

2. 設定 MatrixTransform

在 MatrixTransform 中，你可以使用 Scale 方法來調整 Image 的大小，使其填滿 ScrollViewer。

程式碼示例

以下是一個完整的示例，展示如何設定 MatrixTransform 以使 Image 填滿 ScrollViewer：

XAML 程式碼

<ScrollViewer x:Name="ScrollViewerMap"
              HorizontalScrollBarVisibility="Auto"
              VerticalScrollBarVisibility="Auto">
    <Canvas
        Name="CanvasMap"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        Background="LightGray"
        MouseLeftButtonDown="Canvas_Map_MouseLeftButtonDown"
        MouseLeftButtonUp="Canvas_Map_MouseLeftButtonUp"
        MouseMove="Canvas_Map_MouseMove"
        MouseWheel="Canvas_Map_MouseWheel">
        <Canvas.RenderTransform>
            <MatrixTransform x:Name="Matrix" />
        </Canvas.RenderTransform>
        <Image x:Name="DrawingImage" />
    </Canvas>
</ScrollViewer>

C# 程式碼

using System.Windows;
using System.Windows.Input;
using System.Windows.Media;

namespace YourNamespace
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            Loaded += MainWindow_Loaded;
        }

        private void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            // 假設您載入了一張圖片
            DrawingImage.Source = new BitmapImage(new Uri("your_image_path_here.jpg", UriKind.RelativeOrAbsolute));

            // 設定影像填滿 ScrollViewer
            ResizeImageToFit();
        }

        private void ResizeImageToFit()
        {
            // 獲取 ScrollViewer 的實際尺寸
            double scrollViewerWidth = ScrollViewerMap.ActualWidth;
            double scrollViewerHeight = ScrollViewerMap.ActualHeight;

            // 獲取 Image 的原始尺寸
            double imageWidth = DrawingImage.Source.Width;
            double imageHeight = DrawingImage.Source.Height;

            // 計算縮放因子
            double scaleX = scrollViewerWidth / imageWidth;
            double scaleY = scrollViewerHeight / imageHeight;

            // 使用較小的縮放因子保持比例
            double scale = Math.Min(scaleX, scaleY);

            // 設定矩陣轉換
            Matrix matrix = new Matrix();
            matrix.Scale(scale, scale);
            Matrix.Transform = matrix;

            // 重新設定 Canvas 的寬高
            CanvasMap.Width = imageWidth * scale;
            CanvasMap.Height = imageHeight * scale;
        }
    }
}

關鍵點解釋

  1. 獲取 ScrollViewer 的實際尺寸: 在視窗載入時獲取 ScrollViewer 的實際寬度和高度。

  2. 獲取 Image 的原始尺寸: 透過 DrawingImage.Source.Width 和 DrawingImage.Source.Height 獲取影像的實際尺寸。

  3. 計算縮放因子: 根據 ScrollViewer 的尺寸與影像的原始尺寸計算縮放因子。使用較小的縮放因子以保持影像的寬高比。

  4. 設定 MatrixTransform: 將計算出的縮放因子應用於 MatrixTransform，使 Image 填滿 ScrollViewer。

  5. 調整 Canvas 的大小: 根據縮放後的影像大小調整 Canvas 的寬高，以確保所有內容在可視範圍內。

注意事項

  • 確保在載入圖片後呼叫 ResizeImageToFit() 方法，這樣可以保證影像在正確的尺寸下顯示。
  • 根據需要調整 ScrollViewer 的其他屬性，例如捲軸的可見性。

透過上述步驟，你可以確保 Image 在 ScrollViewer 中適當地填充並保持比例。希望這能幫助到你！如果有其他問題，歡迎隨時問我！

相關文章