Redazione
a- a+

Creare un programma in Silverlight

Creare una applicazione in Silverlight

Se avete seguito i precedenti articoli riguardanti Silverlight, avrete appreso gli aspetti basilari riguardanti un'applicazione Silverlight. Ora vedremo come realizzare un'applicazione Silverlight.


Creazione del progetto

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

Silverlight Project
Fig 1: creazione del progetto Silverlight

Una volta creato il progetto, verranno creati alcuni file di base:

  • 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 basilare della pagina "Fantasy Picks" usata nei precedenti articoli e mostrata nella foto sottostante.

Obiettivo
Fig 2: obiettivo da raggiungere

Il file XAML

Per prima cosa, aprite la pagina TestPage.html e assegnatele un nuovo titolo, "My Fantasy Picks". Potete anche rinominare i file TestPage.html e TestPage.html.js se lo desiderate.

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

Se scegliete di usare Expression Blend 2 per configurare lo sfondo, aprite il programma e da questo aprite il progetto. Dal progetto, aprite il file Page.xaml e modificate lo sfondo usando il pannello laterale. La pagina modificata attraverso Expression Blend viene mostrata nella figura sottostante.

Expression Blend
Fig 3: Configurazione della pagina in Expression Blend

Una volta completato il lavoro, possiamo procedere all'aggiunta di controlli alla nostra pagina. Il modo più semplice è usare XAML in Visual Studio 2008. Tenente a mente che stiamo lavorando sul codice lato client. Se usassimo codice lato server, sarebbe facile scordarsi che il codice contenuto sarà eseguito lato client. quindi, se un'applicazione Silverlight deve mostrare dei dati da una sorgente lato server, deve essere in grado di connettersi via web a tale sorgente. La modalità più semplice per recuperare dati remoti è utilizzare un Web service. Ad ogni modo per mantenere le cose semplici, al click sul bottone nella pagina verrà nostrata una stringa come mostrato nella figura sottostante.

Pagina risukltato
Fig 4: Applicazione Silverlight risultante

Il file XAML usato per creare il form Silverlight nella figura 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>

 

<a href="/img/11/iframe_silverApp1.html" title= "Vedi esempio">Vedi esempio</a>;

 

L'handler dell'evento Click che viene scatenato dalla pressione del pulsante viene mostrato nel listato sottostante.

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...";
          }
      }  
}

 

<a href="/img/11/iframe_silverApp2.html" title= "Vedi esempio">Vedi esempio</a>;



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Staff
Ti interessano altri articoli su questo argomento?
Chiedi alla nostra Redazione!