1

Я хочу сделать TabItem для TabControl-а с кнопкой закрывающей его как в браузерах. Вот что я набросал:

<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>

Но когда я использую это то кнопку не видно вообще...

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

Зато если убрать Header то ее становится видно.

Обновил.

<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>
2
  • Ага, я нашёл в чём дело. Сейчас напишу :)
    – VladD
    30 апр 2016 в 18:05
  • Такой вопрос, как ты привязываешь команду закрытия к создаваемой TabItem? Точнее говоря, как ты объявляешь команду CloseCommand, что объявлен в стиле (Command="{Binding Path=CloseCommand}") ?
    – Nik Kit
    27 ноя 2017 в 18:07

1 ответ 1

2

Проблема в том, что вы устанавливаете Header один раз в стиле, а другой раз непосредственно, и это второе присвоение сильнее.

Вам нужно вместо этого установить 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>

Результат:

тест


Обновление: показывать/убирать кнопку в зависимости от состояния TabItem'а тоже просто. Надо привязаться к нужному свойству через конвертер:

<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>

Вот такой код

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

даёт теперь такую картинку:

тест 2

20
  • как понять запись Content="{Binding}"? К чему биндинг?
    – Developer
    30 апр 2016 в 18:31
  • 1
    @DarkByte: Перенесите триггер в Template, как в этом ответе: ru.stackoverflow.com/a/518885/10105
    – VladD
    30 апр 2016 в 19:10
  • 1
    @DarkByte: Поставьте у внутреннего GridBackground="Transparent"
    – VladD
    30 апр 2016 в 19:17
  • 1
    @DarkByte: Тогда перенесите ToolTip="{Binding}" в Grid.
    – VladD
    30 апр 2016 в 19:20
  • 1
    @maxwell: Ну например, вы можете положить картинку в VM. Или ID картинки в VM, и превращать его в картинку конвертером. А во View привязываться к картинке или ID.
    – VladD
    27 ноя 2016 в 12:20

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.