Как выровнять первый TabItem с левой границей его TabControl?

Я работаю над пользовательским TabControl для своего приложения C#-WPF. В принципе, все, что я хочу, работает просто отлично. За исключением одной маленькой вещи, которая меня действительно раздражает: первый TabItem TabControl имеет отступ в 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>

I'd really appreciate your help! Thanks! :)


person DerSöllinger    schedule 11.06.2015    source источник


Ответы (2)


С тем же мышлением, что и в этом ответе (Изменить местоположение заголовка GroupBox), вы можете иметь отрицательное левое поле на элементе вкладки. Вот так: Margin="-2,0,0,0"

person Maxime Tremblay-Savard    schedule 11.06.2015
comment
Ну, это было удивительно просто :) Большое спасибо! - person DerSöllinger; 11.06.2015

Ваша проблема заключается в том, что для заголовков TabPanel внутри шаблона TabControl явно задано поле Margin, и ваш стиль не сможет его переопределить.

Возможно, вам придется изменить весь шаблон TabControl, чтобы изменить значение этого поля.

Так что, возможно, было бы проще просто проделать трюк с отрицательной маржой: P

person almulo    schedule 11.06.2015
comment
Я пошел на отрицательную маржу ;) Но все равно спасибо! - person DerSöllinger; 11.06.2015