dotnet 讀 WPF 源代碼筆記 布局時 Arrange 如何影響元素渲染坐標

大家是否好奇，在 WPF 里面，對 UIElement 重寫 OnRender 方法進行渲染的內容，是如何受到上層容器控制元件的布局而進行坐標偏移，如有兩個放入到 StackPanel 的自定義 UIElement 控制元件，這兩個控制元件都在 OnRender 方法里面，畫出一條從 0 到 100 的線段，此時兩個控制元件畫出的直線在視窗里面沒有重疊，也就是說在 OnRender 里面繪制的內容將會疊加上元素被布局控制元件布局的偏移的值

閱讀本文，你將了解布局控制元件是如何影響到里層控制元件的渲染，以及渲染收集程序中將會如何受到元素坐標的影響

如本文開始的問題，如有兩個自定義的 UIElement 控制元件放到 StackPanel 里面，盡管這兩個自定義的 UIElement 使用相同的代碼繪制線段，然而在界面呈現的效果不相同，接下來本文將告訴大家在 WPF 框架是如何在布局時影響元素渲染坐標

在 WPF 里面，最底層的界面元素是 Visual 類，在此型別上包含了一個 protected internal 訪問權限的 VisualOffset 屬性，大概定義如下

protected internal Vector VisualOffset { set; get; }

當然了，在 WPF 框架里面，在 VisualOffset 屬性的 set 方法上是有很多代碼的，不過這里面代碼不是本文的主角，還請大家忽略

此 VisualOffset 屬性就是容器控制元件布局的時候，將會設定元素的偏移的關鍵屬性，盡管此屬性是沒有公開的，但是咱可以通過 VisualTreeHelper 的 GetOffset 方法獲取到此屬性的值，因為 GetOffset 方法的代碼如下

    public static class VisualTreeHelper
    {
        /// <summary>
        /// Returns the offset of the Visual.
        /// </summary>
        public static Vector GetOffset(Visual reference)
        {
            return reference.VisualOffset;
        }
    }

在 UIElement 的 Arrange 方法里面，大家都知道此方法就是用來布局當前控制元件的，傳入的引數就是 Rect 包含了坐標和尺寸，而傳入的坐標將會在 UIElement 上被設定到 VisualOffset 屬性里面，從而實作在布局時修改元素的偏移量

大概代碼如下

    public partial class UIElement : Visual, IInputElement, IAnimatable
    {
        public void Arrange(Rect finalRect)
        {
        	// 忽略很多代碼
        	ArrangeCore(finalRect);
        }

        protected virtual void ArrangeCore(Rect finalRect)
        {
            VisualOffset = new Vector(finalRect.X, finalRect.Y);
        }
    }

通過以上代碼可以了解到，實際上的元素的偏移量僅僅只是相對于上層的元素而已，也就是說 VisualOffset 存放的值是相對于上層容器的偏移量，而不是相對于視窗的偏移量

那么此屬性是如何影響到元素的渲染的？在 Visual 型別里面，包含了 Render 方法，這就是 Visual 在渲染收集時進入的方法，需要知道的是，呼叫 Visual 的 Render 方法和 UIElement 的 OnRender 方法是沒有直接聯系的哦

在開始之前，先來聊聊 Visual 的 Render 方法和 UIElement 的 OnRender 方法，在 UIElement 里面，將會在 Arrange 里面，呼叫 OnRender 方法收集渲染的指令

    public partial class UIElement : Visual, IInputElement, IAnimatable
    {
        public void Arrange(Rect finalRect)
        {
        	// 忽略很多代碼
        	DrawingContext dc = RenderOpen();
        	OnRender(dc);
        }

        protected virtual void OnRender(DrawingContext drawingContext)
        {
        }

        internal DrawingContext RenderOpen()
        {
            return new VisualDrawingContext(this);
        }
    }

而 Visual 的 Render 方法的呼叫堆疊是大概如下

 	PresentationCore.dll!System.Windows.Media.Visual.Render(System.Windows.Media.RenderContext ctx = {System.Windows.Media.RenderContext}, uint childIndex = 0) 行 1169	C#
 	PresentationCore.dll!System.Windows.Media.CompositionTarget.Compile(System.Windows.Media.Composition.DUCE.Channel channel) 行 465	C#
 	PresentationCore.dll!System.Windows.Media.CompositionTarget.System.Windows.Media.ICompositionTarget.Render(bool inResize, System.Windows.Media.Composition.DUCE.Channel channel) 行 346	C#
 	PresentationCore.dll!System.Windows.Media.MediaContext.Render(System.Windows.Media.ICompositionTarget resizedCompositionTarget = null) 行 2077	C#

依然入口在 MediaContext 的 Render 方法里面，在這里面將會呼叫到 Visual 的 Render 方法，此時的 Visual 的第一層就是 RootVisual 然后由 Visual 的 RenderRecursive 方法進行遞回呼叫，讓可視化樹上的所有 Visual 進行收集渲染

