如何在wpf中创建切角

Question

我有一些代码

                <Border BorderBrush="Black"  BorderThickness="1" CornerRadius="8" Margin="0,0,5,0">
                    <!--Background="#FDFFC1"-->
                    <Border.Background>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                            <GradientStop Color="#FFFFFFFD" />
                            <GradientStop Color="#FEFD9A" Offset="1" />
                        </LinearGradientBrush>
                    </Border.Background>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Border Grid.Row="0"  CornerRadius="10,10,0,0" Height="22" VerticalAlignment="Top">
                            <Label Foreground="Black" FontSize="10"  Margin="5,0,0,0" HorizontalAlignment="Left" 
                                   VerticalAlignment="Center" Content="Text" />
                        </Border>
                        <Grid Grid.Row="1">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="5*"/>
                            </Grid.ColumnDefinitions>
                            <Border Grid.Column="0" Margin="5,2,0,2">
                                <Image x:Name="tooltipImage" Width="18" Height="18"                                       
                                   Source=""
                                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                            <Border Grid.Column="1" Margin="5,5,5,5">
                                <TextBlock
                                   Foreground="Black"
                                   Text="Test" FontSize="10"
                                   VerticalAlignment="Center" xml:space="preserve"
                                   HorizontalAlignment="Center"
                                   TextAlignment="Justify" MaxWidth="200"
                                   TextWrapping="Wrap"/>
                            </Border>

对于这个边框，我希望它的右下角就像是用剪刀剪下来的或像一张被剪下来的纸。我想我需要使用路径或一些几何图形，但我不知道具体如何使用。

提前致谢 ！

Answer 1

您可以像这样使用边框的 Clip 属性：

<Border BorderBrush="Black"
        BorderThickness="1"
        CornerRadius="8"
        Margin="0,0,5,0">
    <Border.Clip>
        <PathGeometry>
            <PathFigure StartPoint="0,0">
                <LineSegment Point="70,0" />
                <LineSegment Point="70,20" />
                <LineSegment Point="50,50" />
                <LineSegment Point="0,70" />
            </PathFigure>
        </PathGeometry>
    </Border.Clip>

不幸的是，必须给出点的坐标，并且它们的大小不会随边框变化。为了克服这个问题，您可能需要向 Border 添加一个 SizeChanged 事件处理程序，如下所示：

<Border BorderBrush="Black"
        BorderThickness="1"
        CornerRadius="8"
        Margin="0,0,5,0" SizeChanged="Border_SizeChanged" >
    <Border.Clip>
        <PathGeometry>
            <PathFigure x:Name="BorderClipFigure" StartPoint="0,0">
                <LineSegment Point="70,0" />
                <LineSegment Point="70,20" />
                <LineSegment Point="50,50" />
                <LineSegment Point="0,70" />
            </PathFigure>
        </PathGeometry>
    </Border.Clip>

并在处理程序中编写代码，使用 Border 的大小来修改 PathFigure 的点：

private void Border_SizeChanged(object sender, SizeChangedEventArgs e)
{
    double cutOff = 20;
    var line = BorderClipFigure.Segments[0] as LineSegment;
    line.Point = new Point(e.NewSize.Width, 0);

    line = BorderClipFigure.Segments[1] as LineSegment;
    line.Point = new Point(e.NewSize.Width, e.NewSize.Height - cutOff);

    line = BorderClipFigure.Segments[2] as LineSegment;
    line.Point = new Point(e.NewSize.Width - cutOff, e.NewSize.Height);

    line = BorderClipFigure.Segments[3] as LineSegment;
    line.Point = new Point(0, e.NewSize.Height);
}