Hover effect in C # panel

0

Is it possible to perform this animation effect CSS in a WindowsForms C # panel?

  

I do this, but obviously I do not get that result:

    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;
    }
  

I have tried placing Images Gif but the gifs do not play when I run the application, the still image without animation is displayed.

Is it possible to do this effect?

Environment: Visual Studio & .NET Netframework 4

    
asked by J. Rodríguez 15.01.2018 в 22:43
source

1 answer

2

Windows Forms is very complicated to do that kind of thing.

It occurs to me that it could be done for example by creating different images with the different states of the button and changing the property BackgroundImage with a Timer .

Try this example. It's very rudimentary but you can get an idea of what I'm saying:

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;
        }
    }

}

In this form I create the button to animate and I add it to the form.

The CreateImages method creates a series of images with a vertical pink bar that enlarges to fill the entire width of the button.

The events MouseEnter and MouseLeave are responsible for booting the Timer that executes the animation.

The method that executes Timer is responsible for replacing the images in the BackgroundImage of the button, forward or backward in the list of images depending on whether the mouse is on the button or outside it.

Obviously the effect would be more achieved if the text was also in the image, although this would cause that you could not modify it through the property Text of the control. Unless you generated the images dynamically as I do in the example ...

There may be other ways to do it, but none will be simple.

    
answered by 16.01.2018 / 00:15
source