Silverlight - Başlarken

Bu bölümde Silverlight'ın çalışan bir örneğine bakacağız. İki şeye ihtiyacımız var -

  • Öncelikle bir web sayfasına ihtiyacımız var. Silverlight, zengin internet uygulamaları için tasarlanmıştır, bir web sayfasının parçası olarak bir web tarayıcısının içinde çalışmak üzere tasarlanmıştır. Silverlight eklentisini yüklemek için sayfanın uygun bir etiket içermesi gerekir. Ayrıca, Silverlight'ın yüklü olup olmadığını algılamak için mantığı da içerebilir ve bulunmadığında bazı geri dönüş kullanıcı arabirimi sağlayabilir.

  • İhtiyacımız olan ikinci şey Silverlight içeriğinin kendisidir. Bu eğitim, Silverlight için .NET programlama modeline odaklanacaktır. Silverlight kullanıcı arayüzlerini tanımlamak için kullandığımız model dili olan XAML ve C # ile yazılmış .NET kodunun bir karışımını içeren derlenmiş bir Silverlight uygulaması oluşturacağız.

Bir Web sayfası oluşturun

Silverlight'ı kullanmaya başlamanın en kolay yolu, HTML sayfaları olan ve sunucu tarafı kodu olmayan sıradan bir web sitesi oluşturmaktır. Çok basit bir örneğe bakalım.

Step 1 - Aç Visual Studio. TıklaFile menü, üzerine gel New ve sonra tıklayın Project.

Step 2 - bir New Projectiletişim kutusu açılacaktır. AltındaTemplates, seçin Visual C# ve sonra click Silverlight. Sağ bölmede Silverlight Uygulaması'nı seçin.

Projenizi kaydetmek için sabit sürücünüze bir proje adı ve konum girin ve ardından OK projeyi oluşturmak için.

Silverlight projesinin kendisi Silverlight içeriğini oluşturacak ve bu içerik, tüm web uygulamasını oluşturacak olan birçok varlık arasında yalnızca bir varlıktır.

Tıklayın OK.

Step 3 - Kontrol edin Host the Silverlight application checkbox. Varsayılan, bir ASP.NET Web Uygulaması Projesidir.

Step 4- MS-Visual Studio, Silverlight projesi ve ASP.NET web uygulaması olmak üzere iki proje oluşturmuştur. Şimdi bir ASP.NET web uygulamasına ihtiyacımız var. Bunu şurada görebilirsiniz:Solution Explorer penceresi aşağıda gösterildiği gibi.

İçeriği HTTP yoluyla sunabilen her şey işe yarar ama bu Visual Studiove ASP.NET web teknolojisini anlıyor, bu yüzden bize verdiği şey bu.

Silverlight'ın herhangi bir belirli sunucu tarafı teknolojisine bağlı olmadığını göstermek için bunu silelim .aspx dosyası, yalnızca düz statik HTML dosyası bırakılır.

Step 5- FirstExampleTestpage.aspx öğesini sağ tıklayın. Seçenekler listesinden tıklayınDelete.

Step 6 - Ayarla FirstExampleTestPage.html olarak Start sayfa.

MainPage.xamldosyası Silverlight içeriği için kullanıcı arabirimini tanımlar. Ya doğrudan XAML kodu yazabilir ya daToolbox farklı UI öğelerini sürükleyip bırakmak için.

Step 7 - Aşağıda verilen basit bir koddur MainPage.xaml içinde bir Button ve bir TextBlock içinde tanımlanmıştır StackPanel.

<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>

Step 8 - Bu örnek, adında bir olay işleme yöntemi oluşturduğunuzu varsayar ClickMe_Click. İşte şurada göründüğü gibiMainPage.xaml.cs dosya.

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

Step 9 - Silverlight uygulaması herhangi bir yüklü tarayıcıda çalıştırılabilir.

Step 10 - Yukarıdaki kod derlendiğinde ve çalıştırıldığında, aşağıdaki web sayfasını göreceksiniz.

Step 11 - Şimdi, tıkladığınızda Click Me düğmesi, içindeki metni güncelleyecektir. TextBlock Aşağıda gösterildiği gibi.

Daha fazla UI öğesi ekleyerek yukarıdaki örneği çalıştırmanızı öneririz.