Question

我正在为我的C＃-WPF应用程序开发自定义TabControl。基本上，我想要的一切都很好。除了一件让我烦恼的事情：TabControl的第一个TabItem是2个像素，因此不会与TabControl的左边框对齐。不幸的是我还不能发布图片，所以我希望你们明白我的意思...... 那么，是否有可能让第一个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

你的问题是TabControl模板中的标题TabPanel明确设置了边距，你的风格不能覆盖它。

您可能需要修改整个TabControl模板以更改该保证金的值。

所以也许更容易做出负边缘技巧：P

Answer 2

与此答案（Change GroupBox Header location）的思维方式相同，您的标签项可能会有一个负左边距。像这样：Margin="-2,0,0,0"

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

2 个答案: