Style Trigger for PackIcon

[enumerable-entity]

Hi guys! I am writing a to-do list app for my school project and I'm stuck. Maybe someone could help me. Here is the code

<materialDesign:PackIcon                 Kind="Calendar" 
                                         Foreground="{StaticResource PrimaryHueMidBrush}" 
                                         DockPanel.Dock="Right" 
                                         VerticalAlignment="Center" 
                                         Height="15pt" 
                                         Width="15pt" 
                                         Margin="10,0,5,0">
            <materialDesign:PackIcon.Style>
                                    <Style TargetType="materialDesign:PackIcon">
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding IsCompleted}" Value="true">
                                                <Setter Property="Foreground" Value="Gray"/>
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
            </materialDesign:PackIcon.Style>
</materialDesign:PackIcon>

<TextBlock                    TextWrapping="Wrap" 
                              VerticalAlignment="Center"  
                              FontSize="12" 
                              Text="{Binding Content}">
            <TextBlock.Style>
                                    <Style TargetType="TextBlock">
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding IsCompleted}" Value="true">
                                                <Setter Property="TextDecorations" Value="Strikethrough"/>
                                                <Setter Property="Foreground" Value="Gray"/>
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
            </TextBlock.Style>
</TextBlock>

I can't realize why the style trigger for text block works just fine, but for IconPack it not working. These controls are placed just like here, one after another.

[Keboo]

@enumerable-entity I assume the issue you are running into is the Foreground property not changing on your PackIcon when IsCompleted is set to true. The reason for this is because you have set the Foreground property on the PackIcon directly. Within WPF, these direct assignments always take precedence over anything in a style; which is why the style trigger does not appear to work.

To get the behavior you want, you need to set the default value in the style and then the trigger can override it. Something like this:

<materialDesign:PackIcon                 
    Kind="Calendar" 
    DockPanel.Dock="Right" 
   VerticalAlignment="Center" 
   Height="15" 
   Width="15" 
   Margin="10,0,5,0">
    <materialDesign:PackIcon.Style>
        <Style TargetType="materialDesign:PackIcon" BasedOn="{StaticResource {x:Type materialDesign:PackIcon}}">
            <Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidBrush}"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsCompleted}" Value="true">
                    <Setter Property="Foreground" Value="Gray"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </materialDesign:PackIcon.Style>
</materialDesign:PackIcon>

A few other minor details I changed:

• Set the BasedOn portion of the style. This allows your style to inherit from the default one.
• Changed to using DynmaicResource for the brush as this allows the color to automatically update if that theme brush ever changes.

[enumerable-entity]

Yes, it's work. Thank you very much!