Podstawowe właściwości klasy Grid

Grid to taki rodzaj panelu, który może zostać podzielony na jedną i więcej kolumn lub na jeden i więcej wierszy. Najważniejszą zaletą tego elementu jest możliwość bardzo łatwej zmiany rozmiaru wierszy i kolumn oraz oczywiście osadzonych elementów podrzędnych, a więc w praktyce prawidłowe dostosowanie się do wielkości okna. Dostęp do obiektu Grid możliwy jest za pomocą opisywanego wcześniej przybornika narzędzi oraz biblioteki zasobów. Grid ma również oczywiście swoje odzwierciedlenie w kodzie XAML. Najprostsza postać polecenia wygląda w tym wypadku następująco:

Taka konstrukcja jest jak najbardziej poprawna, ale nie zawiera, jak widać, żadnych właściwości. Ich lista jest tymczasem bardzo długa – przykładowy fragment bardziej rozbudowanego panelu Grid prezentuje poniższy fragment kodu. W tym wypadku mamy już do czynienia z trzema wierszami i taką samą liczbą kolumn:

Jak widać, do definiowania wierszy i kolumn służą obiekty ColumnDefinition oraz RowDefinition, pogrupowane z kolei w elementach ColumnDefinitions oraz RowDefinitions. Dodatkowo istnieje możliwość pokazywania i ukrywania linii siatki za pomocą atrybutu ShowGridLines. Tak oto będzie się prezentowała powyższa definicja w działaniu:

Przykładowy panel Grid, prezentujący trzy kolumny i trzy wiersze.

Aby ułatwić sobie pracę z siatkami, możemy ograniczyć korzystanie z definicji XAML. Znacznie wygodniejsze w użyciu będą bowiem narzędzia wizualne Expression Blenda, które równie dokładnie pozwolą nam określić właściwości paneli.

Korzystanie z narzędzi graficznych w procesie tworzenia i modyfikowania siatki może znacznie ułatwić nam pracę.

Na powyższej ilustracji widać wyraźnie, że dzięki zastosowaniu odpowiednich narzędzi graficznych możemy ręcznie dodać do panelu wiersz lub kolumnę. Po umieszczeniu wskaźnika myszy nad belką symbolizującą granice siatki pojawią się linie odpowiadające pionowemu i poziomemu podziałowi obszaru. Klikając zaznaczony trójkąt, bez trudu wzbogacimy zatem obiekt Grid o kolejny element. W ten sam sposób możemy również usuwać zbędne kolumny i wiersze.

Oprócz dodawania i usuwania linii podziału mamy również możliwość własnoręcznego określania rozmiarów poszczególnych elementów. Spójrzmy jeszcze raz na pierwszą z zamieszczonych ilustracji, prezentującą ogólny wygląd siatki. Dostrzeżemy tutaj jeden ciekawy element – kłódkę symbolizującą sposób definiowania przez użytkownika rozmiaru wierszy i kolumn. Istnieją dwie podstawowe metody. Pierwszą z nich jest podanie wymiarów osobno dla każdego elementu. Na możliwość przeprowadzenia takiego działania wskazuje znak zamkniętej kłódki. Aby określić wartość, wystarczy wybraną ikonę kliknąć. W efekcie, jeśli będziemy zmieniali rozmiar okna, określona kolumna lub wiersz zachowa zawsze ten sam rozmiar. Oczywiście, znajduje to także odzwierciedlenie w kodzie XAML, gdzie przykładowa definicja wiersza będzie wyglądała następująco:

Sytuacją odwrotną do przedstawionej przed chwilą jest adaptowanie się szerokości kolumn i wysokości wierszy do zmian wielkości okna. Aby uzyskać taką możliwość, należy odblokować wybraną kolumnę lub wybrany wiersz. Ikona kłódki powinna w takim wypadku zmienić wygląd na ten, który zaprezentowany został na pierwszej ilustracji w naszym artykule. Wiersz kodu XAML wzbogaci się za to o dodatkowy znak gwiazdki (*), umieszczony obok określonego liczbowo parametru wysokości:

Istnieje jeszcze jeden sposób określenia szerokości i wysokości poszczególnych wierszy i kolumn. Wielkości te mogą być bowiem definiowane w odniesieniu do rozmiarów obiektów znajdujących się w komórkach siatki. Aby możliwa była automatyczna zmiana odpowiednich danych, należy we właściwościach siatki, w sekcji Layout, ustawić parametry Width oraz Height na Auto. Możliwe jest oczywiście również niezależne określenie tych właściwości.

Odpowiedni rozmiar wierszy i kolumn panelu możemy także określić, korzystając z sekcji Layout.

Co ciekawe, także klikając ikonę kłódki w przestrzeni roboczej, będziemy mogli skorzystać z dodatkowego symbolu, który zmieni właściwości pola zgodnie z przedstawionym wcześniej schematem. W XAML definicja wiersza będzie w tym wypadku wyglądała następująco:

Pamiętajmy, że możliwe jest również określenie minimalnych wartości za pomocą atrybutów MinHeight oraz MinWidth.