Image animations

Question

Image animations

Navigation

#1 by (1 votes)

0

Hi, I created a stackpanel where I placed the images located in the same position, what I want is for each image to be shown one by one for 5 seconds.

 <StackPanel x:Name="derecho" Margin="250,50,40,50">

        <Image x:Name="img1" Height="300" Width="300" Source="C:icono.png"/>
        <Image x:Name="img2" Margin="0,-300,0,0" Height="300" Width="300" Source="C:img_logo_sistema.png" Visibility="Hidden"/>
        <Image x:Name="img3" Margin="0,-300,0,0" Height="300" Width="300" Source="C:img_loguito.png" Visibility="Hidden"/>


    </StackPanel>

created in WPF and C #

c# wpf visual-studio

asked by positiveSteve 30.12.2018 в 19:58

source

1 answer

$ this-request-getData (); does not recover the data How to export to Excel data from a table (datatable) asp.net mvc 5

score 1 · Accepted Answer

It can be done using Storyboards, in this case, I will omit opacity animations and only the visibility property of the images will be changed. Since in appearance all the images have the same size, I decided to use a Grid to avoid adjusting the position of the images using the margin property.

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Window.Resources>
        <!--Animación-->
        <Storyboard x:Key="Secuencia">
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="img1">
                <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:5" Value="{x:Static Visibility.Hidden}"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="img2">
                <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:5" Value="{x:Static Visibility.Visible}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:10" Value="{x:Static Visibility.Hidden}"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="img3">
                <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:10" Value="{x:Static Visibility.Visible}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:15" Value="{x:Static Visibility.Hidden}"/>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

    <Window.Triggers>
        <!--Se desencadena la animación al cargar la ventana-->
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource Secuencia}"/>
        </EventTrigger>
    </Window.Triggers>

    <Grid>
        <!--Controles de imagen, se puede usar Grid en lugar de StackPanel para evitar ajustar la posición de las imágenes-->
        <Grid Height="300" Width="300" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Image x:Name="img1" Source="res/img1.png"/>
            <Image x:Name="img2" Source="res/img2.png" />
            <Image x:Name="img3" Source="res/img3.png" />
        </Grid>
    </Grid>
</Window>

The Storyboard called Sequence makes the change of visibility of the images. This is executed by the EventTrigger load% of the window.
If you want the animation to repeat indefinitely, you can add the attribute RepeatBehavior="Forever" in the opening tag of Storyboard .