• Web Design » Silverlight » Manuale Silverlight

Creare una applicazione in Silverlight

Se avete seguito i precedenti articoli riguardantiSilverlight, avrete appreso gli aspetti basilari riguardantiun'applicazione Silverlight. Ora vedremo come realizzareun'applicazione Silverlight.

Creazione del progetto

La prima cosa da fare per creare un'applicazioneSilverlight in Visual Studio è la creazione di unnuovo progetto. L'applicazione "Fantasy Picks"che andremo a c reare sarà sviluppata con la versione2.0 di Silverlight e C#. La figura sottostante mostra lafinestra di dialogo per la creazione di un nuovo progetto.

Fig 1: creazione del progetto Silverlight

Una volta creato il progetto, verranno creati alcuni file dibase:

• TestPage.html - questa è la pgina HTML di base che i quest'esempio non verrà modificata;
• TestPage.html.js - rappresenta il codice richiamato dalla pagina TestPage.html e rappresenta il codice Javascript che, anche in questo caso, non andremo a modificare;
• Silverlight.js - è il file standard del framework Silverlight scritto in Javascript e anche questo non verrà modificato;
• Page.xaml - rappresenta il file XAML di base e il nostro lavoro si concentrerà proprio su questo file;
• Page.xaml.cs - è il codice che accompagna il file XAML, scritto in C#. Aggiungeremo solo alcune linee di codice a questo file.

Il nostro obiettivo è crare una versione basilaredella pagina "Fantasy Picks" usata nei precedentiarticoli e mostrata nella foto sottostante.

Fig 2: obiettivo da raggiungere

Il file XAML

Per prima cosa, aprite la pagina TestPage.html eassegnatele un nuovo titolo, "My FantasyPicks". Potete anche rinominare i fileTestPage.html e TestPage.html.js selo desiderate.

Il passo successivo prevede la costruzione dell osfondo dellapagina. Tenente in mente che i file XAML usano l'elemento<Canvas> per rappresentare il documento.Potete configurare lo sfondo sia attraverso l'editor XAMLin Visual Studio 2008 oppure attraverso Expression Blend 2.

Se scegliete di usare Expression Blend 2 per configurare losfondo, aprite il programma e da questo aprite il progetto.Dal progetto, aprite il file Page.xaml emodificate lo sfondo usando il pannello laterale. La paginamodificata attraverso Expression Blend viene mostrata nellafigura sottostante.

Fig 3: Configurazione della pagina in ExpressionBlend

Una volta completato il lavoro, possiamo procedereall'aggiunta di controlli alla nostra pagina. Il modopiù semplice è usare XAML in Visual Studio2008. Tenente a mente che stiamo lavorando sul codice latoclient. Se usassimo codice lato server, sarebbe facilescordarsi che il codice contenuto sarà eseguito latoclient. quindi, se un'applicazione Silverlight devemostrare dei dati da una sorgente lato server, deve essere ingrado di connettersi via web a tale sorgente. Lamodalità più semplice per recuperare datiremoti è utilizzare un Web service. Ad ogni modo permantenere le cose semplici, al click sul bottone nella paginaverrà nostrata una stringa come mostrato nella figurasottostante.

Fig 4: Applicazione Silverlight risultante

Il file XAML usato per creare il form Silverlight nellafigura qui sopra viene mostrato nel listato sottostante.

Es 1: Page.xaml

<Canvas    xmlns="http://schemas.microsoft.com/client/2007"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:c1="clr-namespace:C1.Silverlight;assembly=ClientBin/C1.Silverlight.dll"    x:Name="parentCanvas" Loaded="Page_Loaded"    x:Class="MyFantasyPicks.Page;assembly=ClientBin/MyFantasyPicks.dll"    Width="640" Height="480">   <Canvas.Background>    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">     <GradientStop Color="#FF000000" Offset="0"/>     <GradientStop Color="#FF96B178" Offset="1"/>    </LinearGradientBrush>   </Canvas.Background><TextBlock Width="598" Height="25" Canvas.Left="25"     Canvas.Top="50" Text="Welcome to the Fantasy Manager"     Foreground="#FFE4F6CC" FontFamily="Segoe UI" FontSize="18"/>   <Rectangle Width="598" Height="1" Fill="#FFE4F6CC" Stroke="#FFE4F6CC"  Canvas.Left="25" Canvas.Top="75" StrokeThickness="0.5"/><c1:Button AutoHeight="False" AutoWidth="False" Height="25" Width="200"     Canvas.Left="25" Canvas.Top="80" Text="Display My Fantasy Picks" Click="GetPicks" /><Rectangle Width="598" Height="1" Fill="#FFE4F6CC" Stroke="#FFE4F6CC"     Canvas.Left="25" Canvas.Top="110" StrokeThickness="0.5"/><TextBlock x:Name="tbPicks" Height="150" Width="598" Canvas.Left="25"     Canvas.Top="115" FontFamily="Segoe UI" FontSize="13" Foreground="#FF4FAFEA"     Text="" FontWeight="Normal" /><Rectangle Width="598" Height="1" Fill="#FFE4F6CC" Stroke="#FFE4F6CC"     Canvas.Left="25" Canvas.Top="270" StrokeThickness="0.5"/><TextBlock Width="598" Height="25" Canvas.Left="25" Canvas.Top="275"     Text="copyright 2007 - fantasy league manager" Foreground="#FFE4F6CC"     FontFamily="Segoe UI" FontSize="10" />  </Canvas>

L'handler dell'evento Click che viene scatenato dallapressione del pulsante viene mostrato nel listatosottostante.

Es 2: Page.xaml.cs

using System;  using System.Linq;  using System.Xml;  using System.Windows;  using System.Windows.Controls;  using System.Windows.Documents;  using System.Windows.Ink;  using System.Windows.Input;  using System.Windows.Media;  using System.Windows.Media.Animation;  using System.Windows.Shapes;  using System.IO;  using System.Net;  using System.Text;  using System.Windows.Browser;  using System.Windows.Browser.Net;    namespace MyFantasyPicks  {public partial class Page : Canvas  {    public void Page_Loaded(object o, EventArgs e)  {  // Required to initialize variables  InitializeComponent();    }    protected void GetPicks(object sender, EventArgs e)   {    tbPicks.Text = "My fantasy picks for week 1 are blah, blah, blah...";    }}  }