Silverlight - Panoramica di XAML

Una delle prime cose che incontrerai lavorando con Silverlight è XAML. XAML è l'acronimo di Extensible Application Markup Language. È un linguaggio semplice e dichiarativo basato su XML.

  • In XAML è molto facile creare, inizializzare e impostare le proprietà di un oggetto con relazioni gerarchiche.

  • Viene utilizzato principalmente per la progettazione di GUI.

  • Può essere utilizzato anche per altri scopi, ad esempio per dichiarare il flusso di lavoro in una base del flusso di lavoro.

Sintassi di base

Quando crei un nuovo progetto Silverlight, per impostazione predefinita vedrai parte del codice XAML in MainPage.xaml come mostrato di seguito.

<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"> 
         
   </Grid> 
	
</UserControl>

Puoi vedere che il file XAML fornito sopra menziona diversi tipi di informazioni; tutti sono brevemente descritti nella tabella sotto riportata.

Informazione Descrizione
<UserControl Fornisce la classe base per la definizione di un nuovo controllo che incapsula i controlli esistenti e fornisce la propria logica.
x: Class = "FirstExample.MainPage" È una dichiarazione di classe parziale, che collega il markup a quel codice di classe parziale dietro, definito in esso.
xmlns = "http://schemas.microsoft.com / winfx / 2006 / xaml / presentation" Mappa lo spazio dei nomi XAML predefinito per il client / framework Silverlight.
xmlns: x = "http: //schemas.microsoft.c om / winfx / 2006 / xaml" Spazio dei nomi XAML per il linguaggio XAML, che lo mappa a x: prefisso.
xmlns: d = "http://schemas.microsoft.com / expression / blend / 2008" Lo spazio dei nomi XAML è destinato al supporto dei designer, in particolare il supporto dei designer nelle superfici di progettazione XAML di Microsoft Visual Studio e Microsoft Expression Blend.
xmlns: mc = "http: //schemas.openxmlforma ts.org/markup-compatibility/2006" Indica e supporta una modalità di compatibilità del markup per la lettura di XAML.
> Fine dell'elemento oggetto della radice.
<Grid> </Grid> Questi sono i tag di inizio e di chiusura di un oggetto griglia vuoto.
</UserControl> Chiusura dell'elemento oggetto.

Le regole di sintassi per XAML sono quasi simili a quelle di XML. Se guardi un documento XAML, noterai che in realtà si tratta di un file XML valido. Il suo viceversa non è vero, perché in XML, il valore degli attributi deve essere una stringa mentre in XAML può essere un oggetto diverso che è noto come sintassi dell'elemento Property.

  • La sintassi di un elemento Object inizia con una parentesi angolare sinistra (<) seguita dal nome di un oggetto, ad esempio Button.

  • Le proprietà e gli attributi di quell'elemento oggetto vengono definiti.

  • L'elemento Object deve essere chiuso da una barra (/) seguita immediatamente da una parentesi angolare retta (>).

Di seguito è mostrato un esempio di un oggetto semplice senza elemento figlio.

<Button/>

Esempio di un elemento oggetto con alcuni attributi -

<Button Content = "Click Me" Height = "30" Width = "60"/>

Esempio di una sintassi alternativa per definire le proprietà (sintassi dell'elemento Property) -

<Button> 
   <Button.Content>Click Me</Button.Content> 
   <Button.Height>30</Button.Height> 
   <Button.Width>60</Button.Width> 
</Button>

Esempio di un oggetto con elemento figlio: StackPanel contiene Textblock come elemento figlio.

<StackPanel Orientation = "Horizontal"> 
   <TextBlock Text = "Hello"/> 
</StackPanel/>

Perché XAML in Silverlight

XAML non è stato originariamente inventato per Silverlight. Proviene da WPF, Windows Presentation Foundation. Silverlight è spesso descritto come un sottoinsieme di WPF. Questo non è del tutto vero, poiché Silverlight può fare alcune cose che WPF non può fare. Anche dove la funzionalità si sovrappone, le due sono leggermente diverse nei dettagli.

  • È più corretto affermare che WPF e Silverlight sono molto simili sotto molti aspetti. Nonostante le differenze, è comunque informativo esaminare la funzionalità XAML che Silverlight ha preso in prestito da WPF. Silverlight, ad esempio, offre primitive grafiche per bitmap e forme scalabili.

  • Fornisce inoltre elementi per il rendering di video e audio.

  • Ha un semplice supporto per il testo formattato e puoi animare qualsiasi elemento. Se conosci WPF, questo set di funzionalità ti sarà familiare.

  • Un punto importante, non puoi prendere WPF XAML e usarlo in Silverlight.

  • Sebbene ci siano somiglianze, troverai anche numerose piccole differenze.

XAML e codice dietro

XAML definisce l'aspetto e la struttura di un'interfaccia utente. Tuttavia, se vuoi che la tua applicazione faccia qualcosa di utile quando l'utente interagisce con essa, avrai bisogno di un po 'di codice.

  • Ogni file XAML è solitamente associato a un file di codice sorgente, a cui ci riferiamo come codice sottostante. Vari Framework Microsoft utilizzano questo termine.

  • Il codice sottostante in genere dovrà usare elementi definiti in XAML, per recuperare informazioni sull'input dell'utente o per mostrare le informazioni all'utente.

  • Nel codice XAML indicato di seguito, TextBlock e ButtonSono definiti. Per impostazione predefinita, quando l'applicazione viene eseguita, mostrerà un testo "Hello World!"Sulla pagina web e un pulsante.

<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"> 
      <StackPanel> 
         <TextBlock x:Name = "TextMessage"  
            Text = "Hello World!"  
            Margin = "5"> 
         </TextBlock> 
			
         <Button x:Name = "ClickMe"  
            Click = "ClickMe_Click"  
            Content = "Click Me!"  
            Margin = "5"> 
         </Button> 
			
      </StackPanel> 
   </Grid> 
</UserControl>

  • Il codice sottostante può accedere a qualsiasi elemento denominato con x:Name direttiva.

  • Gli elementi denominati diventano disponibili attraverso i campi nel codice sottostante, consentendo al codice di accedere a questi oggetti e ai loro membri nel modo consueto.

  • Il x:Prefix significa che il nome non è una proprietà normale.

  • x:Name è un segnale speciale per il compilatore XAML che vogliamo avere accesso a questo oggetto nel codice sottostante.

Di seguito è riportata l'implementazione dell'evento clic sul pulsante in cui il file TextBlock il testo viene aggiornato.

using System.Windows; 
using System.Windows.Controls;
  
namespace FirstExample {
 
   public partial class MainPage : UserControl {
	
      public MainPage() { 
         InitializeComponent(); 
      }
		
      private void ClickMe_Click(object sender, RoutedEventArgs e) { 
         TextMessage.Text = "Congratulations! you have created your first Silverlight Applicatoin"; 
      } 
   } 
}

  • XAML non è l'unico modo per progettare gli elementi dell'interfaccia utente. Sta a te dichiarare oggetti in XAML o dichiarare / scrivere in un codice.

  • XAML è facoltativo, ma nonostante ciò, è il cuore di Silverlight design.

  • L'obiettivo con la codifica XAML è consentire ai progettisti visivi di creare direttamente gli elementi dell'interfaccia utente. Perciò,Silverlight mira a rendere possibile il controllo di tutti gli aspetti visivi dell'interfaccia utente dal mark-up.