Question

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

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

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

当我按下按钮右键90将标签条置于右侧时，标题应旋转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;
    }

}

先谢谢

Answer 1

您需要编写两种不同的样式并按下按钮

进行设置

在您的窗口资源

中

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

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

Answer 2

在item的模板触发器中，添加以下触发器：

<Trigger Property="TabStripPlacement" Value="Right">
    <Setter TargetName="Content" Property="LayoutTransform">
        <Setter.Value>
            <RotateTransform Angle="90"/>
        </Setter.Value>
    </Setter>
</Trigger>

TabItem标题垂直

2 个答案: