CODEWITHSUNDEEP
c#wpfmvvmstylesdatatemplate
MoonKnight
MoonKnight

Reputation: 23833

Inheriting Styles in WPF

I have the following code in my MainWindow.xaml which follows Josh Smith's MVVM workspace model.

<Grid Grid.Row="1" 
      Grid.RowSpan="2">
    <ContentControl
        Content="{Binding}" 
        ContentTemplate="{StaticResource WorkspaceTemplate}">
    </ContentControl>
</Grid>

Where initially my workspace template was 

<DataTemplate x:Key="WorkspaceTemplate">
    <TabControl x:Name="tabControl" 
                IsSynchronizedWithCurrentItem="true" 
                ItemsSource="{Binding Workspaces}" 
                SelectedIndex="{Binding SelectedIndex}"
                HorizontalContentAlignment="Stretch" 
                VerticalContentAlignment="Stretch" 
                HorizontalAlignment="Stretch" 
                VerticalAlignment="Stretch" 
                TabStripPlacement="Top" 
                Margin="5,0,5,0">
        <TabControl.ItemContainerStyle>
            <Style TargetType="TabItem">
                <Setter Property="Header" Value="{Binding Path=DisplayName}"/>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            </Style>
        </TabControl.ItemContainerStyle>
    </TabControl>
</DataTemplate>

Now I have created a TabControl style with close button which is contained in a seperate Resource Dictionary. The code for this is something like

<Style x:Key="StudioTabControl" TargetType="{x:Type TabControl}">
    <Style.Resources>
        <Style x:Key="StudioTabItem" TargetType="{x:Type TabItem}">
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid Height="20" 
                              Background="{TemplateBinding Background}" 
                              SnapsToDevicePixels="True">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="35"/>
                            </Grid.ColumnDefinitions>
                            <ContentPresenter Grid.Column="0" 
                                              Margin="10,0,10,0" 
                                              HorizontalAlignment="Center" 
                                              VerticalAlignment="Center" 
                                              ContentSource="Header" />
                            <Button Grid.Column="1" 
                                    Width="15" 
                                    Height="15" 
                                    HorizontalAlignment="Center" 
                                    VerticalAlignment="Center" 
                                    DockPanel.Dock="Right">
                            ... ect.

The question is how can I inherite this StudioTabControl style into my <DataTemplate x:Key="WorkspaceTemplate"> definiation. Currently I have tried 

<DataTemplate x:Key="WorkspaceTemplate">
    <TabControl x:Name="tabControl" 
                ItemsSource="{Binding Workspaces}" 
                SelectedIndex="{Binding SelectedIndex}"
                Style="{StaticResource StudioTabControl}"
                ... ect.

but due to the fact that I specify <TabControl.ItemContainerStyle>... in the <DataTemplate x:Key="WorkspaceTemplate"> definiation the style does not work. How can I get my StudioTabItem style to work with my existing WorkspaceTemplate?

Thanks for your time.

Upvotes: 2

Views: 1329

Answers (3)

Nitin Purohit
Nitin Purohit

Reputation: 18580

The resource defined in Resources of any element can only be used inside that element so the style you defined in TabControl.Style will not be available outside it and hence won't be applied.

So in order to use that style take it out of the Tabcontrol.Style i.e. define it in parallel to your tabcontrol style in your resource dictionary.

Secondly if you have defined the Style with a key it will not be applied automatically. You will have to apply it explicitly using {StaticResource=Key}.

Once you define it outside the tabcontrol.Style, you can inherit it using BasedOn keyword in the ItemContainerStyle like

<Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource StudioTabItem}">

thanks

Upvotes: 3

thumbmunkeys
thumbmunkeys

Reputation: 20764

Use BasedOn to inherit from a style:

 <Style TargetType="TabItem" BasedOn="{StaticResource StudioTabItem}">
            <Setter Property="Header" Value="{Binding Path=DisplayName}"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
  </Style>

You need to define StudioTabItem so that it is accessible by your 'TabItem' style definition, so define this before you define TabItem:

 <Style x:Key="StudioTabItem" TargetType="{x:Type TabItem}">

Upvotes: 1

user786981
user786981

Reputation:

I don't see how that's inheriting style, If you are looking for using "StudioTabControl" style inside "WorkspaceTemplate" just use it:

<TabControl x:Name="tabControl" 
                IsSynchronizedWithCurrentItem="true" 
                ItemsSource="{Binding Workspaces}" 
                SelectedIndex="{Binding SelectedIndex}"
                HorizontalContentAlignment="Stretch" 
                VerticalContentAlignment="Stretch" 
                HorizontalAlignment="Stretch" 
                VerticalAlignment="Stretch" 
                TabStripPlacement="Top" 
                Style="{StaticResource StudioTabControl}"
                Margin="5,0,5,0">

Its the TabControl style that you are looking for not TabItem style, because StudioTabItem's TargetType is TabItem not TabControl, so it wont get applied.

Alternatively if you are really looking for Style Inheritence the have a look at this link.

Upvotes: 3

Related Questions