左侧的WPF选项卡控件标题

Question

我想制作自定义标签控件样式。标题应位于左侧，内容位于右侧。就像标准样式一样：

上图中选定的元素是活动项目内的网格。如您所见，它完全对齐标题。

这是我的设计。所选元素也是活动项内的网格，但它位于标题后面而不是它们旁边。如何在标题旁边对齐此网格？

这些是标签项和标签控件的样式：

 <Style  TargetType="{x:Type TabControl}">
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid KeyboardNavigation.TabNavigation="Local">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="200"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <TabPanel
                        Name="HeaderPanel"
                        Grid.Row="0"
                        Panel.ZIndex="1" 
                        Margin="0" 
                        IsItemsHost="True"
                        KeyboardNavigation.TabIndex="1"
                        Background="AliceBlue" />
                    <Border 
                            Name="Border" 
                            Grid.Row="1"
                            BorderThickness="0"
                            KeyboardNavigation.TabNavigation="Local"
                            KeyboardNavigation.DirectionalNavigation="Contained"
                            KeyboardNavigation.TabIndex="2" >
                        <ContentPresenter 
                              Name="PART_SelectedContentHost"
                              Margin="4"
                              ContentSource="SelectedContent" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="{x:Type TabItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Grid>
                    <Border
                        Name="Border"
                        Margin="0"
                        Padding="10,4,4,4"
                        Background="Transparent"
                        Height="30"                               
                        Width="Auto"
                        BorderThickness="0">
                        <ContentPresenter x:Name="ContentSite"
                            VerticalAlignment="Center"                                   
                            HorizontalAlignment="Left"
                            ContentSource="Header"                                   
                            RecognizesAccessKey="True"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Panel.ZIndex" Value="100" />
                        <Setter TargetName="Border" Property="Background" Value="#FFFFFFFF" />
                        <Setter TargetName="Border" Property="BorderBrush" Value="#FF4576a9"></Setter>
                        <Setter TargetName="Border" Property="BorderThickness" Value="6, 0, 0, 0"></Setter>
                        <Setter TargetName="Border" Property="Padding" Value="4"></Setter>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="Border" Property="Background" Value="Yellow" />
                        <Setter Property="Foreground" Value="Orange" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

谢谢。

Answer 1

在自定义模板中，您需要设置Grid.Column而不是Grid.Row，因为您的网格现在是2列/ 1行而不是1列/ 2行

<ControlTemplate TargetType="{x:Type TabControl}">
    <Grid ...>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TabPanel
            Name="HeaderPanel" Grid.Column="0" ... />
        <Border Name="Border" Grid.Column="1" ... >
            <ContentPresenter ... />
        </Border>
    </Grid>
</ControlTemplate>

Answer 2

您无需创建自定义控件。您可以使用tabcontrol的TabStripPlacement属性来实现此功能。

<TabControl TabStripPlacement="Left">
            <TabItem Header="Tab1">

            </TabItem>
            <TabItem Header="Tab2">

            </TabItem>
        </TabControl>

您可以参考http://www.wpf-tutorial.com/tabcontrol/tab-positions/或https://msdn.microsoft.com/en-us/library/system.windows.controls.tabcontrol.tabstripplacement(v=vs.110).aspx