左侧的 WPF 选项卡控件 Headers

Question

我想制作自定义选项卡控件样式。 Headers应该在左边，内容在右边。就像标准样式可以做到的那样：

上图中选中的元素是活动项内的网格。如您所见，它与 headers.

完美对齐

这是我的设计。所选元素也是活动项目内的网格，但它就在 headers 后面而不是它们旁边。如何将此网格与 headers 对齐？

这些是我的选项卡项和选项卡控件的样式：

 <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

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

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

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

            </TabItem>
        </TabControl>

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

Answer 2

在您的自定义模板中，您需要设置 Grid.Column 而不是 Grid.Row，因为您的网格现在是 2 cols/1 行而不是 1 col/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>

左侧的 WPF 选项卡控件 Headers

WPF Tab Control Headers on the left side

c#

wpf

wpf-controls

visual-studio