Praca z elementami w projektancie XAML
Elementy — kontrolki, układy i kształty — można dodawać do aplikacji w języku XAML, w kodzie lub przy użyciu Projektant XAML. W tym temacie opisano sposób pracy z elementami w Projektant XAML w programie Visual Studio lub Programie Blend for Visual Studio.
Dodawanie elementu do układu
Układ to proces określania rozmiaru i pozycjonowania elementów w interfejsie użytkownika. Aby umieścić elementy wizualizacji, należy umieścić je w panelu układu. Obiekt Panel ma właściwość podrzędną, która jest kolekcją typów FrameworkElement . Za pomocą różnych Panel elementów podrzędnych, takich jak Canvas, StackPanel i Grid, można służyć jako kontenery układu i ustawiać i rozmieszczać elementy na stronie.
Domyślnie Grid panel jest używany jako kontener układu najwyższego poziomu w obrębie strony lub formularza. W układzie strony najwyższego poziomu można dodawać panele układu, kontrolki lub inne elementy.
Aby dodać element do układu w Projektant XAML, wykonaj jedną z następujących czynności:
Kliknij dwukrotnie element w Przyborniku (lub wybierz element w przyborniku i naciśnij klawisz Enter).
Przeciągnij element z przybornika do tablicy grafiki.
W przyborniku wybierz jeden z narzędzi do rysowania (na przykład Wielokropek lub Prostokąt), a następnie narysuj element w aktywnym panelu.
Zmienianie kolejności warstw elementów
Jeśli na tablicy grafiki znajdują się dwa elementy w Projektant XAML, jeden element pojawi się przed drugim w kolejności warstwowania. W dolnej części listy elementów w oknie Konspektu dokumentu jest elementem najbardziej frontonu (z wyjątkiem sytuacji, gdy właściwość ZIndex dla elementu jest ustawiona). Po wstawieniu elementu do kontenera strony, formularza lub układu element jest automatycznie umieszczany przed innymi elementami w aktywnym elemecie kontenera. Aby zmienić kolejność elementów, możesz użyć poleceń Order lub przeciągnąć elementy w drzewie obiektów w oknie Konspektu dokumentu.
Aby zmienić kolejność warstw, wykonaj jedną z następujących czynności:
W oknie Konspektu dokumentu przeciągnij elementy w górę lub w dół, aby utworzyć żądaną kolejność warstw.
Kliknij prawym przyciskiem myszy element w oknie Konspektu dokumentu lub tablicy grafiki, dla której chcesz zmienić kolejność warstw, wskaż polecenie Kolejność, a następnie kliknij jedną z następujących pozycji:
Przesuń na front , aby przenieść element do przodu zamówienia.
Przesuń dalej, aby przenieść element do przodu o jeden poziom w kolejności.
Wyślij do tyłu element z powrotem o jeden poziom w kolejności.
Wyślij do strony Wstecz , aby wysłać element do tyłu zamówienia.
Zmień właściwość ZIndex w sekcji Layout w okno Właściwości. W przypadku nakładających się elementów właściwość ZIndex ma pierwszeństwo przed kolejnością elementów wyświetlanych w oknie Konspektu dokumentu. Element o wyższej wartości ZIndex pojawia się z przodu, gdy elementy nakładają się na siebie.
Zmienianie wyrównania elementu
Elementy w tablicy grafiki można wyrównać za pomocą poleceń menu lub przeciągając elementy do linii przyciągania.
Linia przyciągania to wizualna wskazówka, która ułatwia wyrównanie elementu względem innych elementów w aplikacji.
Aby wyrównać co najmniej dwa elementy za pomocą poleceń menu:
Wybierz elementy, które chcesz wyrównać. Możesz zaznaczyć więcej niż jeden element, naciskając i trzymając klawisz Ctrl podczas wybierania elementów.
Wybierz jedną z następujących właściwości w obszarze PoziomaZrówny w sekcji Układ okno Właściwości: Lewa, Środkowa, Prawa lub Stretch.
Wybierz jedną z następujących właściwości w obszarze VerticalAlignment w sekcji Układ okno Właściwości: Góra, Środek, Dolna lub Stretch.
Aby wyrównać co najmniej dwa elementy przy użyciu linii przyciągania, w Projektant XAML, w układzie zawierającym co najmniej dwa elementy, przeciągnij lub zmień rozmiar jednego z elementów, aby krawędź została wyrównana do innego elementu.
Gdy krawędzie są wyrównane, granica wyrównania wydaje się wskazywać wyrównanie. Granica wyrównania jest czerwoną kreskowaną linią. Granice wyrównania są wyświetlane tylko wtedy, gdy jest włączone przyciąganie do linii przyciągania. Aby zapoznać się z ilustracją tablicy grafiki przedstawiającej granicę wyrównania, zobacz Tworzenie interfejsu użytkownika przy użyciu Projektant XAML.
Zmienianie marginesów elementu
Marginesy w języku XAML Projektant określają ilość pustego miejsca wokół elementu na tablicy grafiki. Na przykład marginesy określają ilość miejsca między zewnętrznymi krawędziami elementu a granicami Grid panelu zawierającego element. Marginesy określają również ilość miejsca między elementami znajdującymi się w obiekcie StackPanel.
Aby zmienić marginesy elementu w okno Właściwości:
Wybierz element, którego marginesy chcesz zmienić.
W obszarze Układ w okno Właściwości zmień wartość (w pikselach lub jednostkach niezależnych od urządzenia, które są około 1/96 cala) dla dowolnych właściwości Margines (górny, lewy, prawy lub dolny).
Aby zmienić marginesy elementu względem kontenera układu elementu, kliknij moduły adorujące marginesy, które pojawiają się wokół elementu po wybraniu elementu i znajduje się w kontenerze układu. Aby zapoznać się z ilustracją przedstawiającą moduły adorujące marginesy, zobacz Tworzenie interfejsu użytkownika przy użyciu Projektant XAML.
Jeśli moduł adoratora marginesu jest otwarty, pionowo lub poziomo, ten margines nie jest ustawiony. Jeśli moduł adoratora marginesu jest zamknięty, ten margines jest ustawiony.
Po otwarciu modułu adoratora marginesu, a przeciwny margines nie jest ustawiony, przeciwny margines jest ustawiony na poprawną wartość zgodnie z lokalizacją elementu w tablicy grafiki. Dla odwrotnych marginesów, takich jak marginesy lewe i prawe , co najmniej jedna właściwość jest zawsze ustawiana.
Ważne
Elementy umieszczone wewnątrz niektórych kontenerów układu, takich jak kanwa, nie mają modułów adoracji marginesów. Elementy umieszczone wewnątrz stackPanel mają marginesy adoratory dla lewego i prawego marginesu lub górnego i dolnego marginesu, w zależności od orientacji StackPanel.
Grupuj i rozgrupuj elementy
Grupowanie co najmniej dwóch elementów w języku XAML Projektant tworzy nowy kontener układu i umieszcza te elementy w tym kontenerze. Umieszczenie co najmniej dwóch elementów w kontenerze układu umożliwia łatwe wybieranie, przenoszenie i przekształcanie grupy tak, jakby elementy w tej grupie były jednym elementem. Grupowanie jest również przydatne do identyfikowania elementów, które są ze sobą powiązane w jakiś sposób, takich jak przyciski tworzące element nawigacji. Podczas rozgrupowania elementów po prostu usuwasz kontener układu, który zawierał elementy.
Aby zgrupować elementy w nowym kontenerze układu:
Wybierz elementy, które chcesz zgrupować. (Aby wybrać wiele elementów, naciśnij i przytrzymaj Naciśnij klawisze Ctrl po kliknięciu ich).
Kliknij prawym przyciskiem myszy wybrane elementy, wskaż polecenie Grupuj do, a następnie kliknij typ kontenera układu, w którym ma znajdować się grupa.
Napiwek
Jeśli wybierzesz pozycję Widokbox, Obramowanie lub ScrollViewer, aby zgrupować elementy, elementy zostaną umieszczone w nowym panelu Siatki w obszarze Widok, Obramowanie lub ScrollViewer. Jeśli elementy rozgrupujesz w jednym z tych kontenerów układu, zostanie usunięty tylko pole widoków, obramowanie lub program ScrollViewer , a panel Siatka pozostanie. Aby usunąć panel, rozgrupuj
Gridelementy ponownie.
Aby rozgrupować elementy i usunąć układ, kliknij prawym przyciskiem myszy grupę, którą chcesz rozgrupować, a następnie kliknij polecenie Rozgrupuj. Możesz również grupować lub rozgrupować elementy, klikając prawym przyciskiem myszy wybrane elementy w oknie Konspektu dokumentu i klikając polecenie Grupuj do lub Rozgrupuj.
Resetowanie układu elementu
Wartości domyślne dla określonych właściwości układu elementu można przywrócić przy użyciu poleceń Resetowanie układu. Za pomocą tego polecenia można zresetować margines, wyrównanie, szerokość, wysokość i rozmiar elementu pojedynczo lub zbiorczo.
Aby zresetować układ elementu, kliknij prawym przyciskiem myszy element w oknie Konspektu dokumentu lub tablicy grafiki, a następnie wybierz polecenie Resetuj właściwość Layout>Reset PropertyName, gdzie PropertyName jest właściwością, którą chcesz zresetować (lub wybierz polecenie Resetuj>układ Wszystkie, aby zresetować wszystkie właściwości układu dla elementu).