选项卡项目标题垂直

本文关键字：垂直 标题 项目 选项 | 更新日期: 2023-09-27 18:23:48

所以我得到了一个带有一些Tabitems和一些按钮的TabControl。

当我按下这些按钮时，会更改TabStrip的位置。

一切都很好。我现在想做的是，

当我按下按钮Right90将标签条向右放置时，收割台应旋转90°。

我试着去做，但总是失败。

如果能快速回答，我会很高兴的。

这是我的代码：

   <Window x:Class="Pages.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="TabControl" Height="350" Width="525">

    <Window.Resources>
    <SolidColorBrush x:Key="Foreground" Color="#FF9531b1"></SolidColorBrush>
    <SolidColorBrush x:Key="Background" Color="Transparent"></SolidColorBrush>
    <ControlTemplate x:Key="TabItemControlTemplate" TargetType="{x:Type TabItem}">
            <Grid SnapsToDevicePixels="True">
                <Border x:Name="Bd" BorderBrush="{StaticResource Foreground}" BorderThickness="0" Padding="{TemplateBinding Padding}">
                    <Border.Style>
                        <Style TargetType="{x:Type Border}">
                        <Setter Property="Background" Value="{StaticResource Background}"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected}" Value="True">
                                    <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
                                </DataTrigger>
                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsMouseOver}" Value="True">
                                    <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                    <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/>
                </Border>
            </Grid>
            <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="Bd" Property="Background" Value="{StaticResource Foreground}"></Setter>
                <Setter TargetName="Content" Property="TextBlock.Foreground" Value="White"></Setter>
                <Setter TargetName="Content" Property="TextBlock.FontWeight" Value="Heavy"></Setter>
            </Trigger>
            <MultiTrigger >
                <MultiTrigger.Conditions >
                    <Condition Property="IsSelected" Value="True"></Condition>
                    <Condition Property="IsMouseOver" Value="false"></Condition>
                </MultiTrigger.Conditions>
                <Setter TargetName="Content" Property="TextBlock.Foreground" Value="{StaticResource Foreground}"></Setter>
                <Setter TargetName="Content" Property="TextBlock.FontWeight" Value="Heavy"></Setter>
            </MultiTrigger>
        </ControlTemplate.Triggers>
        </ControlTemplate>
</Window.Resources>

    <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Column="1">
        <Button x:Name="btnTop" Click="btnTop_Click">Top</Button>
        <Button Name="btnRight" Click="btnRight_Click">Right</Button>
        <Button Name="btnBottom" Click="btnBottom_Click">Bottom</Button>
        <Button Name="btnLeft" Click="btnLeft_Click">Left</Button>
        <Button Name="btnLeft90" Click="btnLeft90_Click">Left90</Button>
        <Button Name="btnRight90" Click="btnRight90_Click">Right90</Button>
    </StackPanel>
    <TabControl Grid.Column="0"  x:Name="MyControl" Height="200"
                    Background="Transparent"
                    BorderThickness="0,1,0,0"
                    BorderBrush="{StaticResource Foreground}" TabStripPlacement="Top">
        <TabItem x:Name="Tab1" Header="tab1" Background="Transparent" Template="{DynamicResource TabItemControlTemplate}">
        </TabItem>
            <TabItem x:Name="Tab2" Header="tab2" Background="Transparent" Template="{DynamicResource TabItemControlTemplate}"/>
            <TabItem x:Name="Tab3" Header="tab3" Background="Transparent" Template="{DynamicResource TabItemControlTemplate}"/>
    </TabControl>
</Grid>

以及代码背后的代码：

    public MainWindow()
    {
        InitializeComponent();
    }

    private void btnTop_Click(object sender, RoutedEventArgs e)
    {
        MyControl.TabStripPlacement = Dock.Top;
    }
    private void btnRight_Click(object sender, RoutedEventArgs e)
    {
        MyControl.TabStripPlacement = Dock.Right;
    }
    private void btnBottom_Click(object sender, RoutedEventArgs e)
    {
        MyControl.TabStripPlacement = Dock.Bottom;
    }
    private void btnLeft_Click(object sender, RoutedEventArgs e)
    {
        MyControl.TabStripPlacement = Dock.Left;
    }
    private void btnLeft90_Click(object sender, RoutedEventArgs e)
    {
        MyControl.TabStripPlacement = Dock.Left;
    }
    private void btnRight90_Click(object sender, RoutedEventArgs e)
    {
        MyControl.TabStripPlacement = Dock.Right;
        Tab1.LayoutTransform = Rotation.Rotate90;
    }
}

提前感谢

选项卡项目标题垂直

您需要编写两种不同的样式，并在按钮上设置它们点击

在您的窗口资源

<Window.Resources>
<Style x:Key="Right90" TargetType="{x:Type TabItem}">           
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <ContentPresenter Content="{TemplateBinding Content}" TextOptions.TextFormattingMode="Display">
                        <ContentPresenter.LayoutTransform>
                            <RotateTransform Angle="90" />
                        </ContentPresenter.LayoutTransform>
                    </ContentPresenter>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="Left90" TargetType="{x:Type TabItem}">          
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <ContentPresenter Content="{TemplateBinding Content}" TextOptions.TextFormattingMode="Display">
                        <ContentPresenter.LayoutTransform>
                            <RotateTransform Angle="-90" />
                        </ContentPresenter.LayoutTransform>
                    </ContentPresenter>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

这是您的TabControl和按钮

<DockPanel>
    <Button Name="btnRight" DockPanel.Dock="Top" Click="btnRight_Click" Content="Right"></Button>
    <Button Name="btnLeft" DockPanel.Dock="Top" Click="btnLeft_Click" Content="Left" ></Button>
    <TabControl Name="tabControl">
        <TabItem Header="Tab1"></TabItem>
        <TabItem Header="Tab2"></TabItem>
    </TabControl>
</DockPanel>

这就是后面的代码将如何进行

    private void btnLeft_Click(object sender, RoutedEventArgs e)
    {
        tabControl.TabStripPlacement = Dock.Left;
        tabControl.ItemContainerStyle = this.FindResource("Left90") as Style;
    }
    private void btnRight_Click(object sender, RoutedEventArgs e)
    {
        tabControl.TabStripPlacement = Dock.Right;
        tabControl.ItemContainerStyle = this.FindResource("Right90") as Style;
    }

在项目模板的触发器中，添加此触发器：

<Trigger Property="TabStripPlacement" Value="Right">
    <Setter TargetName="Content" Property="LayoutTransform">
        <Setter.Value>
            <RotateTransform Angle="90"/>
        </Setter.Value>
    </Setter>
</Trigger>
相关文章：