locked
How can I change the scale of a TextBlock on MouseOver? RRS feed

  • Question

  • All the examples I found deal with simple properties, instead of scale transformations.

     

    I have to believe there is an easy way to add a trigger (inline), without creating a new style.

     

    The code below does NOT work, but it should demonstrate what I think I want to do. Ultimately, I'd want the text block to grow vertically and horizontally, showing I can clik on it to engage an action. Seems simple enough to me, yet I'm stumped.

     

    Code Snippet

    <StackPanel Orientation="Vertical"  VerticalAlignment="Center">
        <TextBlock x:Name="ServerText"
                   Margin="0,0,0,5"
                   Opacity=".5"
                   Background="#00112233"
                   HorizontalAlignment="Left"
                   Foreground="White"
                   FontSize="12"
                   Text="{Binding Path=ServerName}">

            <TextBlock.Triggers>
                <EventTrigger RoutedEvent="Mouse.MouseEnter">

                    <EventTrigger.Actions>
                        <BeginStoryboard Name="ExpandText">

                            <Storyboard>

                                <DoubleAnimation
                                    Storyboard.TargetName="ServerText"
                                    Storyboard.TargetProperty="RenderTransform.ScaleX"
                                    To="1.5"
                                    Duration="0:0:5"
                                    AutoReverse="True"
                                    RepeatBehavior="Forever" />

                            </Storyboard>

                        </BeginStoryboard>
                    </EventTrigger.Actions>

                </EventTrigger>
            </TextBlock.Triggers>


        </TextBlock>

     

     

     

    Thursday, March 20, 2008 5:56 PM

Answers

  • Hi TBeaulie,

     

    you're quite near. The RenderTransform-Property of your TextBlock doesn't contain a ScaleTransform-Objekt, so the animation can't animate anything. The TargetName on the DoubleAnimation is also not necessary. The following Block works:

     

     

    Code Snippet

    <TextBlock Margin="0,0,0,5"

    Opacity=".5"

    Background="#00112233"

    HorizontalAlignment="Left"

    FontSize="12"

    Text="Hello">

    <TextBlock.RenderTransform>

    <ScaleTransform/>

    </TextBlock.RenderTransform>

    <TextBlock.Triggers>

    <EventTrigger RoutedEvent="Mouse.MouseEnter">

    <EventTrigger.Actions>

    <BeginStoryboard Name="ExpandText">

    <Storyboard>

    <DoubleAnimation

    Storyboard.TargetProperty="RenderTransform.ScaleX"

    To="1.5"

    Duration="0:0:5"

    AutoReverse="True"

    RepeatBehavior="Forever" />

    </Storyboard>

    </BeginStoryboard>

    </EventTrigger.Actions>

    </EventTrigger>

    </TextBlock.Triggers>

    </TextBlock>

     

     

    Thursday, March 20, 2008 7:01 PM