0

¿Es posible realizar este efecto de animación CSS en un panel de WindowsForms C#?

introducir la descripción de la imagen aquí

Hago esto, pero obviamente no obtengo ese resultado:

    private void panel_MouseDown(object sender, MouseEventArgs e)
    {
        panel_titulo.BackColor = Color.LightGray;
    }

    private void panel_MouseEnter(object sender, EventArgs e)
    {
        panel_titulo.BackColor = Color.Crimson;
    }

    private void panel_titulo_MouseLeave(object sender, EventArgs e)
    {
        panel_titulo.BackColor = Color.Transparent;
    }

    private void panel_MouseUp(object sender, MouseEventArgs e)
    {
         panel_titulo.BackColor = Color.Crimson;
    }

He probado colocando Imágenes Gif pero los gif no se reproducen cuando ejecuto la aplicación, se muestra la imagen fija sin animación.

¿Es posible realizar este efecto?

Entorno: Visual Studio & .NET Netframework 4

3
  • Has puesto los controladores de los eventos pero, ¿has enlazado estos con el panel?
    – Andres
    el 15 ene. 2018 a las 21:53
  • Andres, si obtengo el efecto de los controladores de eventos que he colocado, pero quiero decir si puedo lograr el efecto que se muestra en la imagen, no como esta en los controladores con un color completo sin animación. Es si se puede obtener esa animación. el 15 ene. 2018 a las 21:55
  • AH. Vale, Perdona. Con WPF sé que se puede hacer, pero con Windows Forms no lo se. Lo Siento. Un saludo.
    – Andres
    el 15 ene. 2018 a las 22:03

1 respuesta 1

2

Con Windows Forms resulta bastante complicado hacer ese tipo de cosas.

Se me ocurre que podría hacerse por ejemplo creando diferentes imágenes con los distintos estados del botón e ir cambiando la propiedad BackgroundImage con un Timer.

Prueba este ejemplo. Es muy rudimentario pero puedes hacerte una idea de lo que digo:

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Windows.Forms;
using Timer = System.Windows.Forms.Timer;

namespace WindowsApp_C
{
    public partial class Form1 : Form
    {

        private readonly Color _colorRosa;
        private readonly List<Image> _imageList;
        private bool _isMouseHover;
        private int _currentImageIndex = -1;
        private readonly Timer _animationTimer;
        private readonly Button _animatedButton;

        public Form1()
        {
            InitializeComponent();
            _colorRosa = Color.FromArgb(254, 0, 114);
            _imageList = CreateImages();
            _animationTimer = new Timer
            {
                Enabled = false,
                Interval = 50
            };
            _animationTimer.Tick += AnimateButton;

            _animatedButton = new Button
            {
                Name = "AnimatedButton",
                BackColor = Color.White,
                Text = @"CONTINUAR",
                ForeColor = _colorRosa,
                Left = 10,
                Top = 10,
                Width = 250,
                Height = 50,
                Font = new Font(FontFamily.GenericSansSerif, 20, FontStyle.Bold),
                FlatStyle = FlatStyle.Flat,
                FlatAppearance = {BorderColor = _colorRosa, BorderSize = 2}
            };
            _animatedButton.MouseEnter += (sender, args) =>
            {
                _animatedButton.FlatAppearance.BorderColor = Color.White;
                _isMouseHover = true;
                if (!_animationTimer.Enabled) _animationTimer.Start();
            };
            _animatedButton.MouseLeave += (sender, args) =>
            {
                _animatedButton.FlatAppearance.BorderColor = _colorRosa;
                _isMouseHover = false;
                if (!_animationTimer.Enabled) _animationTimer.Start();
            };
            Controls.Add(_animatedButton);
        }

        private void AnimateButton(object sender, EventArgs e)
        {
            if (_isMouseHover && _currentImageIndex >= _imageList.Count - 1
                || !_isMouseHover && _currentImageIndex <= 0)
            {
                _animationTimer.Stop();
                if (!_isMouseHover)
                    _animatedButton.ForeColor = _colorRosa;
                return;
            }

            _currentImageIndex += _isMouseHover ? 1 : -1;
            _animatedButton.BackgroundImage = _imageList[_currentImageIndex];
            _animatedButton.ForeColor = Color.White;
        }

        private List<Image> CreateImages()
        {
            var lista = new List<Image>();
            int width = 250;
            int height = 50;
            using (SolidBrush brush = new SolidBrush(_colorRosa))
            using (SolidBrush whiteBrush = new SolidBrush(Color.White))
            {
                for (int i = 0; i <= width; i += 10)
                {
                    var bmp = new Bitmap(width, height);
                    using (Graphics gfx = Graphics.FromImage(bmp))
                    {
                        gfx.FillRectangle(whiteBrush, 0, 0, width, height);
                        gfx.FillRectangle(brush, width / 2 - i / 2, 0, i, height);
                    }
                    lista.Add(bmp);
                }
            }
            return lista;
        }
    }

}

En este formulario creo el botón a animar y lo añado al formulario.

El método CreateImages crea una serie de imágenes con una barra vertical rosa que se va agrandando hasta ocupar todo el ancho del botón.

Los eventos MouseEnter y MouseLeave se encargan de arrancar el Timer que ejecuta la animación.

El método que ejecuta el Timer se encarga de ir reemplazando las imágenes en el BackgroundImage del botón, hacia adelante o hacia atrás en la lista de imágenes dependiendo de si el ratón está sobre el botón o fuera de éste.

Evidentemente el efecto estaría más logrado si el texto estuviese también en la imagen, aunque esto provocaría que no pudieras modificarlo a través de la propiedad Text del control. A no ser que generaras las imágenes dinámicamente como lo hago yo en el ejemplo...

Puede haber otras formas de hacerlo, pero ninguna va a ser sencilla.

4
  • Comprendo, si en WindowsForms todas serán complicadas, pero esta me sirve para adaptarla a lo que necesito. Gracias. el 16 ene. 2018 a las 12:38
  • En el método AnimateButton ¿Qué significa esta expresión ? 1 : -1; ? el 16 ene. 2018 a las 15:24
  • 1
    ? : es un operador ternario, si se cumple la condición anterior a ? devuelve el primer valor, si no el segundo. En este caso: _isMouseHover ? 1 : -1 si _isMouseHover es verdadero devuelve 1 (suma 1 al índice de la imagen a mostrar), si es falso devuelve -1 (resta 1 al índice de la imagen a mostrar) el 16 ene. 2018 a las 15:27
  • Perfecto, Gracias! el 16 ene. 2018 a las 15:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.