====== Pohyblivé panely ======

Do okna nad nakreslený obrázek umístíme pohyblivé panely. \\
Pohyblivé panely vytvoříme jako "User Control" - prvky, které můžene přidávat do jiných oken.

===== Samostatná třída Area reprezentující panel =====

V **Solution Exploreru** pravým tlačítkem myši vyberem **Add** a potom **User Control**. \\
Soubor pojmenujeme **Area.cs**.

{{draw_control.png}}

V "design režimu" Area vypadaá jako šedivý obdélnik. \\
Jen jsem trochu upravil jeho velikost a změnil barvu na světle žlutou.

===== Pohyb panelu pomocí myši =====

Do zdrojového textu doplníme kód podobný jako bylo kreslení čar v minulém příkladu. \\
  * Při stisku myši nad obdélnikem si zapamatujeme souřadnici a nastavíme proměnnou **press** na //true// 
  * Při uvolnění tlačítka myši vrátíme //press// na //false//

  * Při pohybu myši pozměníme polohu našeho panelu

  * Pokud pohybujeme myší a máme stisklý prostřední knoflík (kolečko na myši) pozměníme velikost panelu
  
  * Při změně velikosti si uložíme současné souřadnice jako X0 a Y0 pro zvětšení při dalším pohyby myši
  * (Souřadná soustava je spojena s levým horním rohem panelu a při změně polohy nám vyhovuje původní poloha )

<code C#>
using System;
using System.Drawing;
using System.Windows.Forms;

namespace Draw
{
    public partial class Area : UserControl
    {
        public Area ()
        {
            InitializeComponent ();
        }

        private int X0, Y0;
        private bool press = false;

        private void Area_MouseDown (object sender, MouseEventArgs e)
        {
            X0 = e.X;
            Y0 = e.Y;
            press = true;
        }

        private void Area_MouseMove (object sender, MouseEventArgs e)
        {
            if (press)
            {
                if (e.Button == MouseButtons.Left)
                {
                    Left += e.X - X0;
                    Top += e.Y - Y0;
                }
                else if (e.Button == MouseButtons.Middle)
                {
                    Width += e.X - X0;
                    Height += e.Y - Y0;
                    X0 = e.X;
                    Y0 = e.Y;
                }
            }

        }

        private void Area_MouseUp (object sender, MouseEventArgs e)
        {
            press = false;
        }
    }
}
</code>

===== Položka v hlavním menu pro přidání panelu =====

  * Vrátíme se na záložku **DrawForm.cs [Design]**
  * Do menu pod položku **Edit** přidáme položku s textem **Add Area**, identifikátor změníme na **areaMenuItem**, [[draw3#Menu|postup je podobný jako]]
  * K nové položce připojíme následující funkci
  * Příkaz ** a.Parent = pictureBox; ** umístí nově vzniklý panel nad kreslený obrázek

<code C#>
        private void areaMenuItem_Click (object sender, EventArgs e)
        {
            Area a = new Area ();
            a.Parent = pictureBox;
        }
</code>

===== Kontextové menu nového panelu =====

  * Vrátíme se na záložku **Area.cs [Design]**

  * z //Toolboxu// ze skupiny //Menus & Toolbars// přidáme **ContextMenuStrip**, pojmenujeme ho **contextMenu**

  * "klikneme" na //contextMenu//, kter0 se "usadilo" dole pod panelem
  * přidáme položky menu s texty **Color**, **Image**, **Border** a **Stretch**
  * přejmenujeme identifikátory nových položek na **colorMenuItem**, **imageMenuItem**, **borderMenuItem** a **stretchMenuItem**

  * přidáme **ColorDialog** pojmenovaný **colorDialog**
  * přidáme **OpenFileDialog** pojmenovaný **openDialog**

{{draw_area.png}}

Na položku **Color** připojíme funci měnící barvu panelu

<code C#>
        private void colorMenuItem_Click (object sender, EventArgs e)
        {
            colorDialog.Color = this.BackColor;
            if (colorDialog.ShowDialog () == DialogResult.OK)
                BackColor = colorDialog.Color;
        }
</code>

**Image** v kontextovém menu se pomocí dialogového boxu zeptá na jméno souboru. \\
Konstruktor třídy **Bitmap** s textovým parametrem načte soubor se zadaným jménem

<code C#>
        private void imageMenuItem_Click (object sender, EventArgs e)
        {
            if (openDialog.ShowDialog () == DialogResult.OK)
            {
                BackgroundImage = new Bitmap (openDialog.FileName);
            }
        }
</code>

**Border** zobrazí okraj kolem panelu. \\
Pokud bude vlastnost **Checked** nastavená na //true//, objeví se před položkou menu "zaškrtnutí"

<code C#>
        private void borderMenuItem_Click (object sender, EventArgs e)
        {
            borderMenuItem.Checked = ! borderMenuItem.Checked;
            if (borderMenuItem.Checked)
                BorderStyle = BorderStyle.FixedSingle;
            else
                BorderStyle = BorderStyle.None;
        }
</code>

Pokud z většího obrázku vidíme jen roh, můžeme obrázek zmenšit a přizpůsobit velikosti našeho panelu

<code C#>
        private void stretchMenuItem_Click (object sender, EventArgs e)
        {
            stretchMenuItem.Checked = ! stretchMenuItem.Checked;
            if (stretchMenuItem.Checked)
                BackgroundImageLayout = ImageLayout.Stretch;
            else
                BackgroundImageLayout = ImageLayout.None;
        }
</code>

{{draw_tulips.png}}

[[https://gitlab.fjfi.cvut.cz/culikzde/pw/-/blob/2f75c313/Draw/Area.cs|Area.cs]]
[[https://gitlab.fjfi.cvut.cz/culikzde/pw/-/blob/2f75c313/Draw/DrawForm.cs#L92|DrawForm.cs]]