Шаблон данных для Tabitem не покрывает все пространство tabitem (WPF Tabcontrol)

у меня есть шаблон данных для табуляции в элементе управления вкладками. Шаблон данных не покрывает все элементы управления Tabitem, фон — серый или белый, цвет элемента управления по умолчанию.

введите здесь описание изображения

Шаблон данных TabItem:

<DataTemplate x:Key="ClosableTabItemTemplate">
            <Border BorderThickness="1" BorderBrush="Transparent" CornerRadius="4">
                <!--Border to make the tab item gap from the content-->
                <Border x:Name="InsideBorder" BorderThickness="3" BorderBrush="#D6EAFF" CornerRadius="4">
                    <!--Border for the rounded corners-->
                    <!--TabItem Content Grid-->
                    <Grid x:Name="tabItemGrid" ShowGridLines="True" Margin="0" Background="#D6EAFF">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="25"/>
                            <!--Icon Column-->
                            <ColumnDefinition Width="1*"/>
                            <!--Title Column-->
                            <ColumnDefinition Width="20"/>
                            <!--Close Button Column-->
                        </Grid.ColumnDefinitions>

                        <!--Icon of tab Item-->
                        <Image Grid.Column="0" Grid.Row="1" Height="18" HorizontalAlignment="Left" Source="Images/tab1.jpg"/>

                        <!--Title of tab Item-->
                        <Label Name="TabText" Grid.Column="1" Grid.Row="1" Content="TabItem"  Height="23"  HorizontalAlignment="Left" 
                                           Margin="4,1,0,0"  VerticalAlignment="Top" FontFamily="Courier" FontSize="12" />

                        <!--Close button of tab Item-->
                        <Button Style="{DynamicResource TabButton}"
                                            Name="button_close" Content="x"
                                            Command="{Binding Path=CloseCommand}"
                                            Grid.Column="2" Grid.Row="1" 
                                            Height="20" Width="20" 
                                            Margin="0,0,0,2" VerticalAlignment="Center" HorizontalAlignment="Right"
                                            FontFamily="Courier" FontStretch="Normal" FontWeight="Bold" FontSize="14" 
                                            Visibility="Visible" ToolTip="Close" 
                                            BorderBrush="Transparent" BorderThickness="0" Background="Transparent" Padding="0,0,0,0"
                                            >
                        </Button>
                    </Grid>
                </Border>
            </Border>



            <DataTemplate.Triggers>

                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}},Path=IsSelected}" Value="True">
                    <Setter TargetName="tabItemGrid" Property="Background" Value="#D6EAFF" />
                </DataTrigger>

                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}},Path=IsSelected}" Value="False">
                    <!--<Trigger Property="IsSelected"  Value="False">-->
                    <Setter TargetName="InsideBorder" Property="BorderBrush">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="#FFCCCCD0" />
                                <GradientStop Color="#FF526593" Offset="1" />
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter TargetName="tabItemGrid" Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="#FFCCCCD0" />
                                <GradientStop Color="#FF526593" Offset="1" />
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
                <!--</Trigger>-->
            </DataTemplate.Triggers>
        </DataTemplate>

Вкладка:

<TabControl Name="MainTabCtrl"  Margin="0" Padding="0" BorderThickness="0" Background="Transparent"
                        IsSynchronizedWithCurrentItem="True"
                        ItemsSource="{Binding Path=TabViewModels}" 
                        ItemTemplate="{StaticResource ClosableTabItemTemplate}">

когда код Xaml табуляции не находился внутри DataTemplate, он работал нормально - «Прозрачный» первой границы выполнял свою работу, и серый/белый фон не появлялся. но когда я переместил код внутри DataTemplate, появился серый фон.

Как сделать фон табита прозрачным?

Я добавил HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" в элемент управления вкладками, он только немного сужает серую область, но все еще существует.


person Rodniko    schedule 25.01.2012    source источник
comment
DataTemplate — это только определение того, как будет выглядеть содержимое табуляции. Контейнер, в данном случае TabItem, может содержать другие элементы управления с полями и отступами, которые нельзя изменить с помощью шаблона. Чтобы изменить это, попробуйте изменить ItemsContainerStyle. Помните: контейнер должен содержать настройки и внешний вид всех элементов, независимо от содержимого; Шаблон содержит только разницу между этими элементами.   -  person dowhilefor    schedule 25.01.2012
comment
попробовал сейчас. я установил tabcontrol: ItemContainerStyle={StaticResource ContainerStyle}, затем я создал стиль типа TabItem и установил прозрачность фона, но теперь фон прозрачен только тогда, когда элемент не выбран. Элемент, выбранный фоном, остается белым, и когда я указываю мышью на невыбранную вкладку, он показывает синий цвет по умолчанию вместо прозрачного фона. добавлены style.triggers, но они игнорируются указанными выше цветами по умолчанию. я опубликую еще один вопрос с картинками. Спасибо за помощь.   -  person Rodniko    schedule 25.01.2012
comment
я разместил еще один, более подробный вопрос: stackoverflow.com/questions/9002729/   -  person Rodniko    schedule 25.01.2012


Ответы (1)


Попробуйте установить Padding для TabItems равным нулю.

person hival    schedule 25.01.2012
comment
это только немного сузило серый фон - person Rodniko; 25.01.2012
comment
Вы должны написать шаблон управления для TabItem. - person hival; 25.01.2012