Utilizzo di elementi in XAML Designer
Puoi aggiungere elementi come controlli, layout e forme alla tua app in XAML, nel codice o tramite la finestra di progettazione XAML. In questo argomento viene descritto come utilizzare gli elementi nella finestra di progettazione XAML.
Aggiunta di un elemento a un layout
Il layout è il processo di ridimensionamento e posizionamento degli elementi in un'interfaccia utente. Per posizionare gli elementi visivi, devi inserirli in un oggetto Panel del layout. Un oggetto Panel dispone di una proprietà figlio, ossia una raccolta di tipi FrameworkElement. È possibile utilizzare vari elementi figlio Panel, come Canvas, StackPanele Grid, come contenitori di layout e per posizionare e disporre gli elementi in una pagina.
Per impostazione predefinita, un pannello Grid viene utilizzato come contenitore di layout di primo livello in un documento di pagina all'interno di un'Applicazione Windows Store compilata per Windows utilizzando JavaScript.. È possibile aggiungere pannelli di layout, controlli o altri elementi nel layout di pagina di primo livello.
Per aggiungere un elemento a un layout
In un progetto Visual Studio, nella finestra Struttura documento, effettua una delle seguenti operazioni:
Fai doppio clic su un elemento nella casella degli strumenti (o seleziona un elemento nella casella degli strumenti e premi INVIO).
Trascina un elemento dalla casella degli strumenti sulla tavola da disegno.
Nella casella degli strumentifai clic su uno degli strumenti di disegno, ad esempio Ellisse o Rettangolo, quindi disegna un elemento nel pannello attivo.
.gif "Hh965587.collapse_all(it-it,VS.120).gif")
Modifica dell'ordine di disposizione degli elementi
In presenza di due elementi sulla tavola da disegno nella finestra di progettazione XAML, un elemento verrà visualizzato davanti all'altro nell'ordine di disposizione. L'elemento in fondo all'elenco nella finestra Struttura documento è quello più in primo piano (tranne nel caso in cui sia impostata la proprietà ZIndex). Quando si inserisce un elemento in un contenitore documenti o di layout, l'elemento viene automaticamente posizionato in primo piano rispetto agli altri nell'elemento contenitore attivo. Per modificare l'ordine degli elementi, puoi utilizzare i comandi Ordina o trascinare gli elementi nell'albero degli oggetti nella finestra Struttura documento.
Per modificare l'ordine di disposizione
Effettua una delle seguenti operazioni:
Nella finestra Struttura documento trascinare gli elementi verso l'alto o verso il basso per ottenere l'ordine di disposizione desiderato.
Fai clic con il pulsante destro del mouse sull'elemento per cui desideri modificare l'ordine di disposizione nella finestra Struttura documento o sulla tavola da disegno, scegli Ordina, quindi seleziona una delle opzioni elencate di seguito:
Porta in primo piano per spostare l'elemento in primo piano nell'ordine.
Porta avanti per spostare l'elemento in avanti di un livello nell'ordine.
Porta indietro per spostare l'elemento indietro di un livello nell'ordine.
Porta in secondo piano per spostare l'elemento nell'ultima posizione dell'ordine.
Modifica la proprietà ZIndex nella sezione Layout della finestra Proprietà. Per gli elementi sovrapposti, la proprietà ZIndex ha la precedenza sull'ordine degli elementi visualizzati nella finestra Struttura documento. Un elemento con un valore di ZIndex inferiore viene visualizzato in primo piano in caso di sovrapposizione.
Modifica dell'allineamento di un elemento
Puoi allineare gli elementi nella tavola da disegno tramite i comandi di menu o trascinando gli elementi sulle guide di allineamento.
Una guida di allineamento rappresenta un segnale visivo che agevola l'allineamento di un elemento in relazione ad altri elementi nell'app.
Per allineare due o più elementi tramite comandi di menu
Selezionare gli elementi da allineare. Puoi selezionare più di un elemento tenendo premuto il tasto CTRL in fase di selezione.
Seleziona una delle seguenti proprietà in HorizontalAlignment nella sezione Layout della finestra Proprietà: Left, Center, Right o Stretch.
Seleziona una delle seguenti proprietà in VerticalAlignment nella sezione Layout della finestra Proprietà: Top, Center, Bottom o Stretch.
Per allineare due o più elementi tramite guide di allineamento
Nella finestra di progettazione XAML, in un layout con almeno due elementi presenti, trascina o ridimensiona uno degli elementi in modo che il bordo sia allineato a un altro elemento.
Quando i bordi sono allineati, viene visualizzato un limite di allineamento come linea tratteggiata rossa. Tale limite viene visualizzato solo quando è abilitato l'allineamento alle guide di allineamento. Per un'illustrazione della tavola da disegno con un limite di allineamento, vedere Creazione di un'interfaccia utente tramite XAML Designer.
Modifica dei margini di un elemento
I margini nella finestra di progettazione XAML determinano la quantità di spazio vuoto intorno a un elemento sulla tavola da disegno. I margini specificano, ad esempio, la quantità di spazio tra i bordi esterni di un elemento e i limiti di un pannello Grid che lo contiene. oppure la quantità di spazio tra gli elementi contenuti in StackPanel.
Per modificare i margini di un elemento
Seleziona l'elemento di cui vuoi modificare i margini.
In Layout, nella finestra Proprietà, modifica il valore (in pixel o intesi come unità indipendenti dal dispositivo, equivalenti a circa 1/96 di pollice) di una delle proprietà Margin (Top, Left, Right o Bottom).
Per modificare i margini di un elemento nella tavola da disegno
Per modificare i margini di un elemento in relazione al contenitore di layout, fai clic sugli strumenti decorativi del margine visualizzati intorno all'elemento sulla tavola da disegno quando l'elemento è selezionato e si trova in un contenitore di layout. Per un'immagine degli strumenti decorativi del margine, vedi Creazione di un'interfaccia utente tramite XAML Designer.
Se uno strumento decorativo di un margine è aperto, verticalmente oppure orizzontalmente, il margine in questione non è impostato. Se invece è chiuso, il margine è impostato.
Quando si apre uno strumento decorativo di un margine e il margine opposto non è impostato, quest'ultimo viene impostato sul valore corretto in base alla posizione dell'elemento nella tavola da disegno. Per i margini opposti, come Left e Right, è sempre impostata almeno una proprietà.
Importante
Gli elementi inseriti in alcuni contenitori di layout, ad esempio Canvas, non dispongono di strumenti decorativi del margine. Gli elementi inseriti in un oggetto StackPanel dispongono di strumenti decorativi del margine per i margini sinistro e destro oppure per quelli superiore e inferiore, in base all'orientamento di StackPanel.
Raggruppamento e separazione di elementi
Se si raggruppano due o più elementi nella finestra di progettazione XAML, viene creato un nuovo contenitore di layout in cui vengono inseriti gli elementi raggruppati. Il posizionamento di due o più elementi nello stesso contenitore di layout semplifica le operazioni di selezione, spostamento e trasformazione del gruppo, in quanto gli elementi al suo interno possono essere gestiti come se fossero un solo elemento. Il raggruppamento è utile anche per identificare gli elementi in qualche modo correlati, ad esempio i pulsanti che compongono un elemento di navigazione. Quando si separano gli elementi, si elimina semplicemente il contenitore di layout nel quale erano posizionati.
Per raggruppare elementi in un nuovo contenitore di layout
Selezionare gli elementi da raggruppare. Per selezionare più elementi, tieni premuto il tasto CTRL in fase di selezione.
Fai clic con il pulsante destro del mouse sugli elementi selezionati, scegli Raggruppa, quindi seleziona il tipo di contenitore di layout in cui vuoi inserire il gruppo.
Suggerimento
Se selezioni Viewbox, T:Windows.UI.Xaml.Controls.Border o ScrollViewer per raggruppare gli elementi, questi vengono posizionati in un nuovo pannello Grid in Viewbox, Border o ScrollViewer. Se separi gli elementi in uno di questi contenitori di layout, viene eliminato solo Viewbox, Border o ScrollViewer, non il pannello Grid. Per eliminare il pannello Grid, separa nuovamente gli elementi.
Per separare gli elementi ed eliminare il layout
- Fai clic con il pulsante destro del mouse sul gruppo che vuoi separare e scegli Separa.
Per raggruppare o separare elementi, fai clic con il pulsante destro sugli elementi selezionati nella finestra Struttura documento e scegli Raggruppa o Separa.
Reimpostazione del layout dell'elemento
Puoi ripristinare i valori predefiniti per proprietà di layout specifiche di un elemento mediante il comando Reimposta layout. Questo comando consente di reimpostare il margine, l'allineamento, la larghezza, l'altezza e la dimensione di un elemento, separatamente o contemporaneamente.
Per reimpostare il layout dell'elemento
- Fai clic con il pulsante destro del mouse sull'elemento nella finestra Struttura documento o nella tavola da disegno, scegli Reimposta layout, quindi fai clic sulla proprietà che vuoi reimpostare oppure seleziona Tutte per reimpostare tutte le proprietà di layout per l'elemento.