如何在 WPF 中剪辑边框之外的所有内容？答案

【问题标题】：How can I clip everything outside of a border in WPF?如何在 WPF 中剪辑边框之外的所有内容？
【发布时间】：2014-05-04 05:01:01
【问题描述】：

我正在尝试在 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>

【问题讨论】：

设置ClipToBounds为true有什么影响？

标签： c# wpf

【解决方案1】：

您可以在内部 Canvas 上使用 OpacityMask 使边缘看起来透明

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

【讨论】：