如何在设计预览中修复 WPF XAML 边框剪辑屏蔽？答案

【问题标题】：How To Fix WPF XAML Border Clip Masking In Design Preview?如何在设计预览中修复 WPF XAML 边框剪辑屏蔽？
【发布时间】：2022-11-29 11:29:22
【问题描述】：

问题：

在使用 Visual Studio 将 C# 中的一些 WPF 项目更新到更高的目标框架（例如 .NET 4.7）之后，我注意到无论我在 xaml 代码中使用 Border.Clip 的什么地方，它都会“屏蔽”并隐藏设计预览中的所有内容。所有编译和运行都很好，但是在 XAML 中处理代码时，很难看到代码更改的任何视觉反馈，因为剪辑“屏蔽”了以前在旧的 .NET 框架中的所有内容，我从来没有遇到过这个问题。有人可以解释为什么会发生这种情况以及解决方案是什么吗？

这是我在添加 Border.Clip 时在 xaml 文件中看到的示例（同样，编译版本将显示真实元素，它仅在 Visual Studio 的预览中以这种方式出现）

Border.Clip

        <Border.Clip>
            <RectangleGeometry RadiusX="10" RadiusY="10">
                <RectangleGeometry.Rect>
                   ...Some binding for dimensions.
                </RectangleGeometry.Rect>
            </RectangleGeometry>
        </Border.Clip>

` 省略此代码，将在预览中显示所有 UI 元素。

同样，代码是正确的并且在运行时完成它的工作。话虽如此，我已经尝试过省略和非常具体地说明剪辑的任何半径、形状或尺寸，并且两者仍然“掩盖”预览。

例如，只需添加这行代码，就可以屏蔽所有内容。

        <Border.Clip>
        </Border.Clip>

【问题讨论】：

标签： c# wpf visual-studio xaml border

【解决方案1】：

如您所见，我没有遇到您的问题。

我的测试环境在VS 2022 Community 17.4.1.Net Framework 4.8。

可能是你的使用有点问题，参考以下documents.

我的演示代码：

<Grid>
    <Canvas>
        <Image Source="Your path" Height="150" Canvas.Left="148" Canvas.Top="67">
            <Image.Clip>
                <RectangleGeometry Rect="100 75 50 50"/>
            </Image.Clip>
        </Image>
        <Border Background="Chocolate" BorderBrush="Black" BorderThickness="3" Width="300" Height="250" Canvas.Left="387" Canvas.Top="67">
            <Border.Clip>
                <RectangleGeometry Rect="100 75 50 50"/>
            </Border.Clip>
        </Border>
    </Canvas>
</Grid>

【讨论】：