如何创建剪辑儿童的 WPF 圆形容器？答案

【问题标题】：How do I create a WPF rounded container that clips children?如何创建剪辑儿童的 WPF 圆形容器？
【发布时间】：2013-01-27 08:08:51
【问题描述】：

下面的代码应该在一个圆形容器内绘制一个菜单栏。您会注意到底部是圆形的，但菜单的角不是。我按照所选答案的指示进行操作，因为它似乎是最有效的：

How do I create a WPF Rounded Corner container?

作为记录，我正在使用最新版本的 WPF 运行 .NET 4.5。这是我的代码：

<Window
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="240" Height="320" Background="Black" >
      <Border BorderBrush="Red" CornerRadius="10" BorderThickness="1" Background="Gray" >
         <StackPanel>
          <Menu IsMainMenu="True" HorizontalAlignment="Stretch" >
                        <MenuItem Header="_File" />
                        <MenuItem Header="_Edit" />
                        <MenuItem Header="_View" />
                        <MenuItem Header="_Window" />
                        <MenuItem Header="_Help" />
                    </Menu>

         </StackPanel>
      </Border>
</Window>

编辑： 同一篇文章还有另一个答案，暗示了 Chris Cavanagh 提出的更复杂的解决方案。他的解决方案不是那么简单或那么快，但它确实剪裁了我想要的角落。该问题没有指定剪辑，建议的答案也没有。希望问题和/或答案会更新以反映这一点。

【问题讨论】：

标签： wpf rounded-corners

【解决方案1】：

Chris Cavanagh 有一个关于舍入控制的blog post。它应该可以帮助你实现你想要的。

编辑： 以下是该博客的代码。

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="Black">
    <!-- Rounded yellow border -->
    <Border BorderThickness="3" BorderBrush="Yellow" CornerRadius="10" Padding="2" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Grid>
            <!-- Rounded mask (stretches to fill Grid) -->
            <Border Name="mask" Background="White" CornerRadius="7"/>
            <!-- Main content container -->
            <StackPanel>
                <!-- Use a VisualBrush of 'mask' as the opacity mask -->
                <StackPanel.OpacityMask>
                    <VisualBrush Visual="{Binding ElementName=mask}"/>
                </StackPanel.OpacityMask>
                <!-- Any content -->
                <Image Source="https://chriscavanagh.files.wordpress.com/2006/12/chriss-blog-banner.jpg"/>
                <Rectangle Height="50" Fill="Red"/>
                <Rectangle Height="50" Fill="White"/>
                <Rectangle Height="50" Fill="Blue"/>
            </StackPanel>
        </Grid>
    </Border>
</Page>

它所做的只是包含一个“掩码”边框元素作为您要剪辑的内容的同级元素。在内容中，它使用绑定到该蒙版的 VisualBrush。蒙版会根据您的内容自动调整大小，因此这是一个很好的“设置后忘记”解决方案

【讨论】：

这是我能找到的最好的解决方案。谢谢！