.NET 控制元件轉圖片

唐宋元明清2188發表於2024-07-26
控制元件

Windows應用開發有很多場景需要動態獲取控制元件顯示的影像，即控制元件轉圖片，用於其它介面的顯示、傳輸圖片資料流、儲存為本地圖片等用途。

下面分別介紹下一些實現方式以及主要使用場景

RenderTargetBitmap

控制元件轉圖片BitmapImage/BitmapSource，在WPF中可以使用RenderTargetBitmap獲取捕獲控制元件的影像。

RenderTargetBitmap 是用於將任何 Visual 元素內容渲染為點陣圖的主要工具

下面我們展示下簡單快速的獲取控制元件圖片：

 1     private void CaptureButton_OnClick(object sender, RoutedEventArgs e)
 2     {
 3         var dpi = GetAppStartDpi();
 4         var bitmapSource = ToImageSource(Grid1, Grid1.RenderSize, dpi.X, dpi.Y);
 5         CaptureImage.Source = bitmapSource;
 6     }
 7     /// <summary>
 8     /// Visual轉圖片
 9     /// </summary>
10     public static BitmapSource ToImageSource(Visual visual, Size size, double dpiX, double dpiY)
11     {
12         var validSize = size.Width > 0 && size.Height > 0;
13         if (!validSize) throw new ArgumentException($"{nameof(size)}值無效:${size.Width},${size.Height}");
14         if (Math.Abs(size.Width) > 0.0001 && Math.Abs(size.Height) > 0.0001)
15         {
16             RenderTargetBitmap bitmap = new RenderTargetBitmap((int)(size.Width * dpiX), (int)(size.Height * dpiY), dpiX * 96, dpiY * 96, PixelFormats.Pbgra32);
17             bitmap.Render(visual);
18             return bitmap;
19         }
20         return new BitmapImage();
21     }

獲取當前視窗所在螢幕DPI，使用控制元件已經渲染的尺寸，就可以捕獲到指定控制元件的渲染圖片。捕獲到圖片BitmapSource，即可以將點陣圖分配給Image的Source屬性來顯示。

DPI獲取可以參考 C# 獲取當前螢幕DPI - 唐宋元明清2188 - 部落格園 (cnblogs.com)

上面方法獲取的是BitmapSource，BitmapSource是WPF點陣圖的的抽象基類，繼承自ImageSource，因此可以直接用作WPF控制元件如Image的影像源。RenderTargetBitmap以及BitmapImage均是BitmapSource的派生實現類

RenderTargetBitmap此處用於渲染Visual物件生成點陣圖，RenderTargetBitmap它可以用於拼接、合併（上下層疊加）、縮放影像等。BitmapImage主要用於從檔案、URL及流中載入點陣圖。

而捕獲返回的基類BitmapSource可以用於通用點陣圖的一些操作（如渲染、轉成流資料、儲存），BitmapSource如果需要轉成可以支援支援更高層次影像載入功能和延遲載入機制的BitmapImage，可以按如下操作：

 1     /// <summary>
 2     /// WPF點陣圖轉換
 3     /// </summary>
 4     private static BitmapImage ToBitmapImage(BitmapSource bitmap,Size size,double dpiX,double dpiY)
 5     {
 6         MemoryStream memoryStream = new MemoryStream();
 7         BitmapEncoder encoder = new PngBitmapEncoder();
 8         encoder.Frames.Add(BitmapFrame.Create(bitmap));
 9         encoder.Save(memoryStream);
10         memoryStream.Seek(0L, SeekOrigin.Begin);
11 
12         BitmapImage bitmapImage = new BitmapImage();
13         bitmapImage.BeginInit();
14         bitmapImage.DecodePixelWidth = (int)(size.Width * dpiX);
15         bitmapImage.DecodePixelHeight = (int)(size.Height * dpiY);
16         bitmapImage.StreamSource = memoryStream;
17         bitmapImage.EndInit();
18         bitmapImage.Freeze();
19         return bitmapImage;
20     }

這裡選擇了Png編碼器，先將bitmapSource轉換成圖片流，然後再解碼為BitmapImage。

圖片編碼器有很多種用途，上面是將流轉成記憶體流，也可以轉成檔案流儲存本地檔案：

1     var encoder = new PngBitmapEncoder();
2     encoder.Frames.Add(BitmapFrame.Create(bitmapSource));
3     using Stream stream = File.Create(imagePath);
4     encoder.Save(stream);

回到控制元件圖片捕獲，上方操作是在介面控制元件渲染後的場景。如果控制元件未載入，需要更新佈局下：

1     //未載入到視覺樹的，按指定大小布局
2     //按size顯示，如果設計寬高大於size則按sie裁剪，如果設計寬度小於size則按size放大顯示。
3     element.Measure(size);
4     element.Arrange(new Rect(size));

另外也存在場景：控制元件不確定它的具體尺寸，只是想單純捕獲影像，那程式碼整理後如下：

 1     public BitmapSource ToImageSource(Visual visual, Size size = default)
 2     {
 3         if (!(visual is FrameworkElement element))
 4         {
 5             return null;
 6         }
 7         if (!element.IsLoaded)
 8         {
 9             if (size == default)
10             {
11                 //計算元素的渲染尺寸
12                 element.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
13                 element.Arrange(new Rect(new Point(), element.DesiredSize));
14                 size = element.DesiredSize;
15             }
16             else
17             {
18                 //未載入到視覺樹的，按指定大小布局
19                 //按size顯示，如果設計寬高大於size則按sie裁剪，如果設計寬度小於size則按size放大顯示。
20                 element.Measure(size);
21                 element.Arrange(new Rect(size));
22             }
23         }
24         else if (size == default)
25         {
26             Rect rect = VisualTreeHelper.GetDescendantBounds(visual);
27             if (rect.Equals(Rect.Empty))
28             {
29                 return null;
30             }
31             size = rect.Size;
32         }
33 
34         var dpi = GetAppStartDpi();
35         return ToImageSource(visual, size, dpi.X, dpi.Y);
36     }

控制元件未載入時，可以使用DesiredSize來臨時替代操作，這類方案獲取的圖片寬高比例可能不太準確。已載入完的控制元件，可以透過VisualTreeHelper.GetDescendantBounds獲取視覺樹子元素集的座標矩形區域Bounds。

kybs00/VisualImageDemo: RenderTargetBitmap獲取控制元件圖片 (github.com)

所以控制元件轉BitmapSource、儲存等，可以使用RenderTargetBitmap來實現

VisualBrush

如果只是程式內其它介面同步展示此控制元件，就不需要RenderTargetBitmap了，可以直接使用VisualBrush

VisualBrush是非常強大的類，允許使用另一個Visual物件(介面顯示控制元件最底層的UI元素基類)作為畫刷的內容，並將其繪製在其它UI元素上（當然，不是直接掛到其它視覺樹上，WPF也不支援元素同時存在於倆個視覺樹的設計）

具體的可以看下官網VisualBrush 類 (System.Windows.Media) | Microsoft Learn，這裡做一個簡單的DEMO：

 1 <Window x:Class="VisualBrushDemo.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6         xmlns:local="clr-namespace:VisualBrushDemo"
 7         mc:Ignorable="d" Title="MainWindow" Height="450" Width="800">
 8     <Grid>
 9         <Grid.ColumnDefinitions>
10             <ColumnDefinition Width="*"/>
11             <ColumnDefinition Width="10"/>
12             <ColumnDefinition/>
13         </Grid.ColumnDefinitions>
14         <Canvas x:Name="Grid1" Background="BlueViolet">
15             <TextBlock x:Name="TestTextBlock" Text="截圖測試" VerticalAlignment="Center" HorizontalAlignment="Center" 
16                        Width="100" Height="30" Background="Red" TextAlignment="Center" LineHeight="30" Padding="0 6 0 0"
17                        MouseDown="TestTextBlock_OnMouseDown" 
18                        MouseMove="TestTextBlock_OnMouseMove"
19                        MouseUp="TestTextBlock_OnMouseUp"/>
20         </Canvas>
21         <Grid x:Name="Grid2" Grid.Column="2">
22             <Grid.Background>
23                 <VisualBrush Stretch="UniformToFill"
24                              AlignmentX="Center" AlignmentY="Center"
25                              Visual="{Binding ElementName=Grid1}"/>
26             </Grid.Background>
27         </Grid>
28     </Grid>
29 </Window>

