ASP.Net  »  Articoli  »  Silverlight 

Il progetto Silverlight

Vediamo ora il progetto Silverlight e notiamo subito che è composto da due file .xaml e due file .cs, che costituiscono le relative parti di codice applicativo.

• il file App.xaml, per i fini di questo articolo, possiamo considerarlo semplicemente come il punto d'ingresso per un'applicazione Silverlight
• il file Page.xaml, è di maggiore interesse, al suo interno, infatti, scriviamo il codice XAML per costruire la nostra interfaccia utente
• associato al file XAML, c'è anche il file di code-behind Page.xaml.cs, che contiene il codice C# (in questo caso, poiché abbiamo creato un progetto specifico per questo linguaggio) per agganciare la logica applicativa

Nel caso volessimo realizzare un semplice button, ne definiremmo la grafica in XAML, e implementeremmo la logica di gestione dell'evento di click in .NET.

Cos'è XAML

L'Extensible Application Markup Language (XAML) è un linguaggio dichiarativo che serve a rappresentare gli oggetti e ad organizzarli in gerarchie. Viene utilizzato anche per WPF e WF. In Silverlight 2 utilizziamo solo un sottoinsieme del markup XAML messo a disposizione da WPF, per cui il passaggio da WPF a Silverlight 2 risulta semplificato.

Per i nostri scopi sarà utile concentrarci su alcune caratteristiche di questo linguaggio, in particolare sul concetto di Attached Property e sul meccanismo di Data Binding.

Tornando al nostro esempio, realizziamo finalmente un bottone, e scopriamo che il codice risulta molto leggibile.

<Button x:Name="btn1" 
   Content="Il mio primo bottone" 
   Height="50" Width="150" />

In questo modo abbiamo istanziato un oggetto di tipo Button e gli abbiamo assegnato alcune proprietà. Lo stesso codice potrebbe essere scritto in C#: basterebbe dichiarare l'oggetto e aggiungerlo all'elemento root del nostro progetto.

L'elemento root del progetto realizzato da Visual Studio è un elemento di tipo Grid, che costituisce il contenitore per tutti i controlli che aggiungeremo al progetto. Il controllo Grid, non è l'unico controllo che definisce il layout di un'applicazione Silverlight, esistono infatti anche lo StackPanel e il Canvas. Gli elementi in essi contenuti tenderanno a disporsi in base alle caratteristiche di ogni singolo controllo di layout.

• Grid: offre molta flessibilità ed i controlli in esso contenuto si disporranno in base alle righe e alle colonne definite nella griglia
• StackPanel: i controlli andranno ad impilarsi tra loro verticalmente o orizzontalmente in base all'orientamento del controllo
• Canvas: i controlli saranno posizionati in modo assoluto rispetto ad un sistema di coordinate ch ha origine nell'angolo in alto a sinistra del Canvas

Possiamo specificare la posizione di un controllo (pensiamo al nostro bottone) rispetto alle righe e colonne di una Grid o rispetto alle coordinate sul Canvas impostando le opportune proprietà.

<Grid x:Name="LayoutRoot">
  <Button x:Name="btn1" 
  Grid.Column="1" Grid.Row="1" 
  Content="ciao" /> 
</Grid>

Nel Caso di un Canvas:

<Canvas x:Name="LayoutRoot" >
  <Button x:Name="btn1" 
  Canvas.Top="10" Canvas.Left="10" 
  Content="ciao"/>
</Canvas>

Altri articoli

Altre guide

Altre newsletter