Graficzna reprezentacja funkcji menu

W środowisku Windows standardem w oknach aplikacji jest reprezentacja wybranych opcji menu w postaci graficznych ikon pod paskiem menu- pasek narzędzi. W kompilatorze Visual Studio służy do tego kontrolka ToolStrip. Zawartość graficzną w postaci ikon wygodnie jest przechowywać w kontrolce ImageList.

Rozmiar ikon może być dowolny, ale lepiej jest używać standardowych rozmiarów, czyli: 16x16, 32x32, 64x64,..., 256x256. Rozmiary te są potęgą liczby 2. Zastosowanie tych rozmiarów poprawia skalowanie jaki optymalizację w procesie kompilacji projektu.

Ikony użyte w tym temacie są pobrane ze strony Darmowe Ikony

Cel: Wzbogać aplikację z tematu poprzedniego o graficzny pasek narzędzi. Na pasku narzędzi użyj co najmniej dwóch komponentów ToolStripButton, które będą zmieniać swą zawartość graficzną po kliknięci w ich obszarze.

toolStrip Visual astudio c# menu graficzne

Krok 1. Układ komponentów

Do projektu tematu poprzedniego dodaj dwie kontrolki

ToolStrip- sztuk 1
ImageList- sztuk 1

Uwaga komponent ImageList nie jest komponentem wizualnym, co oznacza, że nie będzie widoczny w obszarze okna aplikacji.

Jego pozycja po osadzeniu w projekcie standardowo znajduje się pod obszarem okna formatki

ImageList w projekcie standardowo znajduje się pod obszarem okna formatki

Krok 2. Ustawiamy właściwości komponentu ImageList

Wybieramy rozmiar przechowywanej grafiki (16x16, 32x32,..., 256x256)

Wypełniamy kolekcję zasobu graficznego kolejnymi plikami ikon

Wypełniamy kolekcję zasobu graficznego ImageList

Kolejne pliki ikon są w kolekcji indeksowane od 0 (zera). Znajomość indeksu pozycji zasobu graficznego ma znaczenie przy programowej podmianie ikonek w tworzonej aplikacji

Krok 3. Ustawiamy właściwości kontrolki ToolStrip

Komponent ToolStrip w Przyborniku znajduje się w grupie Menu i paski narzędzi

W tworzonym pasku narzędzi przewidujemy rozmiar dodawanych ikon, na przykład 48x48

Dodanie kolejnych przycisków w tworzonym pasku narzędzi wymaga wykonania czynności przedstawionej na poniższej ilustracji

Prawidłowo wykonanie tej czynności przedstawia ta ilustracja

własny pasek narzędzi Visual Studio C# toolStrip

Skompiluj projekt i sprawdź efekt działania

Krok 4. Dodajemy ikony do paska narzędzi

Są dwie metody dodawania ikon do paska narzędzi. Pierwsza metoda wykonywana jest bezpośrednio w fazie projektowania wyglądu aplikacji, druga w kodzie programu. Pierwsza pozwala widzieć efekt bez kompilacji, co ułatwia ocenę estetyki projktu.

Aby tę metodę zastosować, należy we właściwościach kontrolki ToolStripButton podmienić zawartość pola Image

Jeżeli zależy nam na przezroczystości tła dodawanej ikony, to możemy zastosować wybór opcji transparentnego koloru

toolStriButton transparent image visual studio c#

Efekt wykonania tego kroku przedstawia poniżasz ilustracja

Krok 5. Podmieniamy ikony programowo

Wykorzystamy zdarzenie kliknięcia w obszar klawisza ToolStripButton. Dodatkowo kliknięcie w tej kontrolce przy standardowych ustawieniach rejestrowane jest we właściwości Checked. Jest to zmienna typu logicznego i przyjmuje dwa stany: logiczną prawdę (true) lub logiczny fałsz (false).

Dzięki znajomości bieżącego stanu logicznego możemy decyzję o podmianie ikony. Odpowiedni kod widoczny jest poniżej

private void ToolStripButton1_Click(object sender, EventArgs e)
{
toolStripButton1.Checked = !toolStripButton1.Checked;
if (toolStripButton1.Checked)
{
toolStripButton1.Image = imageList1.Images[1];
}
else
{
toolStripButton1.Image = imageList1.Images[0];
}
}

Skompiluj projekt i sprawdź efekt działania

Krok 6. Dodajemy obsługę wywołania lub zamknięcia okna dziecka aplikacji wielookienkowej

Oprócz zmiany ikony do zdarzenia Click przycisków ToolStripButton dodamy możliwość otwarcia lub zamknięcia na stan Checked==false okna dziecka. Kod który to zrealizuje, bazuje na kodzie z tematu poprzedniego i ma poniższą postać dla pierwszego klawisza

private void ToolStripButton1_Click(object sender, EventArgs e)
{
toolStripButton1.Checked = !toolStripButton1.Checked;
if (toolStripButton1.Checked)
{
toolStripButton1.Image = imageList1.Images[1];
if (form2 == null) RobOkno(form2 = new Form2(), "okno2");
else form2.Activate();
}
else
{
toolStripButton1.Image = imageList1.Images[0];
if (form2 != null) { form2.Close(); form2 = null; }
}
}

Skompiluj program i sprawdź efekt działania

Ćwiczenie sprawdzające: Wykonaj podmianę ikony dla drugiego klawisza menu paska narzędzi

Rozwązanie zadania: