WPF Canvas绘制线条超出区域显示问题求解

嘿，这个问题我太熟悉了！WPF的Canvas控件默认不会自动裁剪超出自身边界的内容，所以你画的线条超出黄色Canvas区域的部分才会一直显示。要实现类似CAD软件只保留画布范围内内容的效果，其实有两种简单直接的方案：

方案一：给Canvas开启裁剪功能 #

这是最直接的解决办法，只需要在你的XAML代码里给Canvas01加上ClipToBounds="True"属性就行。这样Canvas就会自动把超出自身范围的内容给裁掉。

修改后的Canvas片段：

<Canvas x:Name="Canvas01" ClipToBounds="True">
    <Canvas.Background>
        <SolidColorBrush Color="Black" Opacity="0.15"/>
    </Canvas.Background>
</Canvas>

方案二：给父容器Border设置裁剪（适配更灵活的范围） #

如果你希望裁剪范围和外层的Border保持一致，也可以把ClipToBounds="True"加在CanvasBorder上。因为Canvas是Border的子元素，Border开启裁剪后，子元素超出Border范围的部分同样会被隐藏：

<Border x:Name="CanvasBorder" BorderThickness="5" BorderBrush="Black" ClipToBounds="True">
    <Canvas x:Name="Canvas01">
        <Canvas.Background>
            <SolidColorBrush Color="Black" Opacity="0.15"/>
        </Canvas.Background>
    </Canvas>
</Border>

为啥会这样？ #

给你简单解释下：WPF里大部分布局控件（比如Grid、StackPanel）默认的ClipToBounds属性都是False，Canvas也不例外。这个属性决定了控件是否会裁剪超出自身边界的子元素内容。当你把它设为True时，控件会根据自己的边界生成一个裁剪区域，所有超出这个区域的部分都会被隐藏，正好符合你要的效果。

测试你的代码 #

用你现有的C#代码测试一下，开启裁剪后，那条X2=600、Y2=-200的线条只会在黄色Canvas区域内显示，超出的部分会被自动裁掉，完全不会影响窗体其他区域的按钮、标签等控件。

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