How to apply WPF stype to children of button template

Question

I'm new to WPF and I would like to change to color of the text and icon of a button template. But it seems I can only change the opacity. I guess I should apply the style to the children of the button but I don't know how.

Here is the template:

<Button x:Name="btnApp1" Width="56" Height="66" Margin="0,0,0,0" Style="{StaticResource AppButton}">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <iconPacks:PackIconMaterial Kind="StarOutline"  Width="48" Height="48" VerticalAlignment="Top" HorizontalAlignment="Center" Foreground="#FFFFFFFF" />
                    <TextBlock x:Name="tButton" HorizontalAlignment="Center" VerticalAlignment="Bottom" Foreground="#FFFFFFFF" FontWeight="Bold">PVIE</TextBlock>
                </Grid>
            </ControlTemplate>
        </Button.Template>
    </Button>

And here is the style:

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

    <Setter Property="Opacity" Value="0.25" />
    <Setter Property="Foreground" Value="#FFFF9966" />

    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0:0.3" />
                        <!--<ColorAnimation Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" To="Green" Duration="0:0:0:0.3" />-->

                        <ColorAnimationUsingKeyFrames Storyboard.Target="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                                                        Storyboard.TargetProperty="(TextBox.Foreground).(SolidColorBrush.Color)">
                            <EasingColorKeyFrame KeyTime="0" Value="Green" />
                        </ColorAnimationUsingKeyFrames>

                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.25" Duration="0:0:0:0.3" />
                        <!--<ColorAnimation Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" To="White" Duration="0:0:0:0.3" />-->

                        <ColorAnimationUsingKeyFrames Storyboard.Target="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                                                        Storyboard.TargetProperty="(TextBox.Foreground).(SolidColorBrush.Color)">
                            <EasingColorKeyFrame KeyTime="0" Value="White" />
                        </ColorAnimationUsingKeyFrames>

                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
        </Trigger>
    </Style.Triggers>

</Style>

Thanks for your help.

I'd like to do both, if possible – Dams Jun 07 '17 at 14:04 — Dams, Jun 07 '17 at 14:04

score 1 · Accepted Answer · answered Jun 07 '17 at 14:04

Bind the Foreground property of the TextBlock and the Icon in the ControlTemplate using a {TemplateBinding}:

<Button x:Name="btnApp1" Width="56" Height="66" Margin="0,0,0,0" Style="{StaticResource AppButton}">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Grid>
                <iconPacks:PackIconMaterial Kind="StarOutline"  Width="48" Height="48" VerticalAlignment="Top" HorizontalAlignment="Center"
                                Foreground="{TemplateBinding Foreground}" />
                <TextBlock x:Name="tButton" HorizontalAlignment="Center" VerticalAlignment="Bottom" 
                           Foreground="{TemplateBinding Foreground}" FontWeight="Bold">PVIE</TextBlock>
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>

No :) You have accepted the answer but not upvoted it. You click the large up arrow to the left of a post to upvote it. — mm8, Jun 07 '17 at 14:26

How to apply WPF stype to children of button template

1 Answers1