CS程式碼：

 1     private bool _isDown;
 2     private Point _relativeToBlockPosition;
 3     private void TestTextBlock_OnMouseDown(object sender, MouseButtonEventArgs e)
 4     {
 5         _isDown = true;
 6         _relativeToBlockPosition = e.MouseDevice.GetPosition(TestTextBlock);
 7         TestTextBlock.CaptureMouse();
 8     }
 9 
10     private void TestTextBlock_OnMouseMove(object sender, MouseEventArgs e)
11     {
12         if (_isDown)
13         {
14             var position = e.MouseDevice.GetPosition(Grid1);
15             Canvas.SetTop(TestTextBlock, position.Y - _relativeToBlockPosition.Y);
16             Canvas.SetLeft(TestTextBlock, position.X - _relativeToBlockPosition.X);
17         }
18     }
19 
20     private void TestTextBlock_OnMouseUp(object sender, MouseButtonEventArgs e)
21     {
22         TestTextBlock.ReleaseMouseCapture();
23         _isDown = false;
24     }

kybs00/VisualImageDemo: RenderTargetBitmap獲取控制元件圖片 (github.com)

左側操作一個控制元件移動，右側區域動態同步顯示左側視覺。VisualBrush.Visual可以直接繫結指定控制元件，一次繫結、後續同步介面變更，延時超低

同步介面變更是如何操作的？下面是部分程式碼，我們看到，VisualBrush內有監聽元素的內容變更，內容變更後VisualBrush也會自動同步DoLayout(element)一次：

 1     // We need 2 ways of initiating layout on the VisualBrush root.
 2     // 1. We add a handler such that when the layout is done for the
 3     // main tree and LayoutUpdated is fired, then we do layout for the
 4     // VisualBrush tree.
 5     // However, this can fail in the case where the main tree is composed
 6     // of just Visuals and never does layout nor fires LayoutUpdated. So
 7     // we also need the following approach.
 8     // 2. We do a BeginInvoke to start layout on the Visual. This approach 
 9     // alone, also falls short in the scenario where if we are already in 
10     // MediaContext.DoWork() then we will do layout (for main tree), then look
11     // at Loaded callbacks, then render, and then finally the Dispather will 
12     // fire us for layout. So during loaded callbacks we would not have done
13     // layout on the VisualBrush tree.
14     //
15     // Depending upon which of the two layout passes comes first, we cancel
16     // the other layout pass.
17     element.LayoutUpdated += OnLayoutUpdated;
18     _DispatcherLayoutResult = Dispatcher.BeginInvoke(
19         DispatcherPriority.Normal,
20         new DispatcherOperationCallback(LayoutCallback),
21         element);
22     _pendingLayout = true;

而顯示繫結元素，VisualBrush內部是透過元素Visual.Render方法將影像給到渲染上下文：

1     RenderContext rc = new RenderContext();
2     rc.Initialize(channel, DUCE.ResourceHandle.Null);
3     vVisual.Render(rc, 0);

其內部是將Visual的快照拿來顯示輸出。VisualBrush基於這種渲染快照的機制，不會影響原始視覺元素在原來視覺樹的位置，所以並不會導致不同視覺樹之間的衝突。

此類VisualBrush方案，適合製作預覽顯示，比如列印預覽、PPT頁面預覽列表等。

下面是我們團隊開發的會議白板-頁面列表預覽效果：

關鍵字：RenderTargetBitmap、VisualBrush、控制元件轉圖片/控制元件截圖

相關文章