wpf custom TabControl

Question

Я просто хочу, чтобы TabControl имел настраиваемые TabItems, которые можно закрывать на основе кода из здесь .

Я думал, что этот вопрос такой же, какМой, но комбинация кода & xaml ниже оставляет пустые вкладки.

public class ClosableTabControl : TabControl
{
    protected override DependencyObject GetContainerForItemOverride()
    {
        return new ClosableTabItem();
    }
}

        <uc:ClosableTabControl x:Name="Items" Grid.Column="1">
            <uc:ClosableTabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding DisplayName}" />
                </DataTemplate>
            </uc:ClosableTabControl.ItemTemplate>
            <uc:ClosableTabControl.ContentTemplate>
                <DataTemplate>
                    <ContentControl>
                        <local:EmpView DataContext="{Binding ., Mode=TwoWay}"/>
                    </ContentControl>
                </DataTemplate>
            </uc:ClosableTabControl.ContentTemplate>
        </uc:ClosableTabControl>

xaml работает на TabControl (вместо uc: ClosableTabControl).

Каков наилучший способ иметь TabControl с ClosableTabItems для детей?

Cheers,
Berryl

ps Я бы выложил код для ClosableTabItem, но яхотел снизить уровень шума на первом посту.Попросите меня опубликовать, если это поможет.

Answer 1

Вот скриншот моего TabControl:

Прежде всего, кнопка закрытия - это пользовательский элемент управления, который позволяет использовать разные цвета для состояний наведения и нажатия.

Add -> New Item -> Custom Control -> GlyphButton

GlyphButton.cs

public class GlyphButton : Button
{
    public static readonly DependencyProperty GlyphForegroundProperty = DependencyProperty.Register("GlyphForeground", typeof(Brush), typeof(GlyphButton));
    public static readonly DependencyProperty HoverBackgroundProperty = DependencyProperty.Register("HoverBackground", typeof(Brush), typeof(GlyphButton));
    public static readonly DependencyProperty HoverBorderBrushProperty = DependencyProperty.Register("HoverBorderBrush", typeof(Brush), typeof(GlyphButton));
    public static readonly DependencyProperty HoverBorderThicknessProperty = DependencyProperty.Register("HoverBorderThickness", typeof(Thickness), typeof(GlyphButton));
    public static readonly DependencyProperty HoverForegroundProperty = DependencyProperty.Register("HoverForeground", typeof(Brush), typeof(GlyphButton));
    public static readonly DependencyProperty PressedBackgroundProperty = DependencyProperty.Register("PressedBackground", typeof(Brush), typeof(GlyphButton));
    public static readonly DependencyProperty PressedBorderBrushProperty = DependencyProperty.Register("PressedBorderBrush", typeof(Brush), typeof(GlyphButton));
    public static readonly DependencyProperty PressedBorderThicknessProperty = DependencyProperty.Register("PressedBorderThickness", typeof(Thickness), typeof(GlyphButton));
    public static readonly DependencyProperty PressedForegroundProperty = DependencyProperty.Register("PressedForeground", typeof(Brush), typeof(GlyphButton));

    static GlyphButton()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(GlyphButton), new FrameworkPropertyMetadata(typeof(GlyphButton)));
    }

    public Brush GlyphForeground
    {
        get
        {
            return (Brush)base.GetValue(GlyphForegroundProperty);
        }
        set
        {
            base.SetValue(GlyphForegroundProperty, value);
        }
    }

    public Brush HoverBackground
    {
        get
        {
            return (Brush)base.GetValue(HoverBackgroundProperty);
        }
        set
        {
            base.SetValue(HoverBackgroundProperty, value);
        }
    }

    public Brush HoverBorderBrush
    {
        get
        {
            return (Brush)base.GetValue(HoverBorderBrushProperty);
        }
        set
        {
            base.SetValue(HoverBorderBrushProperty, value);
        }
    }

    public Thickness HoverBorderThickness
    {
        get
        {
            return (Thickness)base.GetValue(HoverBorderThicknessProperty);
        }
        set
        {
            base.SetValue(HoverBorderThicknessProperty, value);
        }
    }

    public Brush HoverForeground
    {
        get
        {
            return (Brush)base.GetValue(HoverForegroundProperty);
        }
        set
        {
            base.SetValue(HoverForegroundProperty, value);
        }
    }

    public Brush PressedBackground
    {
        get
        {
            return (Brush)base.GetValue(PressedBackgroundProperty);
        }
        set
        {
            base.SetValue(PressedBackgroundProperty, value);
        }
    }

    public Brush PressedBorderBrush
    {
        get
        {
            return (Brush)base.GetValue(PressedBorderBrushProperty);
        }
        set
        {
            base.SetValue(PressedBorderBrushProperty, value);
        }
    }

    public Thickness PressedBorderThickness
    {
        get
        {
            return (Thickness)base.GetValue(PressedBorderThicknessProperty);
        }
        set
        {
            base.SetValue(PressedBorderThicknessProperty, value);
        }
    }

    public Brush PressedForeground
    {
        get
        {
            return (Brush)base.GetValue(PressedForegroundProperty);
        }
        set
        {
            base.SetValue(PressedForegroundProperty, value);
        }
    }
}

Темы / Generic.xaml

<Style TargetType="{x:Type local:GlyphButton}">
    <Setter Property="Width" Value="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}" />
    <Setter Property="Foreground" Value="{Binding Path=GlyphForeground, RelativeSource={RelativeSource Self}}" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Focusable" Value="false" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:GlyphButton}">
                <Border Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <ContentPresenter />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="Border" Value="{Binding HoverBackground , RelativeSource={RelativeSource TemplatedParent}}" Property="Background" />
                        <Setter TargetName="Border" Value="{Binding HoverBorderBrush , RelativeSource={RelativeSource TemplatedParent}}" Property="BorderBrush" />
                        <Setter TargetName="Border" Value="{Binding HoverBorderThickness , RelativeSource={RelativeSource TemplatedParent}}" Property="BorderThickness" />
                        <Setter Value="{Binding HoverForeground , RelativeSource={RelativeSource TemplatedParent}}" Property="Foreground" />
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="Border" Value="{Binding PressedBackground , RelativeSource={RelativeSource TemplatedParent}}" Property="Background" />
                        <Setter TargetName="Border" Value="{Binding PressedBorderBrush , RelativeSource={RelativeSource TemplatedParent}}" Property="BorderBrush" />
                        <Setter TargetName="Border" Value="{Binding PressedBorderThickness , RelativeSource={RelativeSource TemplatedParent}}" Property="BorderThickness" />
                        <Setter Value="{Binding PressedForeground , RelativeSource={RelativeSource TemplatedParent}}" Property="Foreground" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Стиль для TabItem.Вы можете поместить его куда угодно, в App.xaml или в словарь ресурсов.

Стиль TabItem

<SolidColorBrush x:Key="FileTabTextKey" Color="#ffffff"/>

<SolidColorBrush x:Key="ToolWindowButtonHoverActiveKey" Color="#fffcf4"/>
<SolidColorBrush x:Key="ToolWindowButtonHoverActiveBorderKey" Color="#e5c365"/>
<SolidColorBrush x:Key="ToolWindowButtonHoverActiveGlyphKey" Color="#000000"/>
<SolidColorBrush x:Key="ToolWindowButtonDownKey" Color="#ffe8a6"/>
<SolidColorBrush x:Key="ToolWindowButtonDownBorderKey" Color="#e5c365"/>
<SolidColorBrush x:Key="ToolWindowButtonDownActiveGlyphKey" Color="#000000"/>

<LinearGradientBrush x:Key="FileTabHotGradientKey">
    <GradientStop Color="#707776"/>
    <GradientStop Color="#4b5c74"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="FileTabHotBorderKey" Color="#9ba7b7"/>
<SolidColorBrush x:Key="FileTabHotTextKey" Color="#ffffff"/>
<SolidColorBrush x:Key="FileTabHotGlyphKey" Color="#ced4dd"/>

<LinearGradientBrush x:Key="FileTabSelectedGradientKey" StartPoint="0.5,0" EndPoint="0.5,1">
    <GradientStop Color="#fffcf4"/>
    <GradientStop Color="#fff3cd" Offset="0.5"/>
    <GradientStop Color="#ffe8a6" Offset="0.5"/>
    <GradientStop Color="#ffe8a6" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="FileTabSelectedTextKey" Color="#000000"/>
<SolidColorBrush x:Key="FileTabSelectedGlyphKey" Color="#75633d"/>

