Tabitem 的数据模板不覆盖所有的 tabitem 空间（WPF Tabcontrol）答案

【问题标题】：Datatemplate for Tabitem doesn't cover all the tabitem space (WPF Tabcontrol)Tabitem 的数据模板不覆盖所有的 tabitem 空间（WPF Tabcontrol）
【发布时间】：2012-02-18 12:11:20
【问题描述】：

我有一个标签控件中的 tabitem 的数据模板。数据模板没有覆盖所有的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>

Tab 控件：

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

当 tabitem 的 Xaml 代码不在 DataTemplate 中时，它工作正常 - 第一个边框的“透明”完成了这项工作，并且没有出现灰色/白色背景。但是当我在 DataTemplate 中移动代码时，出现了灰色背景。

如何让tabitem的背景透明？

我在 tabcontrol 中添加了 HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"，它只是稍微缩小了灰色区域，但它仍然存在。

【问题讨论】：

DataTemplate 只是对 tabitem 内容外观的定义。 Container，在这种情况下，TabItem 可能包含其他具有自身边距和填充的控件，这些控件不能通过模板进行更改。要对此进行修改，请尝试更改 ItemsContainerStyle。记住：容器应该包含所有项目的设置和视觉外观，不管内容是什么；模板仅包含这些项目之间的差异。
现在试过了。我设置了 tabcontrol : "ItemContainerStyle="{StaticResource ContainerStyle}" 然后我创建了一个 TabItem 类型的样式并将背景设置为透明，但是现在背景只有在未选择项目时才透明。被选择的项目背景保持白色，当我将鼠标指向未选择的选项卡时，它显示蓝色默认颜色而不是透明背景。添加了 style.triggers 但它们被上述默认颜色忽略了。我将发布另一个带图片的问题。感谢您的帮助.
我发布了另一个更详细的问题：stackoverflow.com/questions/9002729/…

标签： wpf tabcontrol transparent tabitem

【解决方案1】：

尝试将 TabItems 的 Padding 设置为零。

【讨论】：

它只是稍微缩小了灰色背景
你应该为 TabItem 编写控制模板。