Custom Control not using Theme

84 Views Asked by At

I have my application set us to use the Royal theme :

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/PresentationFramework.Royale;V3.0.0.0;31bf3856ad364e35;component\themes\Royale.NormalColor.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

I then have a CustomControl in the same application project :

public class CustomerView : Control
{
    static CustomerView()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomerView), 
            new FrameworkPropertyMetadata(typeof(CustomerView)));
    }
}

 <Style TargetType="{x:Type local:CustomerView}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:CustomerView}">
                <TabControl>
                    <TabItem Header="Tab0" />
                    <TabItem Header="Tab1" />
                    <TabItem Header="Tab2" />
                </TabControl>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

This works and the styling from the Royal theme is applied to the Tabcontrol. But now I want to make a slight change to the Padding on the tab items :

<Style TargetType="{x:Type local:CustomerView}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:CustomerView}">
                <TabControl>
                    <TabControl.ItemContainerStyle>
                        <Style TargetType="{x:Type TabItem}"
                               BasedOn="{StaticResource {x:Type TabItem}}">
                            <Setter Property="Padding"
                                    Value="20" />
                        </Style>
                    </TabControl.ItemContainerStyle>

                    <TabItem Header="Tab0" />
                    <TabItem Header="Tab1" />
                    <TabItem Header="Tab2" />
                </TabControl>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Now the Royal theme is not applied to the TabControl and goes back to the Aero theme. What gives? How can I resolve this?

1

There are 1 best solutions below

2
Rolodium On

I am unsure of why setting the ItemContainerStyle would override the style, however if you simply add it as a resource to the ControlTemplate it will work as expect

<Style TargetType="{x:Type local:CustomerView}">
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type local:CustomerView}">
            <ControlTemplate.Resources>
                <Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource {x:Type TabItem}}">
                     <Setter Property="Padding" Value="20" />
                </Style>
            </ControlTemplate.Resources>
            <TabControl>
                <TabItem Header="Tab0" />
                <TabItem Header="Tab1" />
                <TabItem Header="Tab2" />
            </TabControl>
        </ControlTemplate>
    </Setter.Value>
</Setter>

Hope this solves your problem.