时间戳

首页 > 解决方案 > 根据 TabStripPlacement 更改 TabItem CornerRadius

wpf - 根据 TabStripPlacement 更改 TabItem CornerRadius

问题描述

有谁知道如何在 TabItem 或 TabControl 中设置触发器，这将改变 TabItem 内部边框的 CornerRadius，仅基于 TabItem 的放置/方向？这是我要修复的图片：

在此处输入图像描述

您应该注意两组选项卡，左上一组带有文本“单元格浏览器”，底部一组。查看它，您可以看到底部 TabItems 的角半径对于 TabItems 的旋转是不正确的。当它们应该向下时，它们是倒置的。有谁知道如何根据标签条位置更改 TabItems 的角半径？我已经知道我可以为每个特定方向创建不同的样式，例如当位置为左、下等时的样式。但是，如果可能的话，我宁愿只有一个。

查看下面的 xaml，在 tabitem 声明中有一个边框，简称为“边框”。这就是我希望通过触发器来改变的。我只是不知道如何从 tabcontrol 样式访问它，或者可选地，从 tabitem 样式触发器中执行相同操作并以某种方式检测当前方向。

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:VoidwalkerEngine.Editor.Resources.Themes.Styles">

    <Style x:Key="VoidwalkerTabControlStyle" TargetType="{x:Type TabControl}">
        <Setter Property="Padding" Value="2" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="#3f3f46" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid
                        x:Name="templateRoot"
                        Background="#181818"
                        ClipToBounds="true"
                        KeyboardNavigation.TabNavigation="Local"
                        SnapsToDevicePixels="true">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="ColumnDefinition0" />
                            <ColumnDefinition x:Name="ColumnDefinition1" Width="0" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition x:Name="RowDefinition0" Height="Auto" />
                            <RowDefinition x:Name="RowDefinition1" Height="*" />
                        </Grid.RowDefinitions>
                        <TabPanel
                            x:Name="headerPanel"
                            Grid.Row="0"
                            Grid.Column="0"
                            Margin="0"
                            Panel.ZIndex="1"
                            Background="Transparent"
                            IsItemsHost="true"
                            KeyboardNavigation.TabIndex="1" />
                        <Border
                            x:Name="contentPanel"
                            Grid.Row="1"
                            Grid.Column="0"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            KeyboardNavigation.DirectionalNavigation="Contained"
                            KeyboardNavigation.TabIndex="2"
                            KeyboardNavigation.TabNavigation="Local">
                            <ContentPresenter
                                x:Name="PART_SelectedContentHost"
                                Margin="0"
                                ContentSource="SelectedContent"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="TabStripPlacement" Value="Bottom">
                            <Setter TargetName="headerPanel" Property="Grid.Row" Value="1" />
                            <Setter TargetName="contentPanel" Property="Grid.Row" Value="0" />
                            <Setter TargetName="RowDefinition0" Property="Height" Value="*" />
                            <Setter TargetName="RowDefinition1" Property="Height" Value="Auto" />
                            <Setter TargetName="headerPanel" Property="Margin" Value="0" />
                        </Trigger>
                        <Trigger Property="TabStripPlacement" Value="Left">
                            <Setter TargetName="headerPanel" Property="Grid.Row" Value="0" />
                            <Setter TargetName="contentPanel" Property="Grid.Row" Value="0" />
                            <Setter TargetName="headerPanel" Property="Grid.Column" Value="0" />
                            <Setter TargetName="contentPanel" Property="Grid.Column" Value="1" />
                            <Setter TargetName="ColumnDefinition0" Property="Width" Value="Auto" />
                            <Setter TargetName="ColumnDefinition1" Property="Width" Value="*" />
                            <Setter TargetName="RowDefinition0" Property="Height" Value="*" />
                            <Setter TargetName="RowDefinition1" Property="Height" Value="0" />
                            <Setter TargetName="headerPanel" Property="Margin" Value="0" />
                            <Setter TargetName="headerPanel" Property="VerticalAlignment" Value="Top" />
                            <Setter TargetName="headerPanel" Property="LayoutTransform">
                                <Setter.Value>
                                    <RotateTransform Angle="270" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="TabStripPlacement" Value="Right">
                            <Setter TargetName="headerPanel" Property="Grid.Row" Value="0" />
                            <Setter TargetName="contentPanel" Property="Grid.Row" Value="0" />
                            <Setter TargetName="headerPanel" Property="Grid.Column" Value="1" />
                            <Setter TargetName="contentPanel" Property="Grid.Column" Value="0" />
                            <Setter TargetName="ColumnDefinition0" Property="Width" Value="*" />
                            <Setter TargetName="ColumnDefinition1" Property="Width" Value="Auto" />
                            <Setter TargetName="RowDefinition0" Property="Height" Value="*" />
                            <Setter TargetName="RowDefinition1" Property="Height" Value="0" />
                            <Setter TargetName="headerPanel" Property="Margin" Value="0" />
                            <Setter TargetName="headerPanel" Property="VerticalAlignment" Value="Top" />
                            <Setter TargetName="headerPanel" Property="LayoutTransform">
                                <Setter.Value>
                                    <RotateTransform Angle="90" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter TargetName="templateRoot" Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="VoidwalkerTabItemStyle" TargetType="{x:Type TabItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid x:Name="Root">
                        <Border
                            x:Name="Border"
                            Margin="0"
                            Background="Yellow"
                            BorderBrush="Red"
                            BorderThickness="1,1,1,0"
                            CornerRadius="1,1,0,0">
                            <TextBlock
                                x:Name="ContentSite"
                                Margin="12,2,12,2"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Text="{TemplateBinding Header}" />
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger SourceName="ContentSite" Property="IsMouseOver" Value="True">
                            <Setter TargetName="ContentSite" Property="Foreground" Value="{DynamicResource GlobalAccentSolidColorBrush}" />
                        </Trigger>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Panel.ZIndex" Value="100" />
                            <Setter TargetName="Border" Property="Background" Value="#444444" />
                            <Setter TargetName="Border" Property="BorderBrush" Value="#444444" />
                            <Setter Property="Foreground" Value="#eeeeee" />
                        </Trigger>
                        <Trigger Property="IsSelected" Value="False">
                            <Setter Property="Foreground" Value="#a4a4a4" />
                            <Setter TargetName="Border" Property="Background" Value="#373737" />
                            <Setter TargetName="Border" Property="BorderBrush" Value="#2b2b2b" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

标签： wpfxamltabcontrolcontroltemplate

解决方案

设置为CornerRadius时是错误的。这样做的原因是在这种情况下标题面板不会旋转，因为那时内容会倒置显示。TabStripPlacementBottom

您可以向TabItem控件模板添加触发器，该触发器会根据该模板翻转角半径。该TabStripPlacement属性适用于TabControl和TabItem。

<Trigger Property="TabStripPlacement" Value="{x:Static Dock.Bottom}">
   <Setter TargetName="Border" Property="CornerRadius" Value="0,0,1,1"/>
</Trigger>

另一种方法是旋转Border180° 以使圆角半径正确，然后将其旋转ContentSite180° 以使其旋转反转并且不会倒置显示。

<Trigger Property="TabStripPlacement" Value="Bottom">
   <Setter TargetName="Border" Property="LayoutTransform">
      <Setter.Value>
         <RotateTransform Angle="180"/>
      </Setter.Value>
   </Setter>
   <Setter TargetName="ContentSite" Property="LayoutTransform">
      <Setter.Value>
         <RotateTransform Angle="180"/>
      </Setter.Value>
   </Setter>
</Trigger>

将两个替代触发器中的任何一个粘贴到TabItem控件模板Triggers部分。

推荐阅读