關于 MediaContext 的 Render 方法的呼叫，請看 dotnet 讀 WPF 源代碼筆記 渲染收集是如何觸發

在 Visual 的 RenderRecursive 方法里面將會更新當前 Visual 層的偏移量，如下面代碼

        internal void Render(RenderContext ctx, UInt32 childIndex)
        {
            DUCE.Channel channel = ctx.Channel;
            // 在 WPF 里面，不是所有的 Visual 都需要重繪，只有在 Visual 存在變更的時候，影響到渲染才會重新收集
            if (CheckFlagsAnd(channel, VisualProxyFlags.IsSubtreeDirtyForRender)
                || !IsOnChannel(channel))
            {
                RenderRecursive(ctx);
            }
            
            // 忽略代碼
        }

        internal virtual void RenderRecursive(
            RenderContext ctx)
        {
                    DUCE.Channel channel = ctx.Channel;
                    DUCE.ResourceHandle handle = DUCE.ResourceHandle.Null;
                    VisualProxyFlags flags = VisualProxyFlags.None;

                    bool isOnChannel = IsOnChannel(channel);

                    UpdateCacheMode(channel, handle, flags, isOnChannel);
                    UpdateTransform(channel, handle, flags, isOnChannel);
                    UpdateClip(channel, handle, flags, isOnChannel);
                    UpdateOffset(channel, handle, flags, isOnChannel);
                    UpdateEffect(channel, handle, flags, isOnChannel);
                    UpdateGuidelines(channel, handle, flags, isOnChannel);
                    UpdateContent(ctx, flags, isOnChannel);
                    UpdateOpacity(channel, handle, flags, isOnChannel);
                    UpdateOpacityMask(channel, handle, flags, isOnChannel);
                    UpdateRenderOptions(channel, handle, flags, isOnChannel);
                    UpdateChildren(ctx, handle);
                    UpdateScrollableAreaClip(channel, handle, flags, isOnChannel);
        }

        private void UpdateChildren(RenderContext ctx,
                                    DUCE.ResourceHandle handle)
        {
        	// 遞回渲染所有元素
            for (int i = 0; i < childCount; i++)
            {
                Visual child = GetVisualChild(i);
                if (child != null)
                {
                    //
                    // Recurse if the child visual is dirty
                    // or it has not been marshalled yet.
                    //
                    if (child.CheckFlagsAnd(channel, VisualProxyFlags.IsSubtreeDirtyForRender)
                        || !(child.IsOnChannel(channel)))
                    {
                        child.RenderRecursive(ctx);
                    }
                }
            }
        }

        private void UpdateOffset(DUCE.Channel channel,
                                  DUCE.ResourceHandle handle,
                                  VisualProxyFlags flags,
                                  bool isOnChannel)
        {
            if ((flags & VisualProxyFlags.IsOffsetDirty) != 0)
            {
                if (isOnChannel || _offset != new Vector())
                {
                    //
                    // Offset is (0, 0) by default so do not update it for new visuals.
                    //

                    DUCE.CompositionNode.SetOffset(
                        handle,
                        _offset.X,
                        _offset.Y,
                        channel);
                }
                SetFlags(channel, false, VisualProxyFlags.IsOffsetDirty);
            }
        }

通過上面代碼可以看到，在 WPF 里面，不是所有的 Visual 都會在每次更新界面時，需要重新收集渲染資訊，只有被標記了 IsSubtreeDirtyForRender 的 Visual 才會重新收集渲染資訊，在 UpdateChildren 方法里面將會遞回重繪所有的元素

在 UpdateOffset 方法將會用上 _offset 欄位，也就是 VisualOffset 屬性的欄位，相當于就在這里獲取 VisualOffset 的值，通過上面邏輯了解到元素的偏移量影響到元素的渲染核心就是通過在 Visual 的 UpdateOffset 方法將元素的偏移量通過 DUCE.CompositionNode.SetOffset 方法傳入到 WPF_GFX 層，也就是實際的渲染控制層

這里面的 CompositionNode 的 SetOffset 方法代碼如下

            internal static void SetOffset(
                DUCE.ResourceHandle hCompositionNode,
                double offsetX,
                double offsetY,
                Channel channel)
            {
                DUCE.MILCMD_VISUAL_SETOFFSET command;
                command.Type = MILCMD.MilCmdVisualSetOffset;
                command.Handle = hCompositionNode;
                command.offsetX = offsetX;
                command.offsetY = offsetY;

                unsafe
                {
                    channel.SendCommand(
                        (byte*)&command,
                        sizeof(DUCE.MILCMD_VISUAL_SETOFFSET)
                        );
                }
            }

實際是呼叫到 MIL 層的邏輯，以上代碼的 hCompositionNode 表示的是在 MIL 層代表此 Visual 的指標，對應的引數將會在 MIL 層進行讀取使用，也就是說在 MIL 層將會記錄當前元素的偏移量，從而在渲染收集程序，自動給收集到的繪制指令疊加元素偏移量

