Search code examples
windowsxamlwindows-runtimewindows-phone-8.1expression-blend

How to change TextBlock foreground color on text changed for Windows Phone 8.1 (WinRT)?


My TextBlock is bound to my viewmodel and I'd like to flash the text when it changes. I'm finding it difficult to implement this for Windows Phone 8.1 (WinRT). I'm thinking I have to use an EventTriggerBehavior and change the textBlock to a textBox then select the "TextChanged" event. Is there an easy way to do this?

Here's my attempt at doing so with a TextBox and using the EventTriggerBehavior.

<TextBlock x:Name="TestTypeTextBox"
           TextWrapping="Wrap" 
           Text="{Binding TestTypeText}" 
           FontSize="48" TextAlignment="Center" 
           HorizontalAlignment="Center" 
           VerticalAlignment="Center" 
           Margin="0" 
           FontWeight="Bold" 
           FontFamily="Segoe UI Black"
           Foreground="White" 
           Padding="0">
    <i:Interaction.Behaviors>
        <core:EventTriggerBehavior EventName="SelectionChanged">
            <Media:ControlStoryboardAction Storyboard="{StaticResource FlashingText}"/>
        </core:EventTriggerBehavior>
    </i:Interaction.Behaviors>
</TextBlock>

Solution

  • Instead of relying on events to invoke the storyboard, how about monitoring the property change of the TestTypeText, given that you are already doing this in a mvvm fashion?

    Doing so, you will need a DataTriggerBehavior rather than an EventTriggerBehavior

    <TextBlock x:Name="TestTypeTextBox"
               TextWrapping="Wrap" 
               Text="{Binding TestTypeText,FallbackValue=sss}" 
               FontSize="48" TextAlignment="Center" 
               HorizontalAlignment="Center" 
               VerticalAlignment="Center" 
               Margin="0" 
               FontWeight="Bold" 
               FontFamily="Segoe UI Black"
               Foreground="White" 
               Padding="0" RenderTransformOrigin="0.5,0.5">
        <TextBlock.RenderTransform>
            <CompositeTransform/>
        </TextBlock.RenderTransform>
        <Interactivity:Interaction.Behaviors>
            <Core:DataTriggerBehavior Binding="{Binding TestTypeText}" ComparisonCondition="NotEqual" Value="{Binding TestTypeText}">
                <Media:ControlStoryboardAction Storyboard="{StaticResource FlashingText}" />
            </Core:DataTriggerBehavior>
        </Interactivity:Interaction.Behaviors>
    </TextBlock>
    

    The code above is pretty much yours, I've only edited the behaivor so it will invoke the storyboard when the TestTypeText is changed.