How to inherit from a style and to reach a deep element?

Question

I have a MenuItem-Style called "Home". The new MenuItem-Style "Right" shall inherit from it. The only thing which shall be overwritten is the ImageSource of the Image inside the style. This fancy trick from the last answer isn't doable here, because a style itself does not have a ImageSource-Property.

<ResourceDictionary 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" mc:Ignorable="d">
    <Style x:Key="Home" TargetType="{x:Type MenuItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type MenuItem}">
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="OnMouseEnter" />
                    </ControlTemplate.Resources>
                    <Grid x:Name="Grid" d:DesignWidth="150" d:DesignHeight="150">
                        <Image x:Name="Image" HorizontalAlignment="Center" VerticalAlignment="Center"
                   Source="/WpfControlLibrary_Battleship;component/Resources/MenuItemBackgrounds/Home.gif" />
                        <Viewbox x:Name="Viewbox">
                            <Label x:Name="Label" Content="{TemplateBinding Header}" />
                        </Viewbox>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="Grid">
                            <BeginStoryboard x:Name="OnMouseEnter_BeginStoryboard" Storyboard="{StaticResource OnMouseEnter}" />
                        </EventTrigger>
                        <EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="Grid">
                            <StopStoryboard BeginStoryboardName="OnMouseEnter_BeginStoryboard" />
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="MinHeight" Value="0" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="Background" Value="{x:Null}" />
        <Setter Property="Foreground" Value="{x:Null}" />
        <Setter Property="MinWidth" Value="0" />
        <Setter Property="Header" Value="" />
    </Style>
    <Style x:Key="Right" TargetType="{x:Type MenuItem}" BasedOn="{StaticResource Home}">

    </Style>
</ResourceDictionary>

The last question and its solution: How to inherit from a style and to overwrite something?
(The following solution isn't adoptable in this case.)

<Style x:Key="Water" TargetType="Button">
    <Setter Property="Background">
        <Setter.Value>
            <ImageBrush ImageSource="/WpfControlLibrary_Battleship;component/Resources/ButtonBackgrounds/Water.jpg"/>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Grid">
                <Grid Background="{TemplateBinding Background}" ...
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="SomeOtherWaterStyle" BasedOn="{StaticResource WaterStyle" TargetType="Grid">
    <Setter Property="Background" Value="Red"/>
</Style>

flusser · Answer 1 · 2012-05-24T13:20:30.823

In your case why dont you just use the Icon property of MenuItem to set the image? Use this instead of your Image:

 <ContentPresenter HorizontalAlignment="Center" 
                      VerticalAlignment="Center"
                      ContentSource="Icon" />

and set the Icon property

 <Setter Property="Icon">
      <Setter.Value>
        <Image x:Name="Image"  
               Source="/WpfControlLibrary_Battleship;component/Resources/MenuItemBackgrounds/Home.gif" />
      <Setter.Value>
 </Setter>

Then you can change the Image easily in your inherited Style:

<Style x:Key="Right" TargetType="{x:Type MenuItem}" BasedOn="{StaticResource Home}">
   <Setter Property="Icon">
      <Setter.Value>
        <Image x:Name="Image"  
               Source="/WpfControlLibrary_Battleship;component/Resources/MenuItemBackgrounds/Right.gif" />
      <Setter.Value>
 </Setter>
</Style>

As a general solution or if you could not use the Icon property to this problem i would externd the MenuItem Control, add my desired property and bind to that property in the template.

regards flusser

I need it as an image, because I am going to make something with it while runtime. But it doesn't matter. I found a (nice?) solution myself this morning. I'll add it later as an answer. But thank you anyway. :) — Karsten, May 24 '12 at 16:08
Icon is just named icon, you can put there any Visual Element. — flusser, May 24 '12 at 16:23

How to inherit from a style and to reach a deep element?

1 Answers1