How can I apply style based on a trigger property to a content control?

Question

In the current WPF application that I am working on, I have to invert the color of an icon when the mouse is pressed on (when property isPressed=true ). The reason why I need to do is I want to keep the consistency of the application with regard to the icon color and background. But this icon is embedded within a button which when clicked displays a similar color and hence the icon is not visible

As my style trigger picks up the red color that I have set but the color of the geometry is not changed. Is there any way I can use this style trigger to set the color of the geometry also to Red when (isPressed=true)?

Here is my code

My Style is as follows

    <Style x:Key="ButtonBackground" TargetType="{x:Type Button}">

        <Style.Triggers>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="Foreground" Value="Red" />
                <Setter Property="Content" Value="yellow" />
            </Trigger>
        </Style.Triggers>
    </Style>

I tried setting a setter property to content as yellow just to see if it works but it did not work

The part where it is being used is as follows

<Border BorderBrush="{StaticResource ContentBackground}" BorderThickness="0,0,0,1">
            <Button
                x:Name="NameButton" 

                Style="{StaticResource ButtonBackground}"
                >


                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

                    <StackPanel Grid.Column="0" Orientation="Horizontal">
                        <ContentControl x:Name="Icon"
                                        Width="25"
                                        Height="25"
                                        ">

                        </ContentControl>
                        <TextBlock Text="{Binding Name}"
                                "/>
                    </StackPanel>

                </Grid>

            </Button>
        </Border>

As shown in the images as well the style is picked up by the textblock but I do not know how I can add this style to the contentcontrol which has the icons

Edit :- Example of icon specified in the application

    <DataTemplate x:Key="FolderIcon">
        <Path 
              Fill="#047F89"
              Data="....."/>
    </DataTemplate>

What kind of icon is this, a xaml? If so you have to bind the Fill of the Path or Geometry to the first ancestor's Contol.Foreground (or Button.Foreground) instead of setting it directly. Now the icon color will adapt to the current Foreground. — BionicCode
BioniCode Thank you for the comment .. I have edited the question with the type of icons I have ... can you kindly assist me with what needs to be done — Devss

BionicCode BionicCode · Accepted Answer · 2019-09-08T17:56:56

You have to bind the Fill property of the Path to the parent Control element's Control.Foreground (or Button.Foreground) instead of setting it directly. Now the icon color will adapt to the Foreground value assigned by the trigger. I also removed the redundant Grid of the Button.Content and the Content Setter of the Trigger as it would remove the icon Path element every time the Button is pressed and added the default Forground value to the Style (moved from Path.Fill to Style-Setter):

<Style x:Key="ButtonBackground" TargetType="{x:Type Button}">
  <Setter Property="Foreground" Value="#047F89" />

  <Style.Triggers>
    <Trigger Property="IsPressed" Value="True">
      <Setter Property="Foreground" Value="Red" />
     </Trigger>
  </Style.Triggers>
</Style>

<Button x:Name="NameButton"        
        Style="{StaticResource ButtonBackground}">
  <Button.Content>
    <StackPanel Orientation="Horizontal">
      <Path Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Control}, Path=Foreground}"
            Height="16"
            Width="16"
            Stretch="Uniform"
            VerticalAlignment="Center"
            Margin="5,0,0,0"
            Data="....."/>

      <TextBlock Text="{Binding Name}"
                 TextTrimming="WordEllipsis"
                 VerticalAlignment="Center" 
                 Margin="5,0,0,0"/>
    <StackPanel>
  <Button.Content>
</Button>

The Binding on Path.Fill would still work in case you decide to move the Path to a ResourceDictionary.

How can I apply style based on a trigger property to a content control?

1 Answers