Search code examples
c#wpfcontentpresenter

Setter for elements inside ContentPresenter

I have a ControlTemplate like this : 

<ControlTemplate TargetType="Button">
    <Grid Background="Transparent">
        <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center"
                          VerticalAlignment="Center" />
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect BlurRadius="20" Color="Black" ShadowDepth="0"
                                      Opacity="0.5" />
                </Setter.Value>
            </Setter>
            <Setter Property="FontWeight" Value="SemiBold"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect BlurRadius="20" Color="Black" ShadowDepth="0" Opacity="1" />
                </Setter.Value>
            </Setter>
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" Value="Gray" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

When IsMouseOver property changes to True, I want all the images inside the contentPresenter to have the DropShadowEffect, not the button itself.
I tried changing the setter property to Image.Effect but it doesn't work.
How can I do it?

This is how my button looks like when Mouse is over: enter image description here
And this is how it looks when it is not: enter image description here
As you can see, both the Image and TextBlock is getting dropshadow effect. But I want only the Image to get it.

Solution

  • You can take the style recommended by Sinatr and put it in the ControlTemplate.Resources section of your button's control template. Here's an example that worked for me. It also handles the IsPressed event, during which I assume you want adjust the drop shadow effect for just the image:

    <ControlTemplate x:Key="BtnTemplate" TargetType="{x:Type Button}">
    <Grid Background="Transparent">
        <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>

    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="FontWeight" Value="SemiBold"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" Value="Gray" />
        </Trigger>
    </ControlTemplate.Triggers>

    <ControlTemplate.Resources>
        <Style TargetType="{x:Type Image}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Button}}" Value="True">
                    <DataTrigger.Setters>
                        <Setter Property="Effect">
                            <Setter.Value>
                                <DropShadowEffect BlurRadius="20" Color="Black" ShadowDepth="0" Opacity="0.5"/>
                            </Setter.Value>
                        </Setter>
                    </DataTrigger.Setters>
                </DataTrigger>

                <DataTrigger Binding="{Binding IsPressed, RelativeSource={RelativeSource AncestorType=Button}}" Value="True">
                    <DataTrigger.Setters>
                        <Setter Property="Effect">
                            <Setter.Value>
                                <DropShadowEffect BlurRadius="20" Color="Black" ShadowDepth="0" Opacity="1" />
                            </Setter.Value>
                        </Setter>
                    </DataTrigger.Setters>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ControlTemplate.Resources>
</ControlTemplate>