如何将第一个 TabItem 与其 TabControl 的左边框对齐？

Question

我正在为我的 C#-WPF 应用程序开发自定义 TabControl。基本上，我想要的一切都很好。除了一件真正让我恼火的小事：TabControl 的第一个 TabItem 缩进了 2 个像素，因此不会与 TabControl 的左边框对齐。不幸的是我还不能 post 图片，所以我希望你们明白我的意思...... 那么，是否有可能使第一个 TabItem 与其 TabControl 对齐？也许通过某种方式设置它的位置？

这是完整的 XAML-代码：

<UserControl x:Class="DocumentationOfXmlInterfaces.CentralTabControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<TabControl
    Name="MyTabcontrol"
    BorderBrush="Navy"
    BorderThickness="2"
    ItemsSource="{Binding}"
    SelectionChanged="MyTabcontrol_SelectionChanged"
>
    <TabControl.Resources>

        <Style TargetType="TabPanel">
            <Setter Property="HorizontalAlignment" Value="Left"/>
        </Style>

        <Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid
                            Width="{TemplateBinding Width}"
                            Height="{TemplateBinding Height}"
                            ClipToBounds="True"
                        >
                            <Border
                                x:Name="MyBorder"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                BorderBrush="Navy"
                                BorderThickness="1"
                            >
                                <DockPanel
                                    Name="MyDockpanel_Content"
                                >
                                    <ContentPresenter
                                        x:Name="MyContentPresenter"
                                        HorizontalAlignment="Center"
                                        Content="{TemplateBinding Content}"
                                    />
                                </DockPanel>
                            </Border>
                        </Grid>

                        <ControlTemplate.Triggers>
                            <DataTrigger
                                Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}}, Path=IsSelected}"
                                Value="False"
                            >
                                <Setter 
                                    TargetName="MyBorder"
                                    Property="Border.BorderBrush"
                                    Value="RoyalBlue"
                                />
                            </DataTrigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter
                                    TargetName="MyBorder"
                                    Property="Border.BorderBrush"
                                    Value="White"
                                />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <DataTemplate x:Key="TabHeader" DataType="TabItem">
            <DockPanel>
                <Button
                    Name="MyButton_CloseTab"
                    DockPanel.Dock="Right" 
                    Margin="10,1,1,0"
                    Click="MyButton_Click"
                    CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Name}"
                >
                    <Image Name="MyImage_Button" Source="Icons/Close.png" Height="12" Width="12"/>
                </Button>
                <TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Header}"/>
            </DockPanel>
            <DataTemplate.Triggers>
                <DataTrigger
                    Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}}, Path=IsSelected}"
                    Value="False"
                >
                    <Setter
                        TargetName="MyButton_CloseTab"
                        Property="Visibility"
                        Value="Hidden"
                    />
                    <Setter
                        TargetName="MyImage_Button"
                        Property="Source"
                        Value="Icons/Close2.png"
                    />
                    <Setter
                        TargetName="MyImage_Button"
                        Property="Height"
                        Value="12"
                    />
                    <Setter
                        TargetName="MyImage_Button"
                        Property="Width"
                        Value="12"
                    />
                </DataTrigger>
                <DataTrigger
                    Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}}, Path=IsMouseOver}"
                    Value="True"
                >
                    <Setter
                        TargetName="MyButton_CloseTab"
                        Property="Visibility"
                        Value="Visible"
                    />
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>

        <Style TargetType="TabItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabItem">
                        <Border 
                            x:Name="MyBorder"
                            BorderBrush="Navy" 
                            BorderThickness="1,1,1,0"
                        >
                            <Grid Name="Panel">
                                <ContentPresenter 
                                    x:Name="ContentSite"

                                    ContentSource="Header"
                                    Margin="5,0,0,0"
                                />
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="Panel" Property="Background" Value="Navy"/>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="False">
                                <Setter TargetName="Panel" Property="Background" Value="RoyalBlue"/>
                                <Setter TargetName="MyBorder" Property="BorderBrush" Value="RoyalBlue"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="MyBorder" Property="BorderBrush" Value="Navy"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="Grid">
            <Setter Property="VerticalAlignment" Value="Stretch"></Setter>
            <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
        </Style>
    </TabControl.Resources>
</TabControl>

非常感谢您的帮助！谢谢！ :)

Answer 1

本着与此答案 () 相同的心态，您的选项卡项上可能有负的左边距。像这样：Margin="-2,0,0,0"

Answer 2

您的问题是 TabControl 模板中的 headers TabPanel 明确设置了 Margin，您的 Style 将无法覆盖它。

您可能需要修改整个 TabControl 的模板以更改边距的值。

所以也许只做负边距技巧会更容易 :P

如何将第一个 TabItem 与其 TabControl 的左边框对齐？

How to align the first TabItem with the left border of its TabControl?

wpf

tabcontrol

tabitem