wpfxamlbuttonstylescontenttemplate

WPF Button Style with textBlock contentTemplate, how to change textblock foreground colour storyboard


I have the following button style. My question, how can I change the textblock's text colour when the button is not enabled? I tried setting "ButtonTextBlock" value through the storyboard but it cannot seem to access it. Thanks.

<Style TargetType="{x:Type Button}">
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <Viewbox>
                    <!-- TODO change this textblocks colour depending on IsEnabled -->
                    <TextBlock x:Name="ButtonTextBlock" HorizontalAlignment="Center" VerticalAlignment="Stretch" Margin="0,2,0,2">
                        <ContentPresenter Content="{TemplateBinding Content}" >
                        </ContentPresenter>
                    </TextBlock>
                </Viewbox>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="BorderThickness" Value="1"></Setter>
    <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderBrush}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0">
                    <Border.Background>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                            <GradientStop x:Name="BackgroundGradientStop1" Offset="0" Color="{StaticResource AlbumScrollButtonNormal1}" />
                            <GradientStop x:Name="BackgroundGradientStop2" Offset="1" Color="{StaticResource AlbumScrollButtonNormal2}" />
                        </LinearGradientBrush>
                    </Border.Background>
                    <ContentPresenter Margin="{TemplateBinding Padding}" 
                                      Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>          

                <ControlTemplate.Triggers>
                    <!-- Button Disabled -->
                    <Trigger Property="IsEnabled" Value="False">
                        <!-- Disabled -->
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard x:Name="ButtonDisabled">
                                    <ColorAnimation Storyboard.TargetName="BackgroundGradientStop1"
                                                    Storyboard.TargetProperty="Color"
                                                    To="{StaticResource AlbumScrollButtonDisabled1}" 
                                                    Duration="0" />
                                    <ColorAnimation Storyboard.TargetName="BackgroundGradientStop2"
                                                    Storyboard.TargetProperty="Color"
                                                    To="{StaticResource AlbumScrollButtonDisabled2}"
                                                    Duration="0" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions> 

                        <!-- Enabled -->
                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard x:Name="ButtonEnabled">
                                    <ColorAnimation Storyboard.TargetName="BackgroundGradientStop1"
                                                    Storyboard.TargetProperty="Color"
                                                    To="{StaticResource AlbumScrollButtonNormal1}"
                                                    Duration="0" />
                                    <ColorAnimation Storyboard.TargetName="BackgroundGradientStop2"
                                                    Storyboard.TargetProperty="Color"
                                                    To="{StaticResource AlbumScrollButtonNormal2}"
                                                    Duration="0" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>

                    <!-- Mouse Over and Mouse leave -->
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsEnabled" Value="True" />
                            <Condition Property="IsMouseOver" Value="True" />
                        </MultiTrigger.Conditions>

                        <!-- Mouse Over -->
                        <MultiTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard x:Name="MouseOverAnimation">
                                    <ColorAnimation Storyboard.TargetName="BackgroundGradientStop1"
                                                    Storyboard.TargetProperty="Color"
                                                    To="{StaticResource AlbumScrollButtonMouseOver1}"
                                                    Duration="0:0:0:0.1" />
                                    <ColorAnimation Storyboard.TargetName="BackgroundGradientStop2"
                                                    Storyboard.TargetProperty="Color"
                                                    To="{StaticResource AlbumScrollButtonMouseOver2}"
                                                    Duration="0:0:0:0.1" />
                                </Storyboard>
                            </BeginStoryboard>
                        </MultiTrigger.EnterActions>

                        <!-- Mouse Leave -->
                        <MultiTrigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard x:Name="MouseLeaveAnimation" FillBehavior="Stop">
                                    <ColorAnimation Storyboard.TargetName="BackgroundGradientStop1"
                                                    Storyboard.TargetProperty="Color"
                                                    To="{StaticResource AlbumScrollButtonNormal1}"
                                                    Duration="0:0:0:0.1" />
                                    <ColorAnimation Storyboard.TargetName="BackgroundGradientStop2"
                                                    Storyboard.TargetProperty="Color"
                                                    To="{StaticResource AlbumScrollButtonNormal2}"
                                                    Duration="0:0:0:0.1" />
                                </Storyboard>
                            </BeginStoryboard>
                        </MultiTrigger.ExitActions>
                    </MultiTrigger>  

                    <!-- Mouse Press -->
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsEnabled" Value="True" />
                            <Condition Property="IsPressed" Value="True" />
                        </MultiTrigger.Conditions>
                        <!-- Mouse Down -->
                        <MultiTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard x:Name="MouseDownAnimation" >
                                    <ColorAnimation Storyboard.TargetName="BackgroundGradientStop1"
                                                    Storyboard.TargetProperty="Color"
                                                    To="{StaticResource AlbumScrollButtonPressed1}"
                                                    Duration="0:0:0:0.1" />
                                    <ColorAnimation Storyboard.TargetName="BackgroundGradientStop2"
                                                    Storyboard.TargetProperty="Color"
                                                    To="{StaticResource AlbumScrollButtonPressed2}"
                                                    Duration="0:0:0:0.1" />
                                </Storyboard>
                            </BeginStoryboard>
                        </MultiTrigger.EnterActions>

                        <!-- Mouse Up -->
                        <MultiTrigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard x:Name="MouseUpAnimation" FillBehavior="Stop">
                                    <ColorAnimation Storyboard.TargetName="BackgroundGradientStop1"
                                                    Storyboard.TargetProperty="Color"
                                                    To="{StaticResource AlbumScrollButtonMouseOver1}"
                                                    Duration="0:0:0:0.1" />
                                    <ColorAnimation Storyboard.TargetName="BackgroundGradientStop2"
                                                    Storyboard.TargetProperty="Color"
                                                    To="{StaticResource AlbumScrollButtonMouseOver2}"
                                                    Duration="0:0:0:0.1" />
                                </Storyboard>
                            </BeginStoryboard>
                        </MultiTrigger.ExitActions>
                    </MultiTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Solution

  • You can animate Foreground.Color of the Button when IsEnabled=False. Also there is no need for ContentTemplate in your Style. You can move ViewBox to ControlTemplate and remove ContentTemplate

    <ControlTemplate TargetType="{x:Type Button}">
       <Border ...>
           <Viewbox>
              <ContentPresenter ... />
           </Viewbox>
       </Border>    
       <ControlTemplate.Triggers>
          <!-- Button Disabled -->
          <Trigger Property="IsEnabled" Value="False">
             <!-- Disabled -->
             <Trigger.EnterActions>
                <BeginStoryboard>
                   <Storyboard x:Name="ButtonDisabled">
                      <ColorAnimation Storyboard.TargetProperty="Foreground.Color" To="Green" Duration="0:0:0.1"/>
                   </Storyboard>
                   <!--other animations-->
                </BeginStoryboard>
             </Trigger.EnterActions>
          </Trigger>
          <!--other triggers-->
       </ControlTemplate.Triggers>
    </ControlTemplate>