如何正确绘制 Canvas 作为 WPF 背景并将其缩放到控件？答案

【问题标题】：How do I properly draw and scale a Canvas as a WPF background to a control?如何正确绘制 Canvas 作为 WPF 背景并将其缩放到控件？
【发布时间】：2017-09-12 11:47:12
【问题描述】：

我有一个需要包含绘制背景的StackPanel。具体来说，我的StackPanel 需要具有增长能力，并且矩形必须与StackPanel 一起增长，但必须在固定位置保持伪锚定到每一侧。

我尝试使用 Canvas.Left、Canvas.Right、Canvas.Top 和 Canvas.Bottom 附加属性，但到目前为止它们还没有工作。此外，当在 Canvas 对象中绘图时，这似乎确实有效，只是当它们嵌入到作为背景的 VisualBrush 中时无效。如何在我的StackPanel 中绘制这个可调整大小的矩形背景？

以下是我当前代码的状态。我尝试了各种方法，但似乎都没有奏效。

我的代码：

<StackPanel DockPanel.Dock="Right" Orientation="Vertical" VerticalAlignment="Center">
    <StackPanel.Background>
        <VisualBrush Stretch="None">
            <VisualBrush.Visual> 
                <Canvas Background="Magenta" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    Rectangle Fill="#FFDDECF7" Canvas.Left="20" Canvas.Top="20" Canvas.Bottom="20" Canvas.Right="0"/>
                </Canvas>
            </VisualBrush.Visual>
        </VisualBrush>
    </StackPanel.Background>
    ...
</StackPanel>

这目前不渲染任何东西。我将画布背景设置为洋红色，这样我就可以看到它是否正在绘图，而我什至没有看到它。其他尝试绘制了画布，但是，无论附加的画布属性设置如何，蓝色矩形总是被拉伸以填充窗口。

示例：

下面的图片是我想要的示例。同样，我使用难看的洋红色来显示内部蓝色矩形的偏移量。随着 StackPanel 的增长或缩小，矩形需要贴在顶部、左侧、右侧和底部。

【问题讨论】：

标签： wpf xaml

【解决方案1】：

我的建议是将堆栈面板放在网格内：

<Grid DockPanel.Dock="Right" VerticalAlignment="Center" Background="Magenta">
    <Rectangle Margin="20" Fill="#FFDDECF7"/>
    <StackPanel Orientation="Vertical">
        no background...
    </StackPanel>

</Grid>

【讨论】：

我实际上会将Rectangle 替换为Border 标签。如果您只需要设置背景颜色，您甚至不需要，只需设置Grid 的Background 属性即可。
是的，我只是在想……但这一切都取决于矩形和堆栈面板内容的相对位置……如果堆栈面板内容应该泄漏到矩形边距之外，那么使用换行边框开始烂了。
是的，完全公开，StackPanel 包含按钮。这些图像是图像。否则他们没有什么特别的。设计师只希望菱形按钮后面有一个完美对齐的矩形。
@RLH 好的，所以......我的方法有什么问题吗？我认为它应该按预期工作，除非问题不在于 WPF 而更多在于设计师：P

【解决方案2】：

将Canvas 包装成ViewBox，然后处理ViewBox。据我所知Canvas 不太支持缩放。

【讨论】：

感谢您的回答，但我仍然不确定这是否能正常工作。如果 StackPanel 垂直和水平缩放，所有区域都会缩放，并且矩形不会保持“锚定”。不过，我很感激这个提议。
您确定必须使用 Canvas 吗？如果只需要设置背景颜色，还有更简单的方法来实现。