Wstęp do technologii Microsoft Silverlight

Autorzy: Robert Przybyło


C#, ASP.NET, XAML


Silverlight jest potężnym narzędziem programistycznym, które potrafi zamienić nudną aplikację internetową w interaktywne przeżycie multimedialne. Technologia ta otwiera nowe możliwości projektowania aplikacji internetowych, desktopowych i mobilnych, a wszystko to w dobrze znanym środowisku Visual Studio. Oswoimy się z tą technologią i zrobimy pierwszy krok do jej poznania, poprzez napisanie prostego programu wyświetlającego „Hello World!”.

Wstęp

Do tworzenia aplikacji będziemy używali środowiska programistycznego Visual Studio 2010, które posiada wbudowane rozszerzenie Silverlight, natomiast posiadacze starszych wersji VS muszą w takowy dodatek zaopatrzyć się na stronie Silverlight. Po upewnieniu się, że mamy zainstalowaną wtyczkę Silverlight, możemy przystąpić do tworzenia naszej aplikacji. Tworzymy nowy projekt, wybierając szablon projektu Silverlight Application.

nowyprojekt

Po wciśnięciu OK pokaże nam się okno dialogowe z zapytaniem, czy chcemy umieścić naszą aplikację w nowej stronie internetowej, kótrą Visual automatycznie utworzy. Potwierdzamy komunikat klikając OK.


Przed naszymi oczyma ukaże się nowy projekt, który jest gotowy do pracy. Po wciśnięciu F5 otworzy nam się nowe okno przeglądarki z naszym projektem i powinniśmy zobaczyć ProgressBar Silverlighta. Na razie nasza aplikacja jest pusta, więc w następnym kroku dodamy kilka elementów. Powracając do projektu, pamiętajmy o tym, że nasza aplikacja ciągle jest debugowana (nawet jeśli zamknęliśmy okno przeglądarki), więc musimy przerwać debugowanie wciskając kombinację klawiszy Shift + F5.

Interfejs

interface

Jak widzimy mamy widok naszego pliku XAML (1), który przedstawia zarówno źródło, jak i design naszego projektu. Po prawej mamy wgląd na pliki wchodzące w skład naszego projektu. Na początek skupimy się na plikach samej aplikacji Silverlight (2). Przełączmy teraz widok na kod pliku XAML, klikając na przycisk zwijający panel (3) i zmieniając zakładkę z Design na XAML.

Pierwsza aplikacja

Przystępując do pisania naszej pierwszej aplikacji zwróćmy uwagę na to, że język XAML jest rozwinięciem języka HTML i XML, także pisanie tutaj odbywa się w podobny sposób i osoby które wcześniej miały styczność z którymkolwiek z tych języków, nie będą miały problemów z adaptacją do nowego środowiska.


Zacznijmy od dodania tekstu w znacznikach <Grid>. Umieścimy w nim obiekt TextBlock poprzez dodanie wiersza:

<TextBlock Text="Moja pierwsza aplikacja Silverlight!"/>

Po kompilacji na ekranie ujrzymy nasz tekst. Jest on jednak jeszcze niesformatowany i dosyć słabo czytelny. Poprawmy to dodając atrybut FontSize="28". Dodajemy ją podobnie jak Text - w pierwszym znaczniku. Kolejność właściwości nie ma znaczenia. Teraz nasz tekst jest lepiej widoczny, jednakże znajduje się w lewym górnym rogu, a chcielibyśmy żeby widniał na środku. Ten efekt otrzymamy poprzez dodanie dwóch właściwości: HorizontalAlignment i VerticalAlignment, ustawiając ich wartość na Center. Gotowy kod powinien wyglądać tak:

<UserControl x:Class="MyFirstSilverlightApp.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">
<TextBlock Text="Moja pierwsza aplikacja Silverlight!" FontSize="28" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</UserControl>