<Style x:Key="OrangeTabItem" TargetType="{x:Type TabItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Border AllowDrop="true" ToolTip="{Binding Title}">
                    <Border Name="Border" Background="Transparent" BorderBrush="Transparent" BorderThickness="1,1,1,0" CornerRadius="2,2,0,0">
                        <DockPanel x:Name="TitlePanel" TextElement.Foreground="{StaticResource FileTabTextKey}">
                            <controls:GlyphButton x:Name="HideButton" 
                            DockPanel.Dock="Right" 
                            GlyphForeground="Transparent" 
                            HoverBackground="{StaticResource ToolWindowButtonHoverActiveKey}" 
                            HoverBorderBrush="{StaticResource ToolWindowButtonHoverActiveBorderKey}" 
                            HoverForeground="{StaticResource ToolWindowButtonHoverActiveGlyphKey}" 
                            PressedBackground="{StaticResource ToolWindowButtonDownKey}" 
                            PressedBorderBrush="{StaticResource ToolWindowButtonDownBorderKey}" 
                            PressedForeground="{StaticResource ToolWindowButtonDownActiveGlyphKey}"
                            HoverBorderThickness="1" PressedBorderThickness="1" Margin="3,2,3,4" 
                            Command="{Binding RequestCloseCommand}"
                            CommandParameter="{Binding}"
                            ToolTip="Close">
                                <Path x:Name="CloseButtonStroke" Width="10" Height="8" Stretch="Uniform" Data="F1 M 0,0 L 2,0 5,3 8,0 10,0 6,4 10,8 8,8 5,5 2,8 0,8 4,4 0,0 Z" 
                                Fill="{Binding Path=(TextElement.Foreground), RelativeSource={RelativeSource Self}}" />
                            </controls:GlyphButton>

                            <ContentPresenter x:Name="Content" HorizontalAlignment="Stretch" Margin="4,2,4,4" VerticalAlignment="Stretch" RecognizesAccessKey="true" ContentSource="Header" />
                        </DockPanel>
                    </Border>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="Border" Value="{StaticResource FileTabHotGradientKey}" Property="Background" />
                        <Setter TargetName="Border" Value="{StaticResource FileTabHotBorderKey}" Property="BorderBrush" />
                        <Setter TargetName="TitlePanel" Value="{StaticResource FileTabHotTextKey}" Property="TextElement.Foreground" />
                        <Setter TargetName="HideButton" Value="{StaticResource FileTabHotGlyphKey}" Property="GlyphForeground" />
                    </Trigger>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Panel.ZIndex" Value="1" />
                        <Setter TargetName="Border" Value="{StaticResource FileTabSelectedGradientKey}" Property="Background" />
                        <Setter TargetName="Border" Value="{StaticResource FileTabSelectedGradientKey}" Property="BorderBrush" />
                        <Setter TargetName="Border" Property="BorderThickness" Value="0" />
                        <Setter TargetName="Border" Property="Padding" Value="0,1,0,0" />
                        <Setter TargetName="HideButton" Property="Margin" Value="3" />
                        <Setter TargetName="TitlePanel" Value="{StaticResource FileTabSelectedTextKey}" Property="TextElement.Foreground" />
                        <Setter TargetName="HideButton" Value="{StaticResource FileTabSelectedGlyphKey}" Property="GlyphForeground" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Теперь Main Window.Для моего TabControl требуется синий фон, но вы можете изменить цвета, если хотите.

    <Grid Background="#FF293955">
    <TabControl ItemsSource="{Binding Items}" ItemContainerStyle="{StaticResource OrangeTabItem}">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Title}"/>
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <DataTemplate>
                <ContentControl Content="{Binding Content}"/>
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>
</Grid>

И, наконец, одно важное замечание: модель, представляющая TabItem, должна содержать команду RequestCloseCommand

Пример двух ViewModels

public class MainViewModel
{
    public MainViewModel()
    {
        this.Items = new ObservableCollection<TabItemViewModel>
                     {
                         new TabItemViewModel("Tab 1", OnItemRequestClose),
                         new TabItemViewModel("Tab item 2", OnItemRequestClose)
                     };
    }

    public ObservableCollection<TabItemViewModel> Items { get; set; }

    public void OnItemRequestClose(TabItemViewModel item)
    {
        this.Items.Remove(item);
    }
}

public class TabItemViewModel
{
    public TabItemViewModel(string title, Action<TabItemViewModel> onClose)
    {
        this.Title = title;
        this.RequestCloseCommand = new SimpleCommand(obj => onClose(this));
        this.Content = "Test content " + title;
    }

    public string Title { get; set; }

    public ICommand RequestCloseCommand { get; set; }

    public object Content { get; set; }
}

Я думал об использовании RoutedUICommand, но пересмотр команд этого типа займет много времени.Так что это решение является наиболее подходящим для меня сейчас.