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.