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

您可以在内部画布上使用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>

如何在WPF中剪切边框外的所有内容？

1 个答案: