Use a Storyboard for various controls

Question

Use a Storyboard for various controls

Navigation

#1 by (0 votes)

0

Good afternoon, thank you in advance for the help.

My question is, how can I use a storyboard in other controls since when I create it it is associated with a specific control in the Storyboard.TargetName, in my application wpf is linked to one image (image1) and when I try to use it in another image (image2) always returns to the initial reference. this is the storyboard code and vb

<Storyboard x:Key="efectoAumento">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="imgIcono">
            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            <EasingDoubleKeyFrame x:Name="easingDoubleKeyFrame" KeyTime="0:0:1" Value="1.514"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="imgIcono">
            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1.514"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="efectoNormal">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="imgIcono">
            <EasingDoubleKeyFrame KeyTime="0" Value="1.514"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="imgIcono">
            <EasingDoubleKeyFrame KeyTime="0" Value="1.514"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>'  Private Sub EfectoHover(sender As Object, e As MouseEventArgs)
    Dim efecto As Storyboard = Resources("efectoAumento")
    efecto.Begin(Me)
End Sub

Private Sub EfectoNormal(sender As Object, e As MouseEventArgs)
    Dim efecto As Storyboard = Resources("efectoNormal")
    efecto.Begin(Me)
End Sub'

wpf xaml visual-studio

asked by Benkos 28.10.2016 в 00:37

source

1 answer

How to recover part of compound data with JDBC? Implement a BottomBar without Fragments?

score 0 · Accepted Answer

I think what you're trying to do is a Hover effect. The way to reuse the animations, is not changing the TargetName of them, it is creating a style with the functionality that can share all the objects you want.

For that you have to create the animations, without the tags of TargetName, and create a style for the object in question, in the example an Image. Within this style, we will add a property trigger, for the IsMouseOver property, and an input animation and an output animation. Then we tell the Image that we want our style and dancing.

I leave you the example code, I used some animations basically the same as yours, and I applied it to 2 Images:

<Window.Resources>
    <Storyboard x:Key="EfectoAumento1">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)">
            <EasingDoubleKeyFrame KeyTime="0" Value="257"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="300"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)">
            <EasingDoubleKeyFrame KeyTime="0" Value="220"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="300"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="EfectoNormal1">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)">
            <EasingDoubleKeyFrame KeyTime="0" Value="300"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="257"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)">
            <EasingDoubleKeyFrame KeyTime="0" Value="300"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="220"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

    <Style x:Key="ImgMouseOverStyle" TargetType="Image">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource EfectoAumento1}"/>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource EfectoNormal1}"/>
                </Trigger.ExitActions>
            </Trigger>
        </Style.Triggers>
    </Style>

</Window.Resources>
<Grid>
    <Image x:Name="image" Style="{StaticResource ImgMouseOverStyle}" 
        HorizontalAlignment="Left" Height="220" Margin="274,183,0,0" 
        VerticalAlignment="Top" Width="257" Source="Images/unnamed.png"/>
    <Image x:Name="image1" Style="{StaticResource ImgMouseOverStyle}" 
        HorizontalAlignment="Left" Height="225" Margin="667,150,0,0" 
        VerticalAlignment="Top" Width="270" Source="Images/810CGXknuRL._SL1500_.jpg"/>

</Grid>