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

CornerRadius有一个构造函数，可以为每个角的半径取4个值：左上角，右上角，右下角，左下角。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="9*" />
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <TextBox Background="Transparent" Grid.Row="0" Grid.Column="0"
             Text="Foo" HorizontalAlignment="Center" VerticalAlignment="Center" />

    <Border Grid.Row="1" Grid.Column="1" BorderBrush="Red" BorderThickness="4,0,4,4" CornerRadius="0, 0, 50, 50" />
</Grid>

另一个选项（可能是我选择的选项）是使用TabControl，将标签放在底部并居中。

    <TabControl TabStripPlacement="Bottom" Background="DarkBlue" BorderBrush="Yellow" Margin="3" >
        <TabControl.Resources>
            <Style TargetType="{x:Type TabPanel}">
                <Setter Property="HorizontalAlignment" Value="Center" />
            </Style>
        </TabControl.Resources>

        <TabItem Header="Test" Background="DarkBlue" BorderBrush="Yellow" Foreground="Yellow"  >
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />                        
                </Grid.RowDefinitions>
                <TextBox Grid.Row="1" Text="Foo" />
            </Grid>
        </TabItem>
    </TabControl>

Answer 2

有很多不同的方法可以实现这一点，有些方法比其他方法更适合潜在的调整大小等等。这里只是一些潜在的解决方案示例。

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

标签形边框需要剪裁

2 个答案: