Usability tutorial with transparency c#

Question

I am working with c# and I need to do a usability tutorial, as well as in games that darken the screen, highlight a component and display a tip below.

So far I made a Form on top of the other, because I could not make a layer without it interfering with the system, because I changed some windows settings.

Finally, above Formmain, there was a 50% transparent form2 (with 3 panels that calculate the area of each in the hand to highlight a specific component that is in Formmain) and above this, a third form with a panel containing such a tip. I found this way very bad, but I found no alternative, because I did not find any API or similar that performs this procedure.

Answer 1

As I had commented, I was developing a form that meets your need.

Follow the commented code:

using System;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace Testes
{
    //Form para destaques de controles
    //Utilizar para Condução do usuário, dicas, etc
    //Dev Rovann Linhalis - 22/06/2017
    public partial class FormHighlightControl : Form
    {
        //Controle que deve ser destacado
        Control ControleDestaque { get; set; }
        //Mensagem que será exibida
        string MensagemDica { get; set; }
        //Form Pai onde está o controle a ser exibido
        Form FormPai { get; set; }
        //Painel que será transparente
        Panel PainelTransparente { get; set; }

        /// <summary>
        /// Form de destaque de controles e exibição de dicas
        /// </summary>
        /// <param name="_parent">Form que será escurecido</param>
        /// <param name="_control">Controle que será destacado</param>
        /// <param name="_message">Mensagem de dica</param>
        /// <param name="_opacity">Transparencia do Form, 0=Invisivel, 1=Visivel, Recomendado 0.4</param>
        public FormHighlightControl(Form _parent, Control _control, string _message, double _opacity)
        {
            InitializeComponent();
            //Define a chave de transparencia do form
            this.TransparencyKey = Color.Magenta;
            //Define a cor do sombreamento do form
            this.BackColor = Color.Black;
            //Atribuição dos valores passados por parametro
            this.FormPai = _parent;
            this.Opacity = _opacity;
            this.ControleDestaque = _control;
            this.MensagemDica = _message;
            //Define visual do form
            this.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
            this.ShowInTaskbar = false;
            this.Size = this.FormPai.Size;
            this.Location = this.FormPai.Location;

            //Fechar com ESC
            this.KeyPreview = true;
            this.KeyDown += FormHighlightControl_KeyDown;
        }

        //Fechar com ESC
        void FormHighlightControl_KeyDown(object sender, KeyEventArgs e)
        {
            if (e.KeyData == Keys.Escape)
                this.Close();
        }

        //Ao carregar o form, monta o painel transparente
        private void FormHighlightControl_Load(object sender, EventArgs e)
        {
            PainelTransparente = new Panel();
            PainelTransparente.Size = ControleDestaque.Size;
            PainelTransparente.BackColor = Color.Magenta;
            Rectangle r = FormPai.RectangleToScreen(FormPai.ClientRectangle);
            PainelTransparente.Location = new Point(ControleDestaque.Location.X + SystemInformation.SizingBorderWidth + r.Left - FormPai.Left, ControleDestaque.Location.Y + r.Top - FormPai.Top);
            PainelTransparente.Parent = this;
        }

        //Ao exibir o Form, Mostra a dica
        protected override void OnShown(EventArgs e)
        {
            base.OnShown(e);
            if (!String.IsNullOrEmpty(this.MensagemDica))
            {
                toolTip1.ToolTipTitle = "Dica";
                toolTip1.ToolTipIcon = ToolTipIcon.Info;
                toolTip1.IsBalloon = true;
                toolTip1.OwnerDraw = true;
                toolTip1.SetToolTip(PainelTransparente, MensagemDica);
                toolTip1.Show(MensagemDica, PainelTransparente, PainelTransparente.Size.Width, PainelTransparente.Size.Height, 10000);
            }
        }
        //Fechar form ao clicar com o mouse em qlqr lugar
        private void FormHighlightControl_MouseClick(object sender, MouseEventArgs e)
        {
            this.Close();
        }



    }
}

Now, whenever you want to highlight a control, and display text as a hint, make the Form call like this:

        private void buttonOk_Click(object sender, EventArgs e)
        {
            FormHighlightControl form = new FormHighlightControl(this, buttonOk, "Este é o botão OK!", .4);
            form.ShowDialog();

        }

Upshot:

ps. Several options can be defined by the visual studio interface, I preferred to put them inside the constructor for a better understanding of who to use the code.

Edit

After better thinking about needs, I decided to create a class to control the tips that will be displayed:

public class HighLightHint
{
    /// <summary>
    /// Título a ser exibido na dica
    /// </summary>
    public string Title { get; set; }
    /// <summary>
    /// Texto da dica
    /// </summary>
    public string Mensagem { get; set; }
    /// <summary>
    /// Controle ao qual a dica é atribuida
    /// </summary>
    public Control Control { get; set; }
}

Once done, now in Form, you can add several tips, plus a wizard image. Follow Form code:

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Runtime.InteropServices;
using System.Text;
using System.Windows.Forms;

namespace Testes
{
//Form para destaques de controles
//Utilizar para Condução do usuário, dicas, etc
//Dev Rovann Linhalis - 28/06/2017
public partial class FormHighlightControl : Form
{
    //Painel que será transparente
    Panel PainelTransparente { get; set; }
    //Form que será exibido o assistente
    Form PicAssistente { get; set; }
    //índice da dica exibida
    int HintIndex;
    //Form Pai onde está o controle a ser exibido
    public Form FormPai { get; set; }

    ToolTip toolTip1;

    /// <summary>
    /// Lista de Dicas
    /// </summary>
    public List<HighLightHint> Lista { get; set; }
    //Imagem do assistente (usar png com fundo transparente)
    public Image Assistente { get; set; }

    /// <summary>
    /// Form de destaque de controles e exibição de dicas
    /// </summary>
    /// <param name="_parent">Form que será escurecido</param>
    /// <param name="_control">Controle que será destacado</param>
    /// <param name="_message">Mensagem de dica</param>
    /// <param name="_opacity">Transparencia do Form, 0=Invisivel, 1=Visivel, Recomendado 0.4</param>
    public FormHighlightControl(Form _parent, double _opacity, List<HighLightHint> _lista)
    {
        InitializeComponent();

        HintIndex = -1;
        //Define a chave de transparencia do form
        this.TransparencyKey = Color.Magenta;
        //Define a cor do sombreamento do form
        this.AllowTransparency = true;
        this.BackColor =Color.Black;
        //Atribuição dos valores passados por parametro
        this.FormPai = _parent;
        this.Opacity = _opacity;

        //Define visual do form
        this.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
        this.ShowInTaskbar = false;
        this.Size = this.FormPai.Size;
        this.Location = this.FormPai.Location;
        this.Lista = _lista;
        //Fechar com ESC
        this.KeyPreview = true;
        this.KeyDown += FormHighlightControl_KeyDown;

    }

    public FormHighlightControl(Form _parent, double _opacity , List<HighLightHint> _lista, Image _assistente) : this(_parent, _opacity, _lista)
    {
        this.Assistente = _assistente;
    }

    //Fechar com ESC
    void FormHighlightControl_KeyDown(object sender, KeyEventArgs e)
    {
        if (e.KeyData == Keys.Escape)
        {
            this.Close();
            if (PicAssistente != null && !PicAssistente.IsDisposed)
                PicAssistente.Close();
        }
    }

    private void MostrarDica(int index)
    {
        if (this.Lista.Count > index)
        {
            this.Invalidate();

            if (toolTip1 != null)
                toolTip1.RemoveAll();

            toolTip1 = new ToolTip();

            if (PainelTransparente == null)
                PainelTransparente = new Panel();

            toolTip1.RemoveAll();
            if (PicAssistente != null && !PicAssistente.IsDisposed)
                PicAssistente.Close();

            Rectangle r = FormPai.RectangleToScreen(FormPai.ClientRectangle);
            Point newLocation = new Point(this.Lista[index].Control.Location.X + SystemInformation.SizingBorderWidth + r.Left - FormPai.Left, this.Lista[index].Control.Location.Y + r.Top - FormPai.Top);

            PainelTransparente.Size = this.Lista[index].Control.Size;
            PainelTransparente.BackColor = Color.Magenta;

            PainelTransparente.Location = newLocation;
            PainelTransparente.Parent = this;

            if (Assistente != null)
            {
                if (PicAssistente == null || PicAssistente.IsDisposed)
                {
                    PicAssistente = new Form();
                }

                PicAssistente.TopMost = true;
                PicAssistente.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
                PicAssistente.ShowInTaskbar = false;
                PicAssistente.BackColor = Color.Magenta;
                PicAssistente.TransparencyKey = Color.Magenta;
                PicAssistente.AllowTransparency = true;
                PicAssistente.StartPosition = FormStartPosition.Manual;
                PicAssistente.Size = new Size(150, 200);

                if (newLocation.X > this.Width/2)
                {
                    if (newLocation.Y > this.Height / 2)
                    {
                        PicAssistente.Location = new Point(this.Location.X - this.Lista[index].Control.Width + this.Lista[index].Control.Location.X + SystemInformation.SizingBorderWidth + r.Left - FormPai.Left, this.Location.Y - PicAssistente.Height + this.Lista[index].Control.Location.Y + r.Top - FormPai.Top);
                    }
                    else
                    {
                        PicAssistente.Location = new Point(this.Location.X - this.Lista[index].Control.Width + this.Lista[index].Control.Location.X + SystemInformation.SizingBorderWidth + r.Left - FormPai.Left, this.Location.Y + this.Lista[index].Control.Location.Y + r.Top - FormPai.Top);
                    }
                }
                else
                {
                    if (newLocation.Y > this.Height / 2)
                    {
                        PicAssistente.Location = new Point(this.Location.X + this.Lista[index].Control.Width + this.Lista[index].Control.Location.X + SystemInformation.SizingBorderWidth + r.Left - FormPai.Left, this.Location.Y - PicAssistente.Height + this.Lista[index].Control.Location.Y + r.Top - FormPai.Top);
                    }
                    else
                    {
                        PicAssistente.Location = new Point(this.Location.X + this.Lista[index].Control.Width+ this.Lista[index].Control.Location.X + SystemInformation.SizingBorderWidth + r.Left - FormPai.Left, this.Location.Y + this.Lista[index].Control.Location.Y + r.Top - FormPai.Top);
                    }
                }

                PicAssistente.BackgroundImage = Assistente;
                //PicAssistente.BackColor = Color.FromArgb(100, 0, 0, 0);
                PicAssistente.BackgroundImageLayout = ImageLayout.Stretch;
                PicAssistente.Show();

            }

            if (!String.IsNullOrEmpty(this.Lista[index].Mensagem))
            {


                toolTip1.ToolTipTitle = this.Lista[index].Title;
                toolTip1.ToolTipIcon = ToolTipIcon.Info;
                toolTip1.IsBalloon = true;
                toolTip1.OwnerDraw = true;
                if (PicAssistente != null)
                {
                    toolTip1.SetToolTip(PicAssistente, this.Lista[index].Mensagem);
                    toolTip1.Show(this.Lista[index].Mensagem, PicAssistente, PicAssistente.Width/2, 0, 10000);
                }
                else
                {
                    toolTip1.SetToolTip(PainelTransparente, this.Lista[index].Mensagem);
                    toolTip1.Show(this.Lista[index].Mensagem, PainelTransparente, PainelTransparente.Size.Width, PainelTransparente.Size.Height, 10000);
                }
            }


        }
        else
        {
            this.Close();
            if (PicAssistente != null && !PicAssistente.IsDisposed)
                PicAssistente.Close();
        }
    }

    //Ao exibir o Form, Mostra a dica
    protected override void OnShown(EventArgs e)
    {
        base.OnShown(e);
        MostrarDica(++HintIndex);
    }
    //Fechar form ao clicar com o mouse em qlqr lugar
    private void FormHighlightControl_MouseClick(object sender, MouseEventArgs e)
    {
        MostrarDica(++HintIndex);
    }



}
}

And finally, the call from Form:

 private void buttonOk_Click(object sender, EventArgs e)
 {
        List<HighLightHint > listaDicas = new List<HighLightHint>();
        listaDicas.Add(new HighLightHint() { Control = listBox1, Mensagem = "Este é o ListBox1!", Title = "Titulo dica 1" });
        listaDicas.Add(new HighLightHint() { Control = listBox2, Mensagem = "Este é o ListBox2!", Title = "Titulo dica 2" });
        listaDicas.Add(new HighLightHint() { Control = listBox3, Mensagem = "Este é o ListBox3!", Title = "Titulo dica 3" });
        listaDicas.Add(new HighLightHint() { Control = buttonOk, Mensagem = "Este é o buttonOK!", Title = "Titulo dica 4" });



        FormHighlightControl form = new FormHighlightControl(this,.4, listaDicas , global::Testes.Properties.Resources.wizard_magician_conjure_conjurer_icon_icons_com_53580);
        form.ShowDialog();

}

I don’t have a lot of time, but I thought it was cool. See if it helps you.