Po skompilowaniu naszego projektu nasz tekst jest czytelny i znajduje się w środku ekranu. Dodajmy teraz przycisk, który będzie zamieniał nasz tekst w "Hello World!". Pod znacznikami TextBlock dodajemy kolejny element, tym razem będzie to Button. Nadajemy mu tekst dodając parametr Content oraz wymiary za pomocą atrybutów Height i Width. Na dodatek zmieńmy rozmiar czcionki, aby był on bardziej czytelny. Kod przycisku, powinien teraz wyglądać tak:

<Button Content="Klik!" FontSize="28" Height="40" Width="100"/>

Po uruchomieniu projektu zauważymy, że nasz przycisk znajduje się na naszym poprzednim napisie. Jednym ze sposobów, aby to zmienić, jest dodanie StackPanel i umieszczenie w nim naszych elementów. StackPanel jest panelem, w którym elementy układają się jeden po drugim. Do naszego StackPanel dodajmy jeszcze dwa atrybuty: Orientation="Vertical", który spowoduje, że elementy będą ustawiać się jeden pod drugim (ustawienie Orientation="Horizontal" jest domyślne i powoduje, że elementy układają się jeden obok drugiego), oraz atrybut VerticalAlignment="Center".

bad1

Natomiast nasz kod powinien wyglądać następująco:

<Grid x:Name="LayoutRoot" Background="White">
        <StackPanel Orientation="Vertical" VerticalAlignment="Center">
            <TextBlock Text="Moja pierwsza aplikacja Silverlight!" FontSize="28" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Button Content="Klik!" FontSize="28" Height="40" Width="100"/>
        </StackPanel>
    </Grid>

Gdy uruchomimy nasz projekt, zobaczymy, że wszystko jest ułożone tak, jak tego chcieliśmy, jednak nasz przycisk nie pełni jeszcze żadnej funkcji. Aby to zmienić, w kodzie XAML musimy zrobić dwie rzeczy. Dodać zdarzenie, które zostanie wywołane po naciśnięciu na przycisk i zdefiniować nazwę obiektu dla tekstu, który będzie ulegał zmianie po wywołaniu funkcji przez przycisk. W takim razie musimy dodać obsługę zdarzenia dla przycisku. Tworzymy atrybut Click, który jest odpowiedzialny za kliknięcie przycisku i z listy rozwijanej wybieramy <New Event Handler>, który stworzy dla nas nową funkcję (rys.)

1

Pozostaje nam dodanie atrybutu określającego nazwę obiektu dla naszego pola tekstowego. Do znacznika TextBlock dodajemy atrybut x:Name="tekst". Finalna wersja naszego pliku XAML powinna wyglądać teraz tak:

<UserControl x:Class="MyFirstSilverlightApp.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 Orientation="Vertical" VerticalAlignment="Center">
            <TextBlock x:Name="tekst" Text="Moja pierwsza aplikacja Silverlight!" FontSize="28" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Button Content="Klik!" FontSize="28" Height="40" Width="100" Click="Button_Click"/>
        </StackPanel>
    </Grid>
</UserControl>

Przejdźmy teraz do obsługi naszego zdarzenia, które będzie zastępować nasz tekst wyrazami "Hello World!". Aby to zrobić musimy przejść do edycji kodu naszej aplikacji, która znajduje się w pliku "MainPage.xaml.cs". W Solution Explorer rozwijamy nasz MainPage.xaml i otwieramy plik MainPage.xaml.cs

explorer

Warto zwrócić uwagę, że zawartość tego pliku to kod języka C#. Aby zmienić tekst kontrolki TextBlock, odnajdujemy automatycznie wygenerowaną funkcję obsługującą utworzone przed chwilą zdarzenie. Następnie wpisujemy linię:

private void Button_Click(object sender, RoutedEventArgs e)
        {
            tekst.Text = "Hello World!";
        }

W linii 3 odwołaliśmy się do właściwości Text kontrolki TextBlock poprzez użycie wcześniej zdefiniowanej nazwy (x:Name=tekst). Teraz możemy uruchomić naszą aplikację i po kliknięciu przycisku nasz standardowy tekst powinien zamienić się w "Hello World!". Jeśli tak się stało, oznacza to, że nasza pierwsza aplikacja Silverlight jest gotowa, a my właśnie zrobiliśmy pierwszy krok do programistycznego świata nowej technologii.


Tak powinna wyglądać nasza gotowa aplikacja, po naciśnięciu przycisku:

hello

Technologia Silverlight z pewnością stwarza nowe możliwości programistyczne. W szczególności daje dużą swobodę w tworzeniu interfejsu użytkownika w przeciwieństwie do standardowych aplikacji typu WinForms. Warto rzucić okiem na przykładowe aplikacje odwiedzając np. stronę silverlight.net.

Silverlight jako alternatywa dla Flasha, cieszy się coraz to większą popularnością, co sprawia że programiści chętnie tworzą swoje aplikacje używając właśnie tej technologii. Jeżeli ktoś szuka potężnego narzędzia, które jest zapakowane w stylowe pudełko, to jest to gadżet dla niego.

Liczba ocen: 4 | Średnia ocen: 5

Czytaj także

 

Skomentuj

Twój komentarz
Dodaj

Komentarze

Nasz Fanpage

Popularne treści

  • .NET  
  • 3D  
  • 8  
  • ActiveDirectory  
  • AJAX  
  • amazon web services  
  • Android  
  • Android Market  
  • AngularJS  
  • Animacja  
  • API  
  • aplikacje  
  • Aplikacje wielojęzyczne  
  • asembler  
  • ASHX  
  • ASP.NET  
  • ASP.NET MVC  
  • assembler  
  • Automated Installation Kit  
  • Azure  
  • bezpieczeństwo  
  • bing  
  • Blender  
  • C#  
  • certyfikat  
  • chmura  
  • cloud computing  
  • cmd  
  • Cmdlet  
  • Cmdlet’ów  
  • core  
  • CSS  
  • Cycles  
  • developer  
  • Entity Framework  
  • Expression Blend  
  • fitl  
  • google  
  • google app engine  
  • googlemaps  
  • GPU  
  • Grafika  
  • GroupPolicy  
  • hamachi  
  • hyperv  
  • hyper-v  
  • IaaS  
  • ImageX  
  • instalacja aplikacji  
  • interface  
  • interfejs  
  • Iron Speed  
  • java  
  • JavaScript  
  • jQuery  
  • Kinect  
  • Knockout  
  • kolokacja  
  • konsola  
  • LINQ  
  • LINQ to SQL  
  • Linux  
  • MakeCert  
  • maps  
  • microsoft  
  • mobile  
  • moduły  
  • MVC  
  • mySQL  
  • OpenSource  
  • openstreet  
  • openvpn  
  • PaaS  
  • partycja  
  • PHP  
  • pliki apk  
  • pon  
  • powershell  
  • preview  
  • programowanie  
  • przeglądarka  
  • przetwarzanie w chmurze  
  • przewodnik  
  • Qt  
  • RAD  
  • Rendering  
  • SaaS  
  • script  
  • SDK  
  • server  
  • serwer  
  • Skalowanie  
  • SQL  
  • Systemy operacyjne  
  • światłowody  
  • Światłowód  
  • Template  
  • ubuntu  
  • virtual  
  • Visual Studio  
  • vpn  
  • WAIK  
  • WCF  
  • WebAdministration  
  • WebApi  
  • Windows  
  • windows azure  
  • Windows PE  
  • Windows Phone  
  • WinFroms  
  • wirtualizacja  
  • WPF  
  • XAML  
  • zdalny  
  • zdjęcia  
Komu polecasz tą stronę? (email)
Poleca (twoje imie/pseudonim)
Treść (opcjonalnie) Do Twojej treści zostanie dodany link polecanej strony
POLECAM