Question

I am unable to apply a MouseOver style to a Path inside a ContentPresenter.

I have a Button style containing a ContentPresenter:

<Style x:Key="ContentButton" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <ContentPresenter
                x:Name="contentPresenter"
                Content="{TemplateBinding Content}">
                    <ContentPresenter.Resources>
                    <Style TargetType="{x:Type Path}"
                        BasedOn="{StaticResource ContentButtonPathStyle}"/>
                    </ContentPresenter.Resources>
                </ContentPresenter>

Here is a style so I can have a rollover effect on the Path:

<Style x:Key="ContentButtonPathStyle" TargetType="{x:Type Path}">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Fill" Value="#FF00FF10"/>
            <Setter Property="Stroke" Value="Red"/>
            <Setter Property="StrokeThickness" Value="6"/>
        </Trigger>
    </Style.Triggers>
    <Setter Property="Stroke" Value="Red"/>
    <Setter Property="Fill">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFB4B3E7" Offset="0"/>
                <GradientStop Color="#FF0800FF" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</Style>

I also have a resource file for icons with a Viewbox that contains a path:

<Viewbox x:Key="MyIcon">
    <Grid>
        <Path Data="M78,296 L37.5,306.5 45.5,354.5 123.5,343.5 z" />
    </Grid>
</Viewbox>

And finally, I create a button and assign the Viewbox resource to the Content:

<Button Style="{DynamicResource ContentButton}">
    <ContentPresenter Content="{DynamicResource MyIcon}"/>
</Button>

The use of “BasedOn” to style the contents of the ContentPresenter is a technique that I found here:

http://social.msdn.microsoft.com/forums/en-US/wpf/thread/412b1747-60e9-4b9a-8f8f-bd56f3aff875/

However, it doesn’t work for me… I’ve spent many hours trying to figure this out!

Any ideas?

Thanks!

---

OK based upon Mackho’s excellent answer, here is my final XAML.

I also added a DataTriggeer for IsPressed, which works great!

I hope this helps someone…

First, the style:

<Style x:Key="ContentButtonPathStyle" TargetType="{x:Type Path}">
        <Style.Triggers>
            <DataTrigger Binding="{Binding RelativeSource=
                {RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=IsMouseOver}" Value="True">
                <Setter Property="Fill" Value="Yellow"/>
                <Setter Property="Stroke" Value="Blue"/>
            </DataTrigger>
            <DataTrigger Binding="{Binding RelativeSource=
                {RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=IsPressed}" Value="True">
                <Setter Property="Fill" Value="Red"/>
                <Setter Property="Stroke" Value="Black"/>
            </DataTrigger>
        </Style.Triggers>
        <Setter Property="Fill" Value="Green"/>
        <Setter Property="Stroke" Value="Red"/>
    </Style>

Next, the icon itself:

<Viewbox Stretch="Fill" x:Shared="False" x:Key="MyIcon">
        <Path StrokeThickness="6" Data="M160.26077,0.5 L196.5,36.739223 232.73923,0.5 251.12399,18.884777 214.88478,55.124001 251.12399,91.363222 232.73923,109.748 196.5,73.508779 160.26077,109.748 141.87601,91.363222 178.11522,55.124001 141.87601,18.884777 z" Stretch="Fill"/>
    </Viewbox>

Then, the template:

<Style x:Key="ContentButton" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <ControlTemplate.Resources>
                        <Style TargetType="{x:Type Path}" BasedOn="{StaticResource ContentButtonPathStyle}"/>
                    </ControlTemplate.Resources>
                    <Grid  Background="Transparent"><ContentPresenter /></Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

And finally, let’s place a few buttons that use the template and style:

<Grid>
    <Button Style="{DynamicResource ContentButton}" HorizontalAlignment="Left" Width="128" Height="128" VerticalAlignment="Top" Margin="85.5,87,0,0">
        <ContentPresenter Content="{DynamicResource MyIcon}" d:IsLocked="True"/>
    </Button>
    <Button Style="{DynamicResource ContentButton}" Height="64" VerticalAlignment="Top" Margin="0,87,204.5,0" HorizontalAlignment="Right" Width="64">
        <ContentPresenter Content="{DynamicResource MyIcon}" d:IsLocked="True"/>
    </Button>
    <Button Style="{DynamicResource ContentButton}" Height="96" VerticalAlignment="Bottom" Margin="234,0,0,66.5" HorizontalAlignment="Left" Width="96">
        <ContentPresenter Content="{DynamicResource MyIcon}" d:IsLocked="True"/>
    </Button>
    <Button Style="{DynamicResource ContentButton}" Height="32" VerticalAlignment="Bottom" Margin="0,0,138.5,130.5" HorizontalAlignment="Right" Width="32">
        <ContentPresenter Content="{DynamicResource MyIcon}" d:IsLocked="True"/>
    </Button>
</Grid>

Answer 1

The problem is not about “BasedOn”, you can define the entire style instead of use baseon and it still doesn’t work. You just need to move your stile in ControlTemplate resources, and it will work for sure

        <Style x:Key="ContentButton" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <ControlTemplate.Resources>
                            <Style TargetType="{x:Type Path}" BasedOn="{StaticResource ContentButtonPathStyle}"/>
                        </ControlTemplate.Resources>
                        <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}">
                        </ContentPresenter>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

To be honest I don’t know why It is not working inside ContentPresenter resources 🙂

Edit

If you want to change path style based on button mouseover you need to bind ismouseover property to the button one and move your style inside path collection, see below

        <Style x:Key="ContentButtonPathStyle" TargetType="{x:Type Path}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource=
                    {RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=IsMouseOver}" Value="True">
                    <Setter Property="Fill" Value="#FF00FF10"/>
                    <Setter Property="Stroke" Value="Red"/>
                    <Setter Property="StrokeThickness" Value="6"/>
                </DataTrigger>
            </Style.Triggers>
            <Setter Property="Stroke" Value="Red"/>
            <Setter Property="Fill">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFB4B3E7" Offset="0"/>
                        <GradientStop Color="#FF0800FF" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>


        <Style x:Key="ContentButton" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <ContentPresenter x:Name="contentPresenter" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


        <Viewbox x:Key="MyIcon">
            <Grid Background="Transparent">
                <Grid.Resources>
                    <Style TargetType="{x:Type Path}" BasedOn="{StaticResource ContentButtonPathStyle}"/>
                </Grid.Resources>
                <Path Data="M78,296 L37.5,306.5 45.5,354.5 123.5,343.5 z" />
            </Grid>
        </Viewbox>

And just for you to know, it’s pretty useless to base a style to another and add nothing, you could use:

<Path Style="{StaticResource ContentButtonPathStyle}" Data="...." />

Hope this helps