How do I create a WPF rounded container that clips children?

问题

The following piece of code is supposed to draw a menu bar inside a rounded container. You'll notice that the bottom is rounded, but the corners of the menu aren't. I followed the directions of chosen answer because it appeared to be the most efficient:

How do I create a WPF Rounded Corner container?

For the record, I am running .NET 4.5 with the latest version of WPF. Here's my code:

<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>

EDIT: There's another answer on the same post suggesting a more complex solution suggested by Chris Cavanagh. His solution isn't as simple or as fast, but it does clip the corners which is what I want. The question didn't specify clipping and the suggested answer didn't either. Hopefully, the question and or answer will be updated to reflect this.

回答1:

Chris Cavanagh has a blog post about rounding controls. It should help you achieve what you want.

Edit: Below is the code from that blog.

<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>

All it does is include a ‘mask’ Border element as a sibling of the content you want to clip. In the content it uses a VisualBrush bound to that mask. The mask will be automatically sized to your content, so it’s a nice "set and forget" solution

来源：https://stackoverflow.com/questions/14825436/how-do-i-create-a-wpf-rounded-container-that-clips-children

标签

wpf

rounded-corners