如何在WPF中裁剪边框以外的所有内容?

Question

我试图在WPF中制作一个顶部边缘圆润的表单。我已经成功地完成了这部分，尽管我在表单上有一个画布作为标题，并且它里面的背景图像覆盖了我的边界的圆形边缘。如果它超出了边界有没有办法从画布上剪掉边缘?我试着将边界发送到后面，并将每个元素设置为剪辑，尽管这不起作用。如果我把边框设置在前面那么边框就会在上面。有人能帮忙吗?

这是我如何创建圆角的形式-

<Border BorderBrush="Silver" BorderThickness="1" Height="645" HorizontalAlignment="Left" Name="mainBorder" VerticalAlignment="Top" Width="867" CornerRadius="10, 10, 0, 0" SnapsToDevicePixels="False" UseLayoutRounding="False" ClipToBounds="False" Background="{StaticResource FormGradient}">
            <Canvas Height="43" Name="canvas1" Width="794" VerticalAlignment="Center" Margin="0,0,0,320">
                <Canvas.Background>
                    <ImageBrush ImageSource="/WPFPROJECT;component/Images/canvas-nav-bar.png" Stretch="None" TileMode="Tile" Viewport="0,0,106,92" ViewportUnits="Absolute" />
                </Canvas.Background>
                <Rectangle Canvas.Left="-36.5" Canvas.Top="-25" Height="11" Name="headercanvasFooter" Stroke="{x:Null}" Width="867" Fill="White"></Rectangle>
            </Canvas>
        </Border>
        <Canvas Height="118" HorizontalAlignment="Left" Name="headerCanvas" VerticalAlignment="Top" Width="867" ClipToBounds="True" DataContext="{Binding}" IsItemsHost="False">
            <Canvas.Background>
                <ImageBrush ImageSource="/WPFPROJECT;component/Images/Ps-HeaderSlice.png" Stretch="Fill" TileMode="Tile" Viewport="0,0,27,158" ViewportUnits="Absolute" />
            </Canvas.Background>
            <Image Canvas.Left="698" Canvas.Top="6" Height="64" Name="headerLogo" Stretch="None" Width="163" Source="/WPFPROJECT;component/Images/WPFPROJECTImage.png" HorizontalAlignment="Center" IsHitTestVisible="False" StretchDirection="Both" VerticalAlignment="Center" Visibility="Visible" SnapsToDevicePixels="False" UseLayoutRounding="True" IsManipulationEnabled="False" ClipToBounds="False" />
        </Canvas>

Answer 1

你可以在你的内部画布上使用不透明面具，使边缘看起来是透明的

<Border x:Name="border" CornerRadius="20" BorderThickness="1" BorderBrush="Black" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Canvas Background="Red" Width="50" Height="50" Opacity="0.5">
        <Canvas.OpacityMask>
            <VisualBrush>
                <VisualBrush.Visual>
                    <Rectangle Fill="Black" Stroke="Black" StrokeThickness="1" RadiusX="20" RadiusY="20" 
                            Width="{Binding ActualWidth, ElementName=border}" Height="{Binding ActualHeight, ElementName=border}"/>
                </VisualBrush.Visual>
            </VisualBrush>
        </Canvas.OpacityMask>
    </Canvas>
</Border>