I want to make a TabItem for a TabControl with the button closing it in browsers. Here is what I sketched:

<Style x:Key="CloseButtonStyle" TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <Ellipse Name="BG"/> <Path Name="PATH" Stroke="Gray" StrokeThickness="2" Stretch="Fill" Data="M 0 0 M 0.3 0.3 L 0.7 0.7 M 0.3 0.7 L 0.7 0.3 M 1 1"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="BG" Property="Fill" Value="#DB4437"/> <Setter TargetName="PATH" Property="Stroke" Value="White"/> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter TargetName="BG" Property="Fill" Value="#A8352A"/> <Setter TargetName="PATH" Property="Stroke" Value="White"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="ClosableTabItemStyle" TargetType="TabItem"> <Setter Property="Header"> <Setter.Value> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <TextBlock Text="{Binding Path=Header}" Grid.Column="0"/> <Button Width="15" Height="15" Grid.Column="1" Style="{StaticResource CloseButtonStyle}"/> </Grid> </Setter.Value> </Setter> </Style>

But when I use this then the button is not visible at all ...

 <TabControl> <TabItem Header="Test" Style="{StaticResource ClosableTabItemStyle}" Width="100"/> </TabControl>

But if you remove Header, then it becomes visible.

Updated.

 <Style x:Key="ClosableTabItemStyle" TargetType="TabItem"> <Style.Resources> <BooleanToVisibilityConverter x:Key="B2V"/> </Style.Resources> <Setter Property="HeaderTemplate"> <Setter.Value> <DataTemplate> <Grid HorizontalAlignment="Stretch" MinWidth="100"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <ContentPresenter Content="{Binding}" ToolTip="{Binding}" Grid.Column="0" HorizontalAlignment="Center"/> <Button Name="CLOSE" Command="{Binding Path=CloseCommand}" Width="15" Height="15" Grid.Column="1" Style="{StaticResource CloseButtonStyle}" Visibility="{Binding IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType=TabItem}, Converter={StaticResource B2V}}"/> </Grid> </DataTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="CLOSE" Property="Visibility" Value="Visible"/> </Trigger> </Style.Triggers> </Style>
  • Yeah, I found what it was. I'll write now :) - VladD
  • Such a question, how do you tie a close command to the created TabItem? More precisely, how do you declare a CloseCommand command, what is declared in the style (Command = "{Binding Path = CloseCommand}")? - Nik Kit

1 answer 1

The problem is that you install Header once in a style, and another time directly, and this second assignment is stronger.

You need to install HeaderTemplate .

 <Style x:Key="ClosableTabItemStyle" TargetType="TabItem"> <Setter Property="HeaderTemplate"> <Setter.Value> <DataTemplate> <Grid HorizontalAlignment="Stretch" Margin="2" MinWidth="100"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <ContentPresenter Content="{Binding}" Grid.Column="0" HorizontalAlignment="Center"/> <Button Width="15" Height="15" Grid.Column="1" Style="{StaticResource CloseButtonStyle}"/> </Grid> </DataTemplate> </Setter.Value> </Setter> </Style> 
 <TabControl> <TabItem Header="Test" Style="{StaticResource ClosableTabItemStyle}"/> </TabControl>

Result:

test

Update: showing / removing a button depending on the state of a TabItem is also easy. You need to attach to the desired property through the converter:

 <Style x:Key="ClosableTabItemStyle" TargetType="TabItem"> <Style.Resources> <BooleanToVisibilityConverter x:Key="B2V"/> </Style.Resources> <Setter Property="HeaderTemplate"> <Setter.Value> <DataTemplate> <Grid HorizontalAlignment="Stretch" Margin="2" MinWidth="100"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <ContentPresenter Content="{Binding}" Grid.Column="0" HorizontalAlignment="Center"/> <Button Width="15" Height="15" Grid.Column="1" Style="{StaticResource CloseButtonStyle}" Visibility="{Binding IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType=TabItem}, Converter={StaticResource B2V}}"/> </Grid> </DataTemplate> </Setter.Value> </Setter> </Style>

Here is the code

 <TabControl> <TabItem Header="Test 1" Style="{StaticResource ClosableTabItemStyle}"/> <TabItem Header="Test 2" Style="{StaticResource ClosableTabItemStyle}"/> </TabControl>

now gives this picture:

test 2

  • how to understand the entry Content = "{Binding}"? Why banding? - PECHAPTER
  • one
    @DarkByte: Move the trigger to the Template, as in this answer: ru.stackoverflow.com/a/518885/10105 - VladD
  • one
    @DarkByte: Put it on the internal Grid 'and the Background="Transparent" - VladD
  • one
    @DarkByte: Then transfer ToolTip="{Binding}" to the Grid . - VladD
  • one
    @maxwell: Well, for example, you can put a picture in the VM. Or ID pictures in the VM, and turn it into a picture converter. And in View, get attached to the picture or ID. - VladD