Reklama

C# – Tipy, rady, návody – 12: Jak si vytvořit vlastní ovládací prvek

Úvod

Tento příspěvek je zaměřen na vytvoření vlastního ovládacího prvku v programovacím prostředí Visual Studio, protože asi každý programátor alespoň jednou za život narazí na to, že mu standardní ovládací prvky nestačí. Tento návod je ale také vhodný pro implementaci stažené grafiky z kategorie „Grafické komponenty“.

Vytvoření a implementace vlastního ovládacího prvku

Vytvořit vlastní ovládací prvek lze pomocí „Project – Add User Control“ . Poté se objeví dialogové okno, kde do položky „Name“ vložíme jméno prvku a potvrdíme tlačítkem „Add“, viz Obr. 1.

Obr. 1: Vytvoření vlastního ovládacího prvku

Obr. 1: Vytvoření vlastního ovládacího prvku

Nyní se zobrazila plocha pro vytváření vlastního ovládacího prvku, která je velmi podobná jako při návrhu běžné aplikace. Pro vytvoření ovládacího prvku použijeme tři komponenty PictureBox (pictureBoxSwitch, pictureBoxLED1 a pictureBoxLED2) a dvě komponenty ImageList (imageListSwitch, imageListLED), viz Obr. 2.

Obr. 2: Seřazení komponent pro vytvoření vlastního ovládacího prvku

Obr. 2: Seřazení komponent pro vytvoření vlastního ovládacího prvku

Pro vytvoření našeho ovládacího prvku použijeme jako základ dva grafické prvky, které zde byly uveřejněny: „kolébkový“ spínač a LED indikátor.
Pro „ imageListSwitch“ nastavíme Size na 50 x 100px, ColorDepth na 32bitové barvy a vložíme do Images dva obrázky spínače, které lze stáhnout ZDE . U „imageListLED“ nastavíme Size na hodnotu 50 x 50px a ColorDepth stejně jako v předchozím případě a do Images vložíme dva obrázky, které lze stáhnout ZDE .
Dvěma komponentám PictureBox „pictureBoxLED1“ a „pictureBoxLED2“, které budou zobrazovat LED indikátory, nastavíme vlastnost Size na hodnotu 50 x 50px. Komponentě PictureBox „PictureBoxSwitch“ nastavíme Size na velikost 50 x 100px a zarovnáme je dle Obr. 2.
 
Po umístění komponent na požadované místo se pomocí klinutí pravého tlačítka myší a pomocí volby „View Code“ přesuneme do psaní zdrojového kódu. Jako první vytvoříme vlastnost, která nás bude informovat o aktuálním stavu tlačítka, viz níže:

 

001: private bool switchOff;// aktualni stav spinace
002: public bool SwitchOff
003: {
004: get
005: {
006: return switchOff;
007: }
008: set
009: {
010: switchOff = value;
011: }
012: }

 
Dále do konstruktoru komponenty vložíme inicializaci obrázků, viz:
 

001: public Switch()
002: {
003: InitializeComponent();
004: switchOff = false;
005: pictureBoxSwitch.Image = imageListSwitch.Images[0];
006: pictureBoxLED1.Image = imageListLED.Images[0];
007: pictureBoxLED2.Image = imageListLED.Images[3];
008: }

 

Nyní se ještě jednou vrátíme do návrhu ovládacího prvku opět pravým tlačítkem myši pomocí nabídky „View Designer“. Klikneme na komponentu „pictureBoxSwitch“ a přepneme v „Properties“ na „Events“. Zde napíšeme událost Click „ChangeStateSwitch“ a opět se přeneseme do zdrojového kódu. Zde napíšeme jednoduchou metodu pro přepínání mezi jednotlivými obrázky pro dva stavy Zapnuto / Vypnuto, viz níže:

 

001: private void ChangeStateSwitch(object sender, EventArgs e)
002: {
003: if (switchOff)// spinac je ve stavu vypnuto
004: {
005: pictureBoxSwitch.Image = imageListSwitch.Images[0];
006:
007: pictureBoxLED1.Image = imageListLED.Images[0];
008: pictureBoxLED2.Image = imageListLED.Images[3];
009: switchOff = false;
010: }
011: else// spinac je ve stavu zapnuto
012: {
013: pictureBoxSwitch.Image = imageListSwitch.Images[1];
014:
015: pictureBoxLED1.Image = imageListLED.Images[1];
016: pictureBoxLED2.Image = imageListLED.Images[2];
017: switchOff = true;
018: }
019:
020: this.Invalidate();
021: }

Metoda “Invalidate” zajistí překreslení ovládacího prvku. Tímto je vlastní ovládací prvek hotový. Dáme kompilovat pomocí „Build – Build Solution“ a vrátíme se do projektu. Nyní bychom v Toolboxu měli vidět kategorii s názvem našeho projektu, který obsahuje vytvořený ovládací prvek Switch, který lze klasicky přesunout do projektu, viz Obr. 3.

Obr. 3: Vložení vlastního ovládacího prvku

Obr. 3: Vložení vlastního ovládacího prvku

Po spuštění projektu lze vidět, že po kliknutí na spínač se změní jeho stav a také stavy LED indikátorů, viz Obr. 4.

Obr. 4: Demonstrace vlastního ovládacího prvku

Obr. 4: Demonstrace vlastního ovládacího prvku

 
Aktualizace: 2.7.2015
 

Následující a předchozí příspěvek v kategorii:

 
Následující: C# – Tipy, rady, návody – 13: Zjištění cesty k „.exe“ souboru aplikace
Předchozí: C# – Tipy, rady, návody – 11: Jak pracovat se schránkou
 
Tajned facebook
 

Za případné chyby v textu, ve zdrojovém kódě, nebo ve schématickém zapojení se omlouváme.
AUTOŘI NEBEROU ŽÁDNOU ODPOVĚDNOST ZA PŘÍPADNÉ ÚJMY NA ZDRAVÍ ČI MAJETKU.