WPF - Inherit TabControl and customize the style

2019-07-26 09:43发布

问题:

I want to inherit the default TabControl and handle the event double-click TabItem Header.

This is XAML file:

<local:MyTabControl x:Class="MyTabControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:CustomizedTabControl"
    mc:Ignorable="d">
<local:MyTabControl.Style>
    <Style TargetType="{x:Type local:MyTabControl}" BasedOn="{StaticResource {x:Type TabControl}}">
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style  TargetType="{x:Type TabItem}">
                    <Setter Property="HeaderTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <Label Content="{Binding}">
                                    <Label.Style>
                                        <Style TargetType="Label">
                                            <EventSetter Event="MouseDoubleClick" Handler="OnTabHeaderDoubleClick"/>
                                        </Style>
                                    </Label.Style>
                                </Label>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>
</local:MyTabControl.Style>

And this is the code-behind:

using System.Windows.Controls;
using System.Windows.Input;

namespace CustomizedTabControl
{
    public partial class MyTabControl : TabControl
    {
        public MyTabControl() : base()
        {
        }
        public void OnTabHeaderDoubleClick(object sender, MouseButtonEventArgs e)
        {
            // Never call
        }
    }
}

But the event handler is never called. Do you have any idea?

P/S: This is the code I used the customized TabControl:

<Window x:Class="CustomizedTabControl.MainWindow"
 ...
    Title="MainWindow" Height="350" Width="525">
    <Grid>
        <local:MyTabControl x:Name="tabControl">
            <TabItem Header="TabItem">
                <Grid Background="#FFE5E5E5"/>
            </TabItem>
            <TabItem Header="TabItem">
                <Grid Background="#FFE5E5E5"/>
            </TabItem>
        </local:MyTabControl>
    </Grid>
</Window>

回答1:

I could not figure out why the style I define in XAML file of MyTabControl does not work. However this is the workaround I use. I have to use DictionaryResource to catch the event.

The xaml file:

<ResourceDictionary x:Class="CustomizedTabControl.MyTabControlResourceDictionary"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:CustomizedTabControl"
        mc:Ignorable="d">
    <Style BasedOn="{StaticResource {x:Type TabControl}}" TargetType="{x:Type local:MyTabControl}" x:Key="MyTabControlStyle">
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style  TargetType="{x:Type TabItem}">
                    <Setter Property="HeaderTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <Grid>
                                    <Label Content="{Binding}" Background="Blue" Tag="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:MyTabControl}}}">
                                        <Label.Style>
                                            <Style TargetType="Label">
                                                <EventSetter Event="MouseDoubleClick" Handler="OnTabHeaderDoubleClick"/>
                                            </Style>
                                        </Label.Style>
                                    </Label>
                                </Grid>

                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

The corresponding code-behind:

namespace CustomizedTabControl
{
    public partial class MyTabControlResourceDictionary : ResourceDictionary
    {
        public void OnTabHeaderDoubleClick(object sender, MouseButtonEventArgs e)
        {
            var tabControl = (sender as FrameworkElement)?.Tag as MyTabControl;
            if(tabControl != null)
            {
                tabControl.OnTabHeaderDoubleClick();
            }
        }
    }

    public partial class MyTabControl : TabControl
    {
        public MyTabControl() : base()
        {
        }

        public void OnTabHeaderDoubleClick()
        {
             // Now I can handle the event here
        }

    }
}

Add this is how I use it:

<Grid>
    <local:MyTabControl x:Name="tabControl" Style="{StaticResource MyTabControlStyle}">
        <TabItem Header="TabItem">
            <Grid Background="#FFE5E5E5"/>
        </TabItem>
        <TabItem Header="TabItem">
            <Grid Background="#FFE5E5E5"/>
        </TabItem>
    </local:MyTabControl>
</Grid>