在 MIL 層將會根據 command.Type = MILCMD.MilCmdVisualSetOffset; 通過一個很大的 switch 陳述句，進入到大概如下代碼

    case MilCmdVisualSetOffset:
    {
        #ifdef DEBUG
        if (cbSize != sizeof(MILCMD_VISUAL_SETOFFSET))
        {
            IFC(WGXERR_UCE_MALFORMEDPACKET);
        }
        #endif

        const MILCMD_VISUAL_SETOFFSET* pCmd = 
            reinterpret_cast<const MILCMD_VISUAL_SETOFFSET*>(pcvData);

        CMilVisual* pResource =
            static_cast<CMilVisual*>(pHandleTable->GetResource(
                pCmd->Handle,
                TYPE_VISUAL
                ));

        if (pResource == NULL)
        {
            RIP("Invalid resource handle.");
            IFC(WGXERR_UCE_MALFORMEDPACKET);
        }


        IFC(pResource->ProcessSetOffset(pHandleTable, pCmd));
    }
    break;

以上代碼的核心是呼叫 pResource->ProcessSetOffset(pHandleTable, pCmd) 方法，而 IFC 只是一個宏而已，用來判斷方法回傳值的 HResult 是否成功

這里的 ProcessSetOffset 方法的實作代碼大概如下

HRESULT
CMilVisual::ProcessSetOffset(
    __in_ecount(1) CMilSlaveHandleTable* pHandleTable,
    __in_ecount(1) const MILCMD_VISUAL_SETOFFSET* pCmd
    )
{
    // The packet contains doubles. Should they be floats? Why are we using doubles in managed
    // but run the compositor in floats?
    float offsetX = (float)pCmd->offsetX;
    float offsetY = (float)pCmd->offsetY;

    SetOffset(offsetX, offsetY);         

    return S_OK;
}

void
CMilVisual::SetOffset(
    float offsetX,
    float offsetY
    )
{
    	// 忽略代碼
        m_offsetX = offsetX;
        m_offsetY = offsetY;
}

    float m_offsetX;
    float m_offsetY;

以上代碼也提了一個問題，為什么在托管層使用的是 double 型別，而在這里使用的 float 型別，我在 GitHub 上嘗試去問問大佬們，這個是否有特別的原因，請看 Why the Visual.VisualOffset is double type but run the compositor in floats? · Issue #5389 · dotnet/wpf

太子爺： 為什么在托管層使用的是 double 而在 MIL 層使用的是 float 型別？原因是在托管層將會用到大量的計算，此時如果使用 float 將會因為精度問題而偏差較大，如疊加很多層的布局，但是在 MIL 層面，這是在做最終的渲染，此時使用 float 可以更好的利用顯卡的計算資源，因為顯卡層面對 float 的計算效率將會更高，而在這一層是最終渲染，不怕丟失精度

在 WPF 框架，將會在元素布局的時候，也就是 UIElement 的 Arrange 方法里面，設定 Visual 的 VisualOffset 屬性用于設定元素的偏移量，此元素偏移量是元素相對于上層容器的偏移量，此偏移量將會影響元素渲染收集程序中的繪制坐標，渲染收集里面，在 UIElement 的 OnRender 方法和 Visual 的 Render 方法之間不是順序呼叫關系，而是兩段不同的呼叫關系

將會在 UIElement 的布局的時候，從 Arrange 呼叫到 OnRender 方法，此方法是給開發者進行重寫的，繪制開發者業務上的界面使用，此程序將是作為開發者繪制內容的渲染收集，此程序可以不在 WPF 渲染訊息觸發時被觸發，可以由開發者端發起，在 WPF 的渲染訊息進入時，將會到達 MediaContext 的 Render 方法，此方法將會層層呼叫進入 Visual 的 Render 方法，在此 Render 方法將會遞回可視化樹的元素進行收集渲染指令，這是應用的渲染收集程序

在 Visual 的 Render 方法里面，將會傳輸 VisualOffset 的資料到 MIL 層，由底層控制渲染的 MIL 層使用此屬性決定渲染命令的偏移量

當前的 WPF 在 https://github.com/dotnet/wpf 完全開源，使用友好的 MIT 協議，意味著允許任何人任何組織和企業任意處置，包括使用，復制，修改，合并，發表，分發，再授權，或者銷售，在倉庫里面包含了完全的構建邏輯，只需要本地的網路足夠好（因為需要下載一堆構建工具），即可進行本地構建

更多渲染相關博客請看 渲染相關

博客園博客只做備份，博客發布就不再更新，如果想看最新博客，請到 https://blog.lindexi.com/

標籤：.NET技术

上一篇：混合型備份和版本控制工具(Altaro Oops!Backup)軟體特性

下一篇：dotnet 讀 WPF 源代碼筆記 布局時 Arrange 如何影響元素渲染坐標