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.
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
Krok 2. Ustawiamy właściwości komponentu ImageList
Wybieramy rozmiar przechowywanej grafiki (16x16, 32x32,..., 256x256)
Wypełniamy kolekcję zasobu graficznego kolejnymi plikami ikon
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
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
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