Silverlight - Layout fissi
La disposizione dei controlli è molto importante e fondamentale per l'usabilità dell'applicazione. Viene utilizzato per organizzare un gruppo di elementi della GUI nell'applicazione. Ci sono alcune cose importanti da considerare quando si selezionano i pannelli di layout. Sono -
- Posizioni degli elementi figlio.
- Dimensioni degli elementi figlio.
- Stratificazione di elementi figlio sovrapposti uno sopra l'altro.
Una disposizione dei controlli in pixel fissi non funziona se l'applicazione è stata utilizzata con risoluzioni dello schermo diverse. XAML fornisce un ricco set di pannelli di layout incorporati per disporre gli elementi della GUI in modo appropriato.
Inizieremo guardando simple fixedlayout. Quindi esamineremo il fileDynamicscenari di layout, che Silverlight ha progettato per supportare. Vedremo le proprietà ei concetti relativi al layout che permeano tutti gli elementi dell'interfaccia utente.
Layout fisso
Il tipo più semplice di layout è offerto da Canvaselemento. IlCanvas pannello è il pannello di layout di base in cui gli elementi figli possono essere posizionati esplicitamente utilizzando le coordinate relative a qualsiasi lato della tela come sinistra, destra, superiore e inferiore.
In genere, il file Canvasviene utilizzato per elementi grafici 2D (come Ellisse, Rettangolo ecc.). Non viene utilizzato per gli elementi dell'interfaccia utente perché la specifica di coordinate assolute crea problemi durante il ridimensionamento, la localizzazione o il ridimensionamento dell'applicazione XAML.
Di seguito sono riportati quelli comunemente usati properties di Canvas classe.
| Sr. No. | Proprietà e descrizione |
|---|---|
| 1 | Background Ottiene o imposta un pennello che riempie l'area del contenuto del pannello. (Ereditato da Panel) |
| 2 | Children Ottiene un UIElementCollection di elementi figlio di questo pannello. (Ereditato da Panel.) |
| 3 | Height Ottiene o imposta l'altezza suggerita dell'elemento. (Ereditato da FrameworkElement.) |
| 4 | ItemHeight Ottiene o imposta un valore che specifica l'altezza di tutti gli elementi contenuti in un WrapPanel. |
| 5 | ItemWidth Ottiene o imposta un valore che specifica la larghezza di tutti gli elementi contenuti in un WrapPanel. |
| 6 | LogicalChildren Ottiene un enumeratore che può iterare gli elementi figlio logici di questo elemento del pannello. (Ereditato da Panel.) |
| 7 | LogicalOrientation L'orientamento del pannello, se il pannello supporta il layout in una sola dimensione. (Ereditato da Panel.) |
| 8 | LeftProperty Identifica la proprietà associata XAML Canvas.Left. |
| 9 | Margin Ottiene o imposta il margine esterno di un elemento. (Ereditato da FrameworkElement.) |
| 10 | Name Ottiene o imposta il nome identificativo dell'elemento. Il nome fornisce un riferimento in modo che il codice sottostante, ad esempio il codice del gestore eventi, possa fare riferimento a un elemento di markup dopo che è stato costruito durante l'elaborazione da un processore XAML. (Ereditato da FrameworkElement.) |
| 11 | Orientation Ottiene o imposta un valore che specifica la dimensione in cui è disposto il contenuto figlio. |
| 12 | Parent Ottiene l'elemento padre logico di questo elemento. (Ereditato da FrameworkElement.) |
| 13 | Resources Ottiene o imposta il dizionario delle risorse definito localmente. (Ereditato da FrameworkElement.) |
| 14 | Style Ottiene o imposta lo stile utilizzato da questo elemento durante il rendering. (Ereditato da FrameworkElement.) |
| 15 | TopProperty Identifica la proprietà associata XAML Canvas.Top. |
| 16 | Width Ottiene o imposta la larghezza dell'elemento. (Ereditato da FrameworkElement.) |
| 17 | ZIndexProperty Identifica la proprietà associata XAML Canvas.ZIndex. |
Di seguito sono riportati quelli comunemente usati methods di Canvas.
| Sr. No. | Metodo e descrizione |
|---|---|
| 1 | GetLeft Ottiene il valore della proprietà associata XAML Canvas.Left per l'elemento di destinazione. |
| 2 | GetTop Ottiene il valore della proprietà associata XAML Canvas.Top per l'elemento di destinazione. |
| 3 | GetZIndex Ottiene il valore della proprietà associata XAML Canvas.ZIndex per l'elemento di destinazione. |
| 4 | SetLeft Imposta il valore della proprietà XAML associata Canvas.Left per un elemento di destinazione. |
| 5 | SetTop Imposta il valore della proprietà associata XAML Canvas.Top per un elemento di destinazione. |
| 6 | SetZIndex Imposta il valore della proprietà associata XAML Canvas.ZIndex per un elemento di destinazione. |
L'esempio seguente mostra come aggiungere elementi figlio in un file Canvas. Di seguito è riportata l'implementazione XAML in cui viene creata un'ellisse all'interno di un Canvas con proprietà di offset diverse.
<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>Quando il codice precedente viene compilato ed eseguito, vedrai il seguente output.
