Silverlight - Stałe układy

Układ elementów sterujących jest bardzo ważny i krytyczny dla użyteczności aplikacji. Służy do uporządkowania grupy elementów GUI w Twojej aplikacji. Podczas wybierania paneli układu należy wziąć pod uwagę kilka ważnych kwestii. Oni są -

• Pozycje elementów potomnych.
• Rozmiary elementów podrzędnych.
• Nakładanie nakładających się na siebie elementów potomnych.

Układ elementów sterujących o stałej liczbie pikseli nie działa, jeśli aplikacja była używana na różnych rozdzielczościach ekranu. XAML zapewnia bogaty zestaw wbudowanych paneli układu do odpowiedniego rozmieszczania elementów GUI.

Zaczniemy od spojrzenia simple fixedukłady. Następnie przyjrzymy się plikowiDynamicscenariusze układu, które Silverlight zaprojektował do obsługi. Zobaczymy właściwości i koncepcje związane z układem, które przenikają wszystkie elementy interfejsu użytkownika.

Układ stały

Najprostszy rodzaj układu jest oferowany przez Canvaselement. PlikCanvas panel jest podstawowym panelem układu, w którym elementy podrzędne mogą być wyraźnie ustawione za pomocą współrzędnych odnoszących się do dowolnej strony kanwy, takich jak lewa, prawa, góra i dół.

Zwykle Canvasjest używany do elementów graficznych 2D (takich jak Elipsa, Prostokąt itp.). Nie jest używany w przypadku elementów interfejsu użytkownika, ponieważ określenie współrzędnych bezwzględnych powoduje problemy podczas zmiany rozmiaru, lokalizacji lub skalowania aplikacji XAML.

Podane poniżej są powszechnie używane properties z Canvas klasa.

Poniżej podano najczęściej używane właściwości Canvas.

Sr. No.	Właściwość i opis
1	Background Pobiera lub ustawia Brush, który wypełnia obszar zawartości panelu. (Odziedziczone po panelu)
2	Children Pobiera UIElementCollection elementów podrzędnych tego panelu. (Odziedziczone po Panel).
3	Height Pobiera lub ustawia sugerowaną wysokość elementu. (Odziedziczone po FrameworkElement).
4	ItemHeight Pobiera lub ustawia wartość określającą wysokość wszystkich elementów zawartych w WrapPanel.
5	ItemWidth Pobiera lub ustawia wartość określającą szerokość wszystkich elementów zawartych w WrapPanel.
6	LogicalChildren Pobiera moduł wyliczający, który może iterować logiczne elementy podrzędne tego elementu Panel. (Odziedziczone po Panel).
7	LogicalOrientation Orientacja panelu, jeśli panel obsługuje układ tylko w jednym wymiarze. (Odziedziczone po Panel).
8	LeftProperty Identyfikuje dołączoną właściwość Canvas.Left XAML.
9	Margin Pobiera lub ustawia zewnętrzny margines elementu. (Odziedziczone po FrameworkElement).
10	Name Pobiera lub ustawia nazwę identyfikującą elementu. Nazwa zawiera odwołanie, dzięki czemu związany z kodem, taki jak kod programu obsługi zdarzeń, może odwoływać się do elementu znacznika po jego skonstruowaniu podczas przetwarzania przez procesor XAML. (Odziedziczone po FrameworkElement).
11	Orientation Pobiera lub ustawia wartość określającą wymiar, w którym ułożona jest zawartość podrzędna.
12	Parent Pobiera logiczny element nadrzędny tego elementu. (Odziedziczone po FrameworkElement).
13	Resources Pobiera lub ustawia słownik zasobów zdefiniowany lokalnie. (Odziedziczone po FrameworkElement).
14	Style Pobiera lub ustawia styl używany przez ten element podczas renderowania. (Odziedziczone po FrameworkElement).
15	TopProperty Identyfikuje dołączoną właściwość Canvas.Top XAML.
16	Width Pobiera lub ustawia szerokość elementu. (Odziedziczone po FrameworkElement).
17	ZIndexProperty Identyfikuje dołączoną właściwość Canvas.ZIndex XAML.

Podane poniżej są powszechnie używane methods z Canvas.

Sr. No.	Metoda i opis
1	GetLeft Pobiera wartość Canvas.Left dołączonej właściwości XAML dla elementu docelowego.
2	GetTop Pobiera wartość właściwości dołączonej Canvas.Top XAML dla elementu docelowego.
3	GetZIndex Pobiera wartość Canvas.ZIndex dołączonej właściwości XAML dla elementu docelowego.
4	SetLeft Ustawia wartość właściwości dołączonej Canvas.Left XAML dla elementu docelowego.
5	SetTop Ustawia wartość właściwości dołączonej Canvas.Top XAML dla elementu docelowego.
6	SetZIndex Ustawia wartość właściwości dołączonej Canvas.ZIndex XAML dla elementu docelowego.

Poniższy przykład pokazuje, jak dodać elementy podrzędne do pliku Canvas. Poniżej znajduje się implementacja XAML, w której elipsa jest tworzona w kanwie z różnymi właściwościami przesunięcia.

<UserControl x:Class = "FirstExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <Canvas Width = "380" Height = "280" > 
         <Ellipse Canvas.Left = "30" Canvas.Top = "30"  
            Fill = "Gray" Width = "200" Height = "120" />             
      </Canvas>  
   </Grid>
	
</UserControl>

Gdy powyższy kod zostanie skompilowany i wykonany, zobaczysz następujące dane wyjściowe.