如何为含可交互图形的Root Canvas设置包围所有图形的背景矩形？

当然可行！而且完全不用手动硬设Width/Height，我们可以通过动态计算所有子图形的联合边界，让Canvas的背景自动贴合这个范围。给你两种实用的实现思路：

方法一：用底层Rectangle作为动态背景 #

这种方式直观易懂，适合需要给背景加边框、渐变效果的场景：

1. 先在XAML里给Root Canvas加一个背景矩形 #

把它放在最底层（设置Canvas.ZIndex="-1"），确保不会遮挡其他图形：

<Canvas x:Name="RootCanvas">
    <!-- 背景矩形，默认隐藏 -->
    <Rectangle x:Name="BackgroundRect" 
               Fill="#F0F0F0" 
               Stroke="#CCCCCC"
               StrokeThickness="1"
               Canvas.ZIndex="-1"
               Visibility="Collapsed"/>
    <!-- 你的其他图形元素都会放在这里 -->
</Canvas>

2. 后台代码动态计算边界并更新背景 #

我们需要监听Canvas子元素的变化、子元素的尺寸变化、以及子元素的变换（平移/缩放），每次变化时重新计算所有图形的总边界，然后调整背景矩形的位置和大小：

public YourUserControl()
{
    InitializeComponent();
    // 监听子元素集合的增删
    RootCanvas.Children.CollectionChanged += Children_CollectionChanged;
    // 初始加载时计算一次
    UpdateBackgroundBounds();
}

private void Children_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
    // 给新增的子元素绑定监听事件
    if (e.NewItems != null)
    {
        foreach (UIElement child in e.NewItems)
        {
            child.SizeChanged += Child_LayoutChanged;
            child.RenderTransformChanged += Child_LayoutChanged;
        }
    }
    // 给移除的子元素解绑事件
    if (e.OldItems != null)
    {
        foreach (UIElement child in e.OldItems)
        {
            child.SizeChanged -= Child_LayoutChanged;
            child.RenderTransformChanged -= Child_LayoutChanged;
        }
    }
    UpdateBackgroundBounds();
}

// 子元素尺寸或变换改变时触发
private void Child_LayoutChanged(object sender, EventArgs e)
{
    UpdateBackgroundBounds();
}

// 核心：计算所有子图形的联合边界
private void UpdateBackgroundBounds()
{
    var totalBounds = GetTotalChildBounds(RootCanvas);
    if (totalBounds == Rect.Empty)
    {
        BackgroundRect.Visibility = Visibility.Collapsed;
        return;
    }

    BackgroundRect.Visibility = Visibility.Visible;
    // 把背景矩形定位到总边界的位置，尺寸匹配总边界
    Canvas.SetLeft(BackgroundRect, totalBounds.Left);
    Canvas.SetTop(BackgroundRect, totalBounds.Top);
    BackgroundRect.Width = totalBounds.Width;
    BackgroundRect.Height = totalBounds.Height;
}

private Rect GetTotalChildBounds(Canvas canvas)
{
    if (canvas.Children.Count == 0)
        return Rect.Empty;

    var totalBounds = new Rect();
    foreach (UIElement child in canvas.Children)
    {
        // 跳过背景矩形本身
        if (child == BackgroundRect)
            continue;
        // 获取子元素的完整视觉边界（包括它的子控件）
        var childVisualBounds = VisualTreeHelper.GetDescendantBounds(child);
        // 转换到Canvas坐标系下的边界（处理子元素的平移/缩放变换）
        var transformedBounds = child.TransformToAncestor(canvas).TransformBounds(childVisualBounds);
        // 合并边界
        totalBounds.Union(transformedBounds);
    }
    return totalBounds;
}

方法二：用DrawingBrush直接绘制背景 #

如果不需要额外的背景元素，可以直接给Canvas的Background赋值一个动态生成的DrawingBrush，更轻量化：

后台代码实现 #

public YourUserControl()
{
    InitializeComponent();
    RootCanvas.Children.CollectionChanged += Children_CollectionChanged;
    UpdateCanvasBackground();
}

private void Children_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
    if (e.NewItems != null)
    {
        foreach (UIElement child in e.NewItems)
        {
            child.SizeChanged += Child_LayoutChanged;
            child.RenderTransformChanged += Child_LayoutChanged;
        }
    }
    if (e.OldItems != null)
    {
        foreach (UIElement child in e.OldItems)
        {
            child.SizeChanged -= Child_LayoutChanged;
            child.RenderTransformChanged -= Child_LayoutChanged;
        }
    }
    UpdateCanvasBackground();
}

private void Child_LayoutChanged(object sender, EventArgs e)
{
    UpdateCanvasBackground();
}

private void UpdateCanvasBackground()
{
    var totalBounds = GetTotalChildBounds(RootCanvas);
    if (totalBounds == Rect.Empty)
    {
        RootCanvas.Background = null;
        return;
    }

    // 生成一个匹配总边界的矩形绘图
    var backgroundDrawing = new GeometryDrawing(
        new SolidColorBrush(Colors.LightGray), // 填充色
        new Pen(Colors.DarkGray, 1), // 边框
        new RectangleGeometry(totalBounds));

    RootCanvas.Background = new DrawingBrush(backgroundDrawing);
}

// 复用之前的GetTotalChildBounds方法
private Rect GetTotalChildBounds(Canvas canvas)
{
    // 和方法一中的实现完全一致
    if (canvas.Children.Count == 0)
        return Rect.Empty;

    var totalBounds = new Rect();
    foreach (UIElement child in canvas.Children)
    {
        var childVisualBounds = VisualTreeHelper.GetDescendantBounds(child);
        var transformedBounds = child.TransformToAncestor(canvas).TransformBounds(childVisualBounds);
        totalBounds.Union(transformedBounds);
    }
    return totalBounds;
}

关键注意点 #

• 一定要用VisualTreeHelper.GetDescendantBounds获取子元素的完整视觉边界，而不是直接用ActualWidth/ActualHeight，这样能包含子元素内部的所有控件。
• 通过TransformToAncestor转换坐标系，确保子元素的RenderTransform（平移、缩放）会被正确计算到总边界里。
• 两种方案都会随着子元素的增删、变换自动更新背景，完全不需要手动维护Canvas的尺寸。

内容的提问来源于stack exchange，提问作者oliver