wpf - 标签形边框需要剪裁

Question

我有一个包含三列的应用程序规范，其中中央一列弯曲成倒标签形状。

我已经弄清楚了基础知识:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="371*"></ColumnDefinition>
        <ColumnDefinition Width="469*"></ColumnDefinition>
        <ColumnDefinition Width="371*"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <Grid Grid.Column="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="83*"></RowDefinition>
            <RowDefinition Height="309*"></RowDefinition>
            <RowDefinition Height="223*"></RowDefinition>
            <RowDefinition Height="67*"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBox Background="Transparent" Grid.Row="0"
                 Text="Foo" HorizontalAlignment="Center" VerticalAlignment="Center" >
        </TextBox>
        <Border Grid.Row="0" BorderBrush="Red" BorderThickness="0,0,0,4"></Border>
    <Grid Grid.Column="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="221*"></RowDefinition>
            <RowDefinition Height="171*"></RowDefinition>
            <RowDefinition Height="290*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
        </Grid>
        <Border Grid.Row="0" BorderBrush="Red" BorderThickness="4,0,4,4" CornerRadius="50" >
        </Border>
    </Grid>
</Grid>

但是倒置的制表符边框需要向下裁剪大约 60%。我当然可以在它上面放置一个元素，但这似乎是错误的解决方案，我想避免它。

我查看了 Border.Clip 属性，但不太清楚如何使用它，也没有找到太多文档。我需要在这里做什么？

Answer 1

有许多不同的方法可以实现此目的，有些方法比其他方法更适合考虑潜在的调整大小等问题。这里只是几个可能的解决方案示例。

        <StackPanel>

    <!-- added -->
            <Grid Background="LightBlue" Height="100">
                <Grid.RowDefinitions>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="2"/>
                    <RowDefinition Height="30"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Rectangle Grid.ColumnSpan="3"
                           Fill="DarkBlue"/>
                <Rectangle Grid.Row="1" Grid.ColumnSpan="3"
                           Fill="Yellow"/>

                <Border Grid.Row="1" Grid.RowSpan="2" Grid.Column="1"
                           Background="DarkBlue" 
                           BorderBrush="Yellow" BorderThickness="2,0,2,2"
                           CornerRadius="0,0,20,20"/>

            </Grid>

    <!-//-->

<Grid Background="LightBlue" Height="100">
            <Grid.RowDefinitions>
                <RowDefinition Height="50"/>
                <RowDefinition Height="30"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <Rectangle Grid.ColumnSpan="3"
                       Fill="DarkBlue"/>
            <Rectangle Grid.ColumnSpan="3" VerticalAlignment="Bottom" Height="2"
                       Fill="Yellow"/>

            <Border Grid.Row="1" Grid.RowSpan="2" Grid.Column="1"
                       Background="DarkBlue"  Margin="0,-2,0,0"
                       BorderBrush="Yellow" BorderThickness="2,0,2,2"
                       CornerRadius="0,0,20,20"/>

        </Grid>

<!-- Or another, or another, or another... -->

            <Grid Background="LightBlue" Height="100">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Border Grid.ColumnSpan="3" Height="50" 
                    VerticalAlignment="Top" Background="DarkBlue" 
                    BorderBrush="Yellow" BorderThickness="0,0,0,2"/>

                <Border Grid.Column="1" Height="80" CornerRadius="20"
                    VerticalAlignment="Top" Background="DarkBlue" BorderThickness="2,0,2,2">
                    <Border.BorderBrush>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="DarkBlue" Offset="0.6"/>
                            <GradientStop Color="#FFFFFF00" Offset="0.6"/>
                        </LinearGradientBrush>
                    </Border.BorderBrush>
                </Border>

            </Grid>


            <Grid Background="LightBlue" Height="100">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Border Grid.Column="1" Height="80" CornerRadius="20"
                    VerticalAlignment="Top" Background="DarkBlue" 
                    BorderBrush="Yellow" BorderThickness="2,0,2,2"/>

                <Border Grid.ColumnSpan="3" Height="50" 
                    VerticalAlignment="Top" Background="DarkBlue" 
                    BorderBrush="Yellow" BorderThickness="0,0,0,2"/>

                <Rectangle Grid.Column="1" Height="51" Margin="2,0"
                       VerticalAlignment="Top" Fill="DarkBlue"/>

            </Grid>

            <Grid Background="LightBlue" Height="100">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Border Grid.ColumnSpan="3" Height="50" 
                    VerticalAlignment="Top" Background="DarkBlue" 
                    BorderBrush="Yellow" BorderThickness="0,0,0,2"/>

                <Border Grid.Column="1" Height="80" CornerRadius="20"
                    VerticalAlignment="Top" Background="DarkBlue" 
                    BorderBrush="Yellow" BorderThickness="2,0,2,2" 
                    Clip="M0,47.7 L175,47.7 L175,80 L0,80 z"/>

            </Grid>

        </StackPanel>