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.

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.