大家是否好奇，在 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 協議，意味着允許任何人任何組織和企業任意處置，包括使用，復制，修改，合並，發表，分發，再授權，或者銷售。在倉庫里面包含了完全的構建邏輯，只需要本地的網絡足夠好（因為需要下載一堆構建工具），即可進行本地構建
更多渲染相關博客請看 渲染相關