Silverlight.

Od podstaw
Autor: Pawe Maciejewski, Pawe Redmerski
ISBN: 978-83-246-1984-9
Tytu oryginau: COM+ Developer's Guide
Format: 158x235, stron: 208

Silverlight nowy sposb na tworzenie aplikacji internetowych

Jak tworzy aplikacje internetowe za pomoc Silverlight?
Jakie moliwoci kryj si w tej technologii?
W jaki sposb poczy rne elementy, by uzyska wspaniay efekt?

Technologia Silverlight, opracowana przez Microsoft, jest propozycj dla tych, ktrzy
przymierzaj si do projektowania aplikacji internetowych lub zajmuj si tym ju
od jakiego czasu, a chcieliby poszerzy spektrum swoich umiejtnoci.
Do podstawowych zalet tej technologii nale prostota jej uywania oraz ogromna
elastyczno oprcz jzyka XAML, sucego do opisania interfejsu uytkownika,
twrca aplikacji moe posugiwa si dowolnym jzykiem programowania, dostpnym
dla platformy .NET. Gotowe programy przygotowane w Silverlight s kompatybilne
z wikszoci przegldarek, zainstalowanych na rnych platformach.
Ksika Silverlight. Od podstaw zawiera wszelkie informacje na temat najnowszej
wersji tej technologii. Znajdziesz tu opis tego rodowiska programistycznego, jego
funkcjonalnoci oraz narzdzi, ktre musisz zainstalowa, by mc sprawnie korzysta
z Silverlight. Poznasz take zasady tworzenia nowych projektw i ca mas
przykadw konkretnych rozwiza. Wszystko to uzupenione zostao licznymi zrzutami
ekranu, ilustrujcymi niemal kady krok oraz efekty dziaania podanego kodu.
Jeli chcesz nauczy si projektowa aplikacje internetowe w Silverlight, nie znajdziesz
lepszej ksiki!
Zasady dziaania technologii Silverlight
Silverlight a platforma .NET
Programowanie w jzyku XAML
Uywanie kontrolek interfejsu
Pozycjonowanie za pomoc kontenerw
Wykorzystywanie grafiki
Integracja z multimediami
Obsuga zdarze
Tworzenie animacji
Stosowanie stylw i szablonw

Otwrz si na nowe moliwoci. Wyprbuj Silverlight!

Spis treci
Rozdzia 1. Wprowadzenie .................................................................................. 7
Czym jest Silverlight ........................................................................................................ 7
Silverlight jest aplikacj RIA ..................................................................................... 7
Silverlight nie jest drugim Flashem ............................................................................ 7
Silverlight jest multimedialny .................................................................................... 8
Silverlight jest multiplatformowy ............................................................................... 8
Silverlight jest atwy ................................................................................................... 8
Do kogo kierowana jest ta ksika? .................................................................................. 9
Co Czytelnik bdzie potrafi po przeczytaniu ksiki? ..................................................... 9
Miejsce Silverlight w platformie .NET ........................................................................... 10
Narzdzia ........................................................................................................................ 10
Niezbdne narzdzia ................................................................................................ 10
Narzdzia dodatkowe ............................................................................................... 13
Specyfika projektw Silverlight ..................................................................................... 15
Tworzenie nowego projektu ..................................................................................... 15
Osadzanie obiektu Silverlight na stronie HTML ...................................................... 16
Zawarto solucji projektu Silverlight ...................................................................... 18
Kilka sw o strukturze skompilowanego projektu Silverlight ................................. 19
Jak korzysta z przykadw doczonych do ksiki? .................................................... 20

Rozdzia 2. Jzyk XAML ................................................................................... 23

Obiekty i ich wasnoci ................................................................................................... 23
Tagi .......................................................................................................................... 23
Obiekty ..................................................................................................................... 24
Waciwoci ............................................................................................................. 25
Skadnia atrybutowa wasnoci ................................................................................ 25
Skadnia elementw waciwoci ............................................................................. 26
Skadnia mieszana .................................................................................................... 27
Atrybuty doczone .................................................................................................. 27
Korze dokumentu ......................................................................................................... 29
Znacznik UserControl .............................................................................................. 29
Wasno Content ..................................................................................................... 30
Domylna przestrze nazw ....................................................................................... 30
Dodatkowe przestrzenie nazw .................................................................................. 31
Dodatkowa przestrze nazw x .............................................................................. 32

Silverlight. Od podstaw
Wasnoci domylne ....................................................................................................... 33
Domylna wasno znacznika ................................................................................. 33
Korzyci wynikajce ze stosowania wasnoci domylnej ....................................... 34
Modele zawartoci .................................................................................................... 35
Drzewo zalenoci .................................................................................................... 37
Zasada cigoci wasnoci domylnej ..................................................................... 38
Niejawna konwersja typw ............................................................................................. 39
Prosta konwersja typw ............................................................................................ 39
Konwersja zoona ................................................................................................... 40
Zdarzenia ........................................................................................................................ 42
Przypisanie zdarzenia ............................................................................................... 42
Obsuga zdarzenia .................................................................................................... 43
Rozszerzenia znacznikw ............................................................................................... 44
Skadnia rozszerze znacznikw .............................................................................. 44
Definiowanie i korzystanie z zasobw ..................................................................... 45
Wizanie danych ...................................................................................................... 47

Rozdzia 3. Kontrolki interfejsu ......................................................................... 53

Waciwoci kontrolek ................................................................................................... 54
TextBox .......................................................................................................................... 57
PasswordBox .................................................................................................................. 59
CheckBox ....................................................................................................................... 60
RadioButton .................................................................................................................... 61
Kontrolki typu Button ..................................................................................................... 63
ToggleButton ............................................................................................................ 63
HyperlinkButton ....................................................................................................... 64
TextBlock ....................................................................................................................... 66
Slider .............................................................................................................................. 68
ScrollBar i ScrollViewer ................................................................................................ 69
ToolTip ........................................................................................................................... 71
ProgressBar .................................................................................................................... 73
Border ............................................................................................................................. 74
ComboBox ...................................................................................................................... 76
ListBox ........................................................................................................................... 77
Kontrolki z biblioteki System.Windows.Controls .......................................................... 79
TabControl ............................................................................................................... 80
Calendar i DatePicker ............................................................................................... 82
DataGrid ................................................................................................................... 84

Rozdzia 4. Kontenery i pozycjonowanie ............................................................ 91

Pozycjonowanie relatywne ............................................................................................. 92
Marginesy ................................................................................................................. 92
Wyrwnanie elementw ........................................................................................... 93
StackPanel ...................................................................................................................... 97
Okrelenie orientacji panelu ..................................................................................... 97
Grid ................................................................................................................................ 98
Definiowanie wierszy i kolumn ................................................................................ 98
Wielkoci kolumn i wierszy ..................................................................................... 99
Wkadanie elementw do komrek ........................................................................ 100
Scalanie komrek ................................................................................................... 101
Inne waciwoci siatki ........................................................................................... 102
Canvas .......................................................................................................................... 104
Canvas.Left i Canvas.Right .................................................................................... 104
Canvas.ZIndex ....................................................................................................... 106

Spis treci

5
Kontenery z poziomu kodu ........................................................................................... 108
Generowanie kontrolek .......................................................................................... 108
Generowanie kontenerw ....................................................................................... 109

Rozdzia 5. Grafika i multimedia ..................................................................... 115

Pdzle (ang. Brushes) ................................................................................................... 115

SolidColorBrush ..................................................................................................... 116
LinearGradientBrush .............................................................................................. 117
RadialGradientBrush .............................................................................................. 119
ImageBrush ............................................................................................................ 120
VideoBrush ............................................................................................................ 122
Ksztaty ......................................................................................................................... 123
Ellipse ..................................................................................................................... 124
Rectangle ................................................................................................................ 125
Line ........................................................................................................................ 125
Polyline .................................................................................................................. 126
Polygon .................................................................................................................. 127
Geometrie ..................................................................................................................... 128
Atrybuty geometrii prostych ................................................................................... 129
Geometrie zastosowane do przycinania obiektw UIElement ................................ 129
Geometrie zastosowane w obiekcie Path ................................................................ 130
PathGeometry ......................................................................................................... 130
Atrybutowa skadnia cieek (ang. Path Markup Syntax) ...................................... 133
Przeksztacenia graficzne ............................................................................................. 134
Clip ......................................................................................................................... 134
OpacityMask .......................................................................................................... 136
RenderTransform ................................................................................................... 139
Kontrolki multimedialne ............................................................................................... 143
Image ...................................................................................................................... 143
MediaElement ........................................................................................................ 143
MultiScaleImage .................................................................................................... 145

Rozdzia 6. Zdarzenia w Silverlighcie .............................................................. 147

Zdarzenia wejcia ......................................................................................................... 147

Zdarzenia myszki ................................................................................................... 147
Zdarzenia klawiatury .............................................................................................. 151
Zdarzenia aplikacji ....................................................................................................... 153
Fokus aplikacji i kontrolki ...................................................................................... 154
GotFocus i LostFocus ............................................................................................. 154
Loaded .................................................................................................................... 155
SizeChanged ........................................................................................................... 156
Zdarzenia trasowane ..................................................................................................... 156
Tunelowanie zdarze .............................................................................................. 156
Przykadowa aplikacja ............................................................................................ 157
Wasno Handled .................................................................................................. 158

Rozdzia 7. Animacje ..................................................................................... 159

Tworzenie animacji ...................................................................................................... 159
Scenariusze ............................................................................................................. 159
Podstawowe animacje ................................................................................................... 161
Animacje typu From/To/By ................................................................................... 162
Animowane wasnoci ............................................................................................ 164
Kontrolowanie animacji ......................................................................................... 168
Animacje z klatkami kluczowymi ................................................................................ 173
Animacje uywajce klatek .................................................................................... 173
Klatki kluczowe ..................................................................................................... 175

Silverlight. Od podstaw

Rozdzia 8. Style i szablony ............................................................................ 183

Definiowanie stylw ..................................................................................................... 183
Sowniki zasobw .................................................................................................. 184
Pierwszy styl .......................................................................................................... 184
Definiowanie szablonw .............................................................................................. 187
Budowanie szablonu .............................................................................................. 190
Model czci i stanw (ang. Parts and States Model) ............................................. 190
Visual State Manager ............................................................................................. 191
Pierwszy szablon .................................................................................................... 193

Skorowidz .................................................................................... 199

Rozdzia 4.

Kontenery
i pozycjonowanie
W poprzednim rozdziale zostay omwione szczegowo kontrolki dostpne w Silverlighcie.
Znajomo szerokiego wachlarza kontrolek, ktre oferuje technologia, jest niezmierne
wana, ale nie wystarczy do napisania aplikacji silverlightowej z poprawnym (przyjaznym dla uytkownika) interfejsem. Aby byo to moliwe, naley rozumie, jak dziaa
pozycjonowanie elementw wizualnych w technologii Silverlight, ktre jest tematem
tego rozdziau.
Pozycjonowanie kontrolek odbywa si przy pomocy tzw. kontenerw (ang. containers).
S one niewidocznymi obiektami, ktrych jedynym zadaniem jest pozycjonowanie kontrolek (lub innych kontenerw). Tylko elementy bdce wewntrz kontenera mog by
przeze pozycjonowane (patrz: rozdzia 2., Drzewo zalenoci). Pozycjonowanie elementw odbywa si zatem m.in. przez wkadanie ich do kontenerw. To jednak nie
wszystko. Kontener musi mie okrelone pewne wasnoci, ktre determinuj sposb,
w jaki pozycjonuje on elementy w jego wntrzu. W kocu pozycjonowany element moe
mie pewne doczone atrybuty, ktre wpywaj na jego pozycj. Podsumowujc, pozycj
obiektu okrelaj:
zaleno rodzic-dziecko (element pozycjonowany musi by wewntrz kontenera),
waciwoci kontenera (np. Orientation panelu stosu),
atrybuty doczone do elementu pozycjonowanego (np. Canvas.Left).
W polskiej literaturze mona si spotka z tumaczeniem sowa containers jako
pojemniki. W naszej ksice pozostaniemy przy okreleniu kontenery.

W pierwszej kolejnoci omwimy metody pozycjonowania elementw graficznych w Silverlighcie. Nastpnie omwimy zasady pozycjonowania absolutnego i relatywnego. Obydwie zasady pozycjonowania elementw sprowadzaj si w wikszoci przypadkw do
wybrania waciwego kontenera oraz nadania odpowiednich wartoci jego wasnociom
(a take wasnociom doczonym do jego dzieci). Z racji tego, e w Silverlighcie programista ma dostp do trzech rnych kontenerw:

92

Silverlight. Od podstaw
panelu stosu StackPanel,
siatki Grid,
ptna Canvas,

omwimy po kolei kady z nich oraz pokaemy najbardziej typowe zastosowania.

Silverlight posiada tylko trzy kontenery, podczas gdy WPF ma ich a siedem (StackPanel,
Grid, Canvas, UniformGrid, WrapPanel, DockPanel, TabControl). Wraz z rozwojem
technologii Silverlight powinny si w niej pojawia kontenery, ktrych brakuje w stosunku do WPF.

Pozycjonowanie relatywne
Marginesy
Kady obiekt klasy FrameworkElement posiada wasno Margin, czyli margines. Przypisujc margines obiektowi, programista okrela, jaki odstp dzieli go od innych elementw interfejsu.
Obiekty typu FrameworkElement posiadaj wasno Margin, ale nie maj wasnoci
Padding. Istnieje natomiast kontrolka (opisana w rozdziale 3.), ktra posiada zarwno
t, jak i inne wasnoci majce wpyw na wywietlanie elementw graficznych na
ekranie uytkownika. T kontrolk jest Border, ktra na licie czonkw klasy posiada
wasnoci: Margin, Padding, Background, BorderBrush, BorderThickness i inne, dziki
ktrym programista ma wiksz kontrol nad tym, w jaki sposb s wywietlane
elementy wizualne Silverlighta.

Podczas korzystania z marginesw naley pamita o trzech rzeczach:

1. addtywnoci,
2. sposobach zapisu,
3. ujemnych marginesach.

Addytywno
Na rysunku 4.1 mamy pokazany zrzut ekranu przykadowej aplikacji (rdo mona znale
w solucji /Rozdzial4.sln w pliku Margin.xaml).
Na rysunku 4.1 kwadrat posiada margines rwny 20 pikselom, natomiast koo ma margines rwny 50 pikselom. Addytywno marginesw przejawia si w tym, e s one do siebie dodawane podczas obliczania pozycji elementu graficznego na ekranie uytkownika.
Dlatego odstp pomidzy kwadratem i koem na rysunku 4.1 jest rwny w sumie
70 pikselom.

Rozdzia 4. Kontenery i pozycjonowanie

93

Rysunek 4.1.
Addywne dziaanie
marginesw

Rne sposoby zapisu

Margines jest struktur typu Thickness, ktr ju pokrtce omawialimy (patrz rozdzia 2.).
Zgodnie z tym, co wtedy wytumaczylimy, marginesy mona definiowa w XAML-u
na trzy rne sposoby. W ramach przypomnienia wszystkie zostay pokazane na listingu
4.1 (linijki od 1. do 3.).
Listing 4.1. Przykady definiowania marginesu
1 <StackPanel x:Name="LayoutRoot" Background="White" Margin="30">
2
<Rectangle Width="100" Height="100" Fill="Red" Margin="20 40" />
3
<Ellipse Width="100" Height="100" Fill="Blue" Margin="50 10 5 15" />
4 </StackPanel>

Ujemne marginesy
Czym, o czym do tej pory jeszcze nie wspominalimy, s ujemne marginesy. Ot
w Silverlighcie istnieje moliwo definiowania marginesw o ujemnych wartociach.
Tak jak dodatnie marginesy zwikszaj odstp pomidzy elementami interfejsu, tak marginesy ujemne go zmniejszaj. Jeli ujemny margines jest wikszy ni odlego dzielca
elementy, wtedy zaczynaj one na siebie zachodzi (jeden przykrywa drugi), tak jak
na rysunku 4.2.

Wyrwnanie elementw
Kady obiekt typu FrameworkElement posiada dwie wasnoci:
HorizontalAlignment,
VerticalAlignment,

94

Silverlight. Od podstaw

Rysunek 4.2.
Nachodzenie na siebie
elementw wynik
zastosowania
ujemnych marginesw

dziki ktrym programista moe okreli jego wyrwnanie. Wasno HorizontalAlignment

okrela wyrwnanie w poziomie, natomiast VerticalAlignment wyrwnanie w pionie.
Na listingu 4.2 mona zobaczy uycie tych wasnoci w XAML-u, a rysunek 4.3 przedstawia efekt ich dziaania.
Listing 4.2. Uycie podstawowych wartoci wasnoci HorizontalAlignment i VerticalAlignment
1 <Grid x:Name="LayoutRoot" Background="White">
2
<Rectangle Width="100" Height="100"
3
HorizontalAlignment="Left" VerticalAlignment="Top"
4
Stroke="LightBlue" StrokeThickness="3">
5
<Rectangle.Fill>
6
<LinearGradientBrush>
7
<GradientStop Offset="0" Color="DarkBlue" />
8
<GradientStop Offset="1" Color="Cyan" />
9
</LinearGradientBrush>
10
</Rectangle.Fill>
11
</Rectangle>
12
<Ellipse Width="100" Height="100"
13
HorizontalAlignment="Center" VerticalAlignment="Center"
14
Stroke="Pink" StrokeThickness="3">
15
<Ellipse.Fill>
16
<LinearGradientBrush>
17
<GradientStop Offset="0" Color="DarkRed" />
18
<GradientStop Offset="1" Color="Red" />
19
</LinearGradientBrush>
20
</Ellipse.Fill>
21
</Ellipse>
22
<Polygon Points="50,75 0,0 100,0"
23
HorizontalAlignment="Right" VerticalAlignment="Bottom"
24
Stroke="LightGreen" StrokeThickness="3">
25
<Polygon.Fill>
26
<LinearGradientBrush>
27
<GradientStop Offset="0" Color="Green" />
28
<GradientStop Offset="1" Color="LightGreen" />
29
</LinearGradientBrush>
30
</Polygon.Fill>
31
</Polygon>
32 </Grid>

Rozdzia 4. Kontenery i pozycjonowanie

95

Rysunek 4.3.
Demonstracja
dziaania
podstawowych
wartoci wasnoci
pozycjonujcych

Wasno HorizontalAlignment posiada wartoci:

Left wyrwnanie do lewej strony,
Center wycentrowanie w poziomie,
Right wyrwnanie do prawej strony,
Stretch wyrwnanie w pionie.

Analogicznie, VerticalAlignment przyjmuje wartoci:

Top wyrwnanie do gry,
Middle wyrodkowanie w pionie,
Bottom wyrwnanie do dou,
Stretch wyrwnanie w poziomie.

W kodzie programu z listingu 4.2 nie uylimy jednej z wartoci, ktra jest wsplna dla
obu wasnoci (zarwno HorizontalAlignment, jak i VerticalAlignment). Mowa tutaj
o wartoci Stretch.
Stretch jest wartoci, ktra mwi, aby obiekt zosta rozcignity w danym kierunku.
Innymi sowy, przypisanie obiektowi wasnoci HorizontalAlignment=Stretch sprawi,
e zabierze on cae dostpne miejsce w poziomie. Listing 4.3 pokazuje wykorzystanie
wartoci Stretch (rysunek 4.4 przedstawia zrzut ekranu aplikacji).
Listing 4.3. Wykorzystanie wasnoci Stretch
1 <Grid x:Name="LayoutRoot" Background="White">
2
<Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
3
Stroke="LightBlue" StrokeThickness="3">
4
<Rectangle.Fill>
5
<LinearGradientBrush>

96

Silverlight. Od podstaw

Listing 4.3. Wykorzystanie wasnoci Stretch cig dalszy

6
<GradientStop Offset="0" Color="DarkBlue" />
7
<GradientStop Offset="1" Color="Cyan" />
8
</LinearGradientBrush>
9
</Rectangle.Fill>
10
</Rectangle>
11
<Ellipse Stroke="Pink" StrokeThickness="3">
12
<Ellipse.Fill>
13
<LinearGradientBrush>
14
<GradientStop Offset="0" Color="DarkRed" />
15
<GradientStop Offset="1" Color="Red" />
16
</LinearGradientBrush>
17
</Ellipse.Fill>
18
</Ellipse>
19
<Button Content="Przycisk" Height="70"
20
HorizontalContentAlignment="Stretch"
21
VerticalAlignment="Stretch" />
22 </Grid>

Rysunek 4.4.
Dziaanie wartoci
Stretch

Prosz zwrci uwag na to, e w linijce 11. listingu 4.3 elipsa nie ma nadanej ani wasnoci HorizontalAlignment, ani VerticalAlignment, a pomimo tego zostanie ona rozcignita (jak wida na rysunku 4.4). Dzieje si tak dlatego, e warto Stretch jest domyln
wartoci zarwno dla HorizontalAlignment, jak i VerticalAlignment.
Wasnoci Width i Height obiektw typu FrameworkElement maj wyszy priorytet ni
warto Stretch wasnoci pozycjonujcych. W przypadku gdy okrelimy wielko
obiektu w pionie lub poziomie, warto Stretch nie ma znaczenia. Tak te jest
w przypadku przycisku z listingu 4.3 (linijka 19. i 20.). Ma on okrelon wysoko,
dlatego zajmuje cae miejsce w poziomie.

Rozdzia 4. Kontenery i pozycjonowanie

97

StackPanel
StackPanel, czyli inaczej panel stosu, to najprostszy z kontenerw dostpnych w Silverli-

ghcie. Elementy znajdujce si w jego wntrzu s rozmieszczane wzdu jednej z prostych

(albo pionowej, albo poziomej), ktr nazywa si orientacj.
Elementy znajdujce si wewntrz panelu stosu s wywietlane w okrelonej kolejnoci.
W przypadku orientacji poziomej elementy s wywietlane od strony lewej do prawej. Gdy
StackPanel ma orientacj pionow, wtedy wywietlane s od gry do dou.

Okrelenie orientacji panelu

Wasno Orientation okrela orientacj panelu stosu i moe przyjmowa dwie wartoci:
Vertical (domylnie) orientacja pionowa (jeden element pod drugim),
Horizontal orientacja pozioma (jeden element obok drugiego).

W solucji /Rozdzial4.sln w pliku /StackPanelOrientation.xaml mona znale kod przykadowej aplikacji. Listing 4.4 pokazuje fragment kodu tego programu, w ktrym wida
dziaanie panelu stosu z wykorzystaniem wasnoci Orientation. Rysunek 4.5 przedstawia
zrzut ekranu aplikacji.
Listing 4.4. Uycie wasnoci Orientation panelu stosu
1 <StackPanel x:Name="LayoutRoot" Background="White">
2
<StackPanel Orientation="Horizontal">
3
<Rectangle Width="125" Height="125" Fill="#BBBBBB"
4
<Rectangle Width="125" Height="125" Fill="#EEEEEE"
5
<Rectangle Width="125" Height="125" Fill="#BBBBBB"
6
</StackPanel>
7
<StackPanel >
8
<Rectangle Width="125" Height="125" Fill="#BBBBBB"
9
<Rectangle Width="125" Height="125" Fill="#888888"
10
</StackPanel>
11 </StackPanel>

/>
/>
/>
/>
/>

Jak mona zobaczy na listingu 4.4, w przykadowej aplikacji mamy trzy panele stosu:
Panel nadrzdny o nazwie LayoutRoot przechowuje inne dwa panele stosu.

Pozycjonuje je wzdu pionowej linii (jeden pod drugim). Nie ma potrzeby

definiowania wasnoci Orientation (jej domylna warto to Vertical).
Panel stosu z trzema poziomymi kwadratami ma okrelon przez programist
warto Orientation=Horizontal.
Panel stosu z dwoma kwadratami. W tym panelu rwnie nie okrela si
parametru Orientation ze wzgldu na warto domyln.

98

Silverlight. Od podstaw

Rysunek 4.5.
StackPanel uycie
wasnoci Orientation

W gruncie rzeczy panele stosu s bardzo prostym narzdziem. Prosz jednak zwrci
uwag na to, e w powyszym przykadzie uylimy trzech paneli stosu, zagniedajc
dwa z nich w jednym nadrzdnym. Jak na tak prosty zabieg zaowocowao to ciekawym
efektem. W dalszej czci ksiki Czytelnik bdzie mia okazj bardzo czsto spotyka
si z podobnym uyciem paneli stosu, ich sia bowiem tkwi w tym, e mona je atwo
(wrcz intuicyjnie) zagnieda oraz czy z innymi kontenerami.

Grid
Siatka Grid jest najwszechstronniejszym kontenerem dostpnym w technologii Silverlight.
Bez niej projektowanie interfejsw byoby o wiele bardziej uciliwe. Aby z niej skorzysta, programista najpierw definiuje siatk, okrelajc liczb wierszy i kolumn (a take ich
rozmiary). Efekt kocowy przypomina troch to, co mona zobaczy po otwarciu pustego
arkusza kalkulacyjnego. Pozycjonowanie za pomoc siatki polega po prostu na wkadaniu
elementw (kontrolek lub innych kontenerw) do jej komrek. W tym podrozdziale
omwimy zarwno etap projektowania siatki i wkadania do niej elementw, jak i dodatkowe moliwoci, takie jak choby scalanie ze sob komrek.

Definiowanie wierszy i kolumn

Definiowanie wierszy i kolumn siatki odbywa si poprzez nadanie jej odpowiednich waciwoci. Definicja tych wasnoci (mowa tutaj konkretnie o waciwociach Column
Definitions i RowDefinitions) nie moe by jednak realizowana poprzez skadni
atrybutow. Dzieje si tak ze wzgldu na to, e teoretycznie programista moe okreli
dowoln liczb wierszy i kolumn. Ponadto, jak si za moment okae, kolumna (czy te
wiersz) moe by okrelona nie tylko jedn liczb (ktra charakteryzuje jej rozmiar), ale
take paroma innymi wielkociami (choby takimi jak minimalny i maksymalny rozmiar).

Rozdzia 4. Kontenery i pozycjonowanie

99

Dlatego wanie definicja zarwno kolumn, jak i wierszy odbywa si przy pomocy skadni
elementw waciwoci.
Jak ju zostao powiedziane, chodzi tutaj o dwie wasnoci (listing 4.5 przedstawia ich
uycie):
ColumnDefinitions definicje kolumn,
RowDefinitions definicje wierszy.
Listing 4.5. Wasnoci ColumnDefinitions i RowDefinitions
1 <Grid x:Name="LayoutRoot" ShowGridLines="True">
2
<Grid.ColumnDefinitions>
3
<ColumnDefinition Width="100" />
4
<ColumnDefinition Width="200" />
5
<ColumnDefinition Width="100" />
6 </Grid.ColumnDefinitions>
7
<Grid.RowDefinitions>
8
<RowDefinition Height="50" />
9
<RowDefinition Height="150" />
10
<RowDefinition Height="50" />
11
</Grid.RowDefinitions>
12 </Grid>

Wewntrz wasnoci ColumnDefinitions musz si znale elementy typu Column

Definition. Jak wskazuje nazwa, s to obiekty reprezentujce w Silverlighcie kolumn.
ColumnDefinition posiada m.in. wasnoci:
Width szeroko pocztkowa kolumny,
MinWidth minimalna szeroko kolumny,
MaxWidth maksymalna szeroko kolumny.

Wasnoci obiektu RowDefinition, ktry opisuje wiersz, s analogiczne.

Wielkoci kolumn i wierszy

W Silverlighcie mamy dwie moliwoci okrelania wysokoci wierszy czy szerokoci
kolumny:
statyczne,
procentowe.

W listingu 4.5, w trzeciej linijce, mamy najprostsz z moliwych definicj wasnoci

Width:
Width=100

ktra mwi, e szeroko kolumny wynosi 100 pikseli. Jest to wielko statyczna, tzn.
podana jawnie w pikselach, w praktyce najczciej stosowana.

100

Silverlight. Od podstaw

Podczas pracy z siatkami bardzo szybko si okae, e statyczne okrelanie wielkoci jest
niewystarczajce i trzeba sign po wielkoci procentowe. Wielko wyraona procentowo
okrela, ile procent dostpnego dla elementu graficznego miejsca moe on zabra. W Silverlighcie 100% symbolizuje gwiazdka *. Aby kolumna zajmowaa cae dostpne jej miejsce,
naley napisa:
<ColumnDefinition Width=* />

Jeli natomiast uyjemy zapisu:

<ColumnDefinition Width=0.8* />

wtedy kolumna zajmie 80% wolnego miejsca. Co ciekawe, rwnoznaczne s zapisy:

<ColumnDefinition Width=8* />
<ColumnDefinition Width=80*

To, czy programista napisze w kodzie programu 0.8*, czy 80*, jest tylko kwesti jego
wyboru.

Wkadanie elementw do komrek

Gdy programista ma ju okrelon siatk za pomoc definicji wierszy i kolumn, wtedy
moe wkada elementy do poszczeglnych komrek. Podobnie jak to miao miejsce
w przypadku panelu stosu, pozycjonowany element musi by dzieckiem siatki w drzewie
zalenoci. Aby okreli, w ktrej komrce ma si znajdowa pozycjonowany obiekt, programista musi doczy do niego atrybuty (patrz rozdzia 2., Atrybuty doczone):
Grid.Column indeks kolumny,
Grid.Row indeks wiersza.
Indeksy kolumn i wierszy s numerowane w Silverlighcie od zera. Na przykad, majc
zdefiniowane dwie kolumny w siatce, indeksem pierwszej z nich bdzie 0, natomiast
drugiej 1.

Woenie przycisku do drugiej kolumny i drugiego wiersza siatki zdefiniowanej kodem

z listingu 7.2 wyglda nastpujco:
<Button Grid.Column="1" Grid.Row="1" Content="Przycisk" Width="100" Height="20" />

W solucji /Rozdzial4.sln w pliku ColumnsAndRowsDefinitions.xaml mona znale przykadow aplikacj. Definiuje ona siatk z listingu 4.5 oraz umieszcza w niej przycisk. Zrzut
ekranu aplikacji przedstawia rysunek 4.6.
Jeli piszemy w programie pierwszy obiekt siatki, to czsto nie ma nadanych atrybutw
Grid.Row i Grid.Column. To dlatego, e w przypadku gdy nie doczymy atrybutw
Grid.Row i Grid.Column do obiektu, ktry znajduje si wewntrz siatki, wtedy zostanie
on umieszczony w pierwszej kolumnie i pierwszym wierszu (czyli tak, jakby mia doczone atrybuty Grid.Row=0 i Grid.Column=0).

Rozdzia 4. Kontenery i pozycjonowanie

101

Rysunek 4.6.
Pozycjonowanie
za pomoc siatki Grid

Scalanie komrek
Posugujc si siatk, w Silverlighcie istnieje moliwo scalania ze sob komrek. Dziki
temu moliwe jest osignicie efektw, takich jak na rysunku 4.7.
Rysunek 4.7.
Moliwoci, jakie daje
scalanie komrek

Scalanie realizowane jest przez dwa atrybuty doczone:

Grid.ColumnSpan,
Grid.RowSpan,

ktre przyjmuj jako warto liczb cakowit okrelajc ilo scalanych wierszy/kolumn.
Dla przykadu, kwadrat z powyszego rysunku scala dwie komrki w pionie i w poziomie.

102

Silverlight. Od podstaw

Informacje o scaleniu s doczane do obiektu (podobnie jak atrybuty Grid.Row i Grid.

Column), a nie definiowane wraz z kolumnami i wierszami. Prosz zwrci uwag na
to, e dziki temu istnieje moliwo nadania obiektom znajdujcym si w tej samej komrce rnego scalania, uzyskujc przy tym ciekawe efekty.

Inne waciwoci siatki

Pisalimy ju o definiowaniu kolumn i wierszy siatki, co w gruncie rzeczy jest nadawaniem wartoci odpowiednim wasnociom klasy Grid. Rzecz jasna nie s to jedyne wasnoci siatek (chocia prawdopodobnie najwaniejsze). Na koniec wypada nam pokrtce
omwi pozostae wyrniajce si waciwoci siatki.

ShowGridLines
ShowGridLines to wasno, ktra znacznie uatwia prac programisty z siatkami. Przyjmuje ona warto logiczn:
true na siatce s pokazywane linie pomocnicze w miejscach, w ktrych

przebiegaj granice kolumn i wierszy,

false (domylnie) ukrywa linie pomocnicze.

Rysunek 4.8 przedstawia pust siatk z waciwoci ShowGridLine ustawion na true.

Rysunek 4.8.
Efekt wczenia
wasnoci
ShowGridLines

Width i Height
Width i Height to z pozoru trywialne waciwoci, ktre okrelaj rozmiary elementu
graficznego. W przypadku wszystkich kontenerw (nie tylko siatki) te dwie niepozorne
wasnoci maj jednak due znaczenie. Przyjrzyjmy si listingowi 4.6 z kodem aplikacji,
ktr mielimy okazj oglda na rysunku 4.8.

Rozdzia 4. Kontenery i pozycjonowanie

103

Listing 4.6. Siatka z ustalonym rozmiarem

1 <Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True"
2
Width="450" Height="350" >
3
<Grid.ColumnDefinitions>
4
<ColumnDefinition Width="40" />
5
<ColumnDefinition Width="180" />
6
<ColumnDefinition Width="60" />
7
<ColumnDefinition />
8
</Grid.ColumnDefinitions>
9
<Grid.RowDefinitions>
10
<RowDefinition Height="50" />
11
<RowDefinition Height="70" />
12
<RowDefinition Height="30" />
13
<RowDefinition Height="60" />
14
<RowDefinition Height="90" />
15
<RowDefinition />
16
</Grid.RowDefinitions>
17 </Grid>

Pierwsz wan cech siatki z listingu 4.6 jest to, e ma ona okrelony rozmiar: 450 pikseli
szerokoci i 350 wysokoci. Drug ciekaw cech jest to, e zarwno definicja ostatniej
kolumny (linijka 7.), jak i definicja ostatniego wiersza (linijka 15.) nie ma okrelonego
rozmiaru.
Jest tak dlatego, e w przypadku siatek ich rozmiar okrelony waciwociami Width i Height
ma wiksze znaczenie ni definicje ich wierszy i kolumn. Oznacza to mniej wicej to, e
szeroko siatki nie jest rwna szerokoci jej kolumn, a wysoko siatki nie jest sum wysokoci wierszy. Z tego faktu wynika kilka konsekwencji, o ktrych trzeba pamita,
uywajc siatek.
Pierwsz z nich jest to, e definicje ostatnich kolumn/wierszy mog nie mie okrelonej
szerokoci/wysokoci. Niezalenie od tego, jaki nadamy rozmiar ostatniej kolumnie
i wierszowi, ich rozmiar zostanie tak dobrany, aby siatka miaa rozmiar zdefiniowany
przez Width i Height. Dlatego rozmiar ostatniej kolumny czy wiersza nie ma znaczenia.
Drug konsekwencj jest natomiast to, e jeli zdefiniujemy za may rozmiar siatki, to
kolumny i wiersze, ktre wykraczaj poza jej granice, nie bd widoczne.
Niezalenie od tego, co zrobimy z ostatni kolumn/wierszem, siatka i tak bdzie tak
szeroka i tak wysoka, jak to okrelilimy waciwociami Width i Height. W przypadku
gdy nie okrelimy wasnoci Width i Height, siatka najpewniej zabierze cae dostpne
dla niej miejsce i bdzie si zachowywaa dalej tak, jakby jej Width i Height byy
okrelone.

Takie zachowanie siatki moe si wydawa pocztkowo nieintuicyjne. W praktyce jednak

jest ono przydatne, programista bowiem, ustalajc rozmiar siatki, ma gwarancj, e elementy przez ni pozycjonowane nie zmieni jej rozmiaru. Taka gwarancja ma du warto,
w przypadku gdy programista nie ma pewnoci, co si moe znale w kontenerze (np.
gdy w siatce s dynamicznie wkadane informacje pochodzce z bazy danych).

104

Silverlight. Od podstaw

Canvas
Jak ju zostao kilka razy wspomniane, w Silverlighcie programista ma do dyspozycji trzy
kontenery. Dwa z nich, ktre su do pozycjonowania relatywnego, zostay ju omwione.
Ostatni, kontener Canvas (ang. ptno), jest jedynym narzdziem w technologii Silverlight
sucym do pozycjonowania absolutnego.
Mona powiedzie, e pozycjonowanie absolutne pozwala programicie na okrelenie
wsprzdnych obiektu pozycjonowanego. Przy uyciu narzdzi pozycjonowania relatywnego (panelu stosu i siatki) nie ma takiej moliwoci. W tym podrozdziale skupimy
si na omwieniu sposobu korzystania z ptna.
Z racji tego, e w tym przypadku nie ma potrzeby definiowania ani kolumn, ani wierszy
(okrelamy tylko wsprzdne elementw pozycjonowanych), kontener Canvas nie posiada
tylu ciekawych waciwoci, co choby siatka Grid. Posugiwanie si ptnem sprowadza
si do doczania odpowiednich atrybutw do jego dzieci (w celu okrelenia m.in. wsprzdnych). Mowa tutaj o trzech atrybutach doczonych:
Canvas.Left,
Canvas.Right,
Canvas.ZIndex.

Przejdziemy teraz do pokazania, jak korzysta z tych atrybutw.

Canvas.Left i Canvas.Right
Te dwie wasnoci su do okrelenia odlegoci pozycjonowanego obiektu od lewego
grnego boku kontenera. Listing 4.7 pokazuje uycie tych dwch atrybutw doczonych.
W linijce 2. s doczone do kwadratu tak, aby jego pozycja na ptnie wynosia 130 pikseli
od gry i 230 pikseli od lewej strony.
Listing 4.7. Uycie wasnoci Canvas.Left i Canvas.Right do pozycjonowania kwadratu
1 <Canvas>
2
<Rectangle Canvas.Left="230" Canvas.Top="130"
3
Width="150" Height="150"
4
Stroke="LightBlue" StrokeThickness="3">
5
<Rectangle.Fill>
6
<LinearGradientBrush>
7
<GradientStop Offset="0" Color="DarkBlue" />
8
<GradientStop Offset="1" Color="Cyan" />
9
</LinearGradientBrush>
10
</Rectangle.Fill>
11
</Rectangle>
12 </Canvas>

Rozdzia 4. Kontenery i pozycjonowanie

105

W solucji /Rozdzial4.sln w pliku /CanvasLeftRight.xaml mona znale kod aplikacji, ktrej

fragment kodu zosta przedstawiony na listingu 4.7. Zrzut ekranu aplikacji (wraz z naniesionymi strzakami pomocniczymi) przedstawia rysunek 4.9.
Rysunek 4.9.
Pozycjonowanie
kwadratu za pomoc
ptna

Ptno Canvas, dziki moliwoci dokadnego okrelenia wsprzdnych pozycjonowanego

obiektu (za pomoc atrybutw doczonych Canvas.Left i Canvas.Right), daje programicie najwiksz swobod pozycjonowania. Kady obiekt wewntrz ptna, niezalenie od
tego, ktrym w kolejnoci jest dzieckiem, jest zawsze pozycjonowany wzgldem lewego,
grnego boku ptna. Dziki temu mona w mgnieniu oka napisa aplikacj, ktra wyglda np. tak, jak ta przedstawiona na rysunku 4.10 (kod programu mona znale w solucji
/Rozdzial4.sln w pliku CanvasLeftRight2.xaml).
Rysunek 4.10.
Moliwoci
pozycjonowania przy
pomocy ptna Canvas

106

Silverlight. Od podstaw

Wykonanie takiego programu, jaki zosta przedstawiony na rysunku 4.10, przy pomocy
np. siatki jest rwnie moliwe. W tym celu naleaoby zdefiniowa najpierw odpowiednie kolumny i wiersze, a nastpnie powkada w nie kwadraty. Lista czynnoci jest tutaj o
wiele dusza, dlatego ptno Canvas nadaje si do tego zadania o wiele lepiej.
Ptno jest narzdziem stosunkowo prostym, ale potnym. W przypadku gdybymy chcieli
dynamicznie zmienia pozycje kwadratw z rysunku 4.10 (np. w zalenoci od tego, gdzie
na ekranie znajduje si myszka), wystarczy tylko odpowiednio zmienia wasnoci atrybutw do nich doczonych.
Pomimo tych wszystkich zalet samo ptno najczciej nie przyda nam si do pisania
interfejsw siatka jest w takich sytuacjach niezastpiona.

Canvas.ZIndex
Podczas pozycjonowania absolutnego elementw czsto jest tak, e jedne zachodz na
drugie, zakrywajc je w mniejszym bd wikszym stopniu taka sytuacja pokazana jest
na rysunku 4.11.
Rysunek 4.11.
Nakadanie si
obiektw wizualnych

Czsto jest tak, e zachodzenie na siebie elementw nie jest wypadkiem przy pracy,
a efektem zamierzonym przez programist. Dlatego w Silverlighcie istnieje moliwo
okrelenia kolejnoci wywietlania elementw, tak aby programista mia nad nim pen
kontrol. Koncepcja nie jest moe i nowa, ale prosta i skuteczna. Polega na tym, e elementom graficznym znajdujcym si na kanwie mona przypisa liczb naturaln, ktra
determinuje to, jako ktry zostanie on wywietlony. Obiekty o numerach wyszych s
wywietlane ponad elementami o numerach niszych. Jeli zatem chcemy, aby kwadrat
z rysunku zawsze znajdowa si nad koem (niezalenie od jego miejsca w kodzie
programu), wtedy napiszemy kod programu z listingu 4.8.

Rozdzia 4. Kontenery i pozycjonowanie

107

Listing 4.8. Uporzdkowanie elementw za pomoc wasnoci Canvas.ZIndex

1 <Canvas>
2
<Rectangle Canvas.Left="50" Canvas.Top="50"
3
Canvas.ZIndex="1"
4
Width="125" Height="125"
5
Stroke="LightBlue" StrokeThickness="3">
6
<Rectangle.Fill>
7
<LinearGradientBrush>
8
<GradientStop Offset="0" Color="DarkBlue" />
9
<GradientStop Offset="1" Color="Cyan" />
10
</LinearGradientBrush>
11
</Rectangle.Fill>
12
</Rectangle>
13
<Ellipse Canvas.Left="100" Canvas.Top="50"
14
Width="125" Height="125"
15
Stroke="Pink" StrokeThickness="3">
16
<Ellipse.Fill>
17
<LinearGradientBrush>
18
<GradientStop Offset="0" Color="DarkRed" />
19
<GradientStop Offset="1" Color="Red" />
20
</LinearGradientBrush>
21
</Ellipse.Fill>
22
</Ellipse>
23 </Canvas>

W trzeciej linijce kodu uywamy waciwoci Canvas.ZIndex. Jest to atrybut doczony,

ktry suy w Silverlighcie do okrelenia kolejnoci wywietlania elementw graficznych.
Dziki cisemu okreleniu kolejnoci wywietlania udao nam si wywietli kwadrat
ponad koem, jak to wida na rysunku 4.12. Peen kod programu mona znale w solucji
/Rozdzial4.sln w pliku CanvasZIndex.xaml.
Rysunek 4.12.
Uycie atrybutu
Canvas.ZIndex

108

Silverlight. Od podstaw

Kontenery z poziomu kodu

Mamy ju wiedz na temat tego, jak pisa w XAML-u kontenery i jak osadza na nich
kontrolki. Wiemy take, jak pozycjonowa elementy znajdujce si wewntrz kontenerw.
Zdarza si jednak czasem tak, e istnieje potrzeba wygenerowania kontrolek z poziomu
kodu, a nastpnie wywietlenia ich uytkownikowi. Z tak sytuacj mamy do czynienia
w przypadku pobierania informacji z bazy danych, a potem prezentacji ich w postaci listy.
W tym rozdziale pokaemy, jak rozwiza trudnoci, ktre pojawiaj si przy generowaniu treci z poziomu kodu aplikacji.

Generowanie kontrolek
Zanim przejdziemy do omawiania kontenerw tworzonych z poziomu kodu, pokaemy,
jaka jest oglna metoda generowania wikszoci kontrolek interfejsu, takich jak Button
czy TextBox.
Jak ju zostao napisane, w jzyku XAML piszemy znaczniki, ktrych wasnociom
moemy przypisa wartoci (za pomoc skadni atrybutowej bd elementw wasnoci).
Powiedzielimy te, e znaczniki z pliku .xaml s mapowane na obiekty jzyka CLR, tak
samo jak kod napisany w innym, dowolnym jzyku platformy .NET. Dlatego te pisanie
kontrolek z poziomu pliku code-behind sprowadza si do utworzenia obiektu odpowiedniej klasy (jeli ma to by przycisk, to tworzymy obiekt klasy Button) oraz nadania wasnociom nowo utworzonego obiektu odpowiednich wartoci. Listing 4.9 pokazuje,
jak tworzy si blok tekstu TextBlock z pliku code-behind.
Listing 4.9. Stworzenie bloku tekstu z poziomu kodu
1
2
3
4
5
6

TextBlock t = new TextBlock();

t.Width = 200;
t.Height = 50;
t.TextWrapping = TextWrapping.Wrap;
t.TextAlignment = TextAlignment.Center;
t.Text = "To jest wygenerowana kontrolka interfejsu";

Jak wida, przypisujemy wartoci wasnociom, ktre nazywaj si tak samo jak wasnoci
w XAML-u (i nie powinno by w tym nic dziwnego). Pozostaje jednak jeden problem.
Tak napisanej kontrolki nie zobaczymy po uruchomieniu aplikacji Silverlight. Aby kontrolka bya wywietlana na ekranie uytkownika, musi by osadzona na kontenerze.
W poniszym podrozdziale dowiemy si, jak to zrobi.

Rozdzia 4. Kontenery i pozycjonowanie

109

Generowanie kontenerw
Kolekcja Children
Wszystkie kontenery dziedzicz po jednej wsplnej klasie o nazwie Panel. Ta klasa
definiuje kolekcj Children. Jest to kolekcja typu UIElementCollection, co w praktyce
oznacza, e moemy do niej woy dowolny element wizualny Silverlighta. Moe by
to zarwno kontrolka interfejsu, ksztat, jak i inny kontener.
Wkadajc elementy wygenerowane w kodzie do kolekcji Children kontenera, sprawimy,
e bdzie on wywietlony i pozycjonowany przez ten kontener. Przy czym naley pamita, e kontener wcale nie musi by utworzony dynamicznie. Listing 4.10 pokazuje kod,
w ktrym osadzamy kontrolk z poprzedniego listingu na siatce LayoutRoot.
Listing 4.10. Woenie kontrolki do kontenera
1
2
3
4
5
6
7
8
9

TextBlock t = new TextBlock();

t.Width = 200;
t.Height = 50;
t.TextWrapping = TextWrapping.Wrap;
t.TextAlignment = TextAlignment.Center;
t.FontSize = 16;
t.Text = "To jest wygenerowana kontrolka interfejsu";
LayoutRoot.Children.Add(t);

Taki kod wywietli nam kontrolk bloku tekstu prosz spojrze na rysunek 4.13,
ktry pokazuje zrzut ekranu dziaajcej aplikacji. Peny kod programu mona znale
w solucji /Rozdzial4.sln w pliku TextBlockFromCodeBehind.cs.
Rysunek 4.13.
Pierwsza kontrolka
umieszczona
w kontenerze
z poziomu kodu

110

Silverlight. Od podstaw

Pozycjonowanie wygenerowanych kontrolek

Pisalimy powyej o tym, e aby wywietli kontrolki, musimy umieci je w kolekcji
Children kontenera. Jest to zupenie wystarczajce w przypadku panelu stosu StackPanel
kolejne elementy kolekcji Children bd prawidowo przez niego pozycjonowane
tylko dziki temu, e StackPanel to najprostszy z dostpnych kontenerw. Inne kontenery
s ju bardziej wymagajce. Aby pozycjonowa element osadzony na kanwie, musimy
okreli dla niego wasnoci Left i Top. Podobnie jest z siatk Grid, gdzie moemy poda,
w ktrej kolumnie i wierszu ma si znajdowa pozycjonowany obiekt. W tym podrozdziale pokaemy, jak pozycjonowa elementy graficzne Silverlighta w tych dwch
kontenerach.

Pozycjonowanie na siatce Grid

Napiszmy przykadow siatk, tak jak pokazana na listingu 4.11.
Listing 4.11. Siatka, na ktrej osadzimy z poziomu kodu kontrolk
1 <Grid x:Name="LayoutRoot" Background="White"
2
ShowGridLines="True" Loaded="LayoutRoot_Loaded" >
3
<Grid.ColumnDefinitions>
4
<ColumnDefinition Width="100" />
5
<ColumnDefinition Width="50" />
6
<ColumnDefinition Width="250" />
7
</Grid.ColumnDefinitions>
8
<Grid.RowDefinitions>
9
<RowDefinition Height="100" />
10
<RowDefinition Height="50" />
11
<RowDefinition Height="150" />
12
</Grid.RowDefinitions>
13 </Grid>

Rysunek 4.14 pokazuje, jaka jest struktura tej siatki.

Rysunek 4.14.
Siatka z listingu 4.11

Rozdzia 4. Kontenery i pozycjonowanie

111

Jak wida, mamy w niej trzy kolumny i tyle samo wierszy. Bdziemy teraz chcieli umieci w drugiej kolumnie i wierszu przycisk. Jeli mielibymy to zrobi w XAML-u, to
musielibymy wewntrz siatki umieci znacznik:
<Button Width=100 Height=20 Content=Przycisk Grid.Row =1 Grid.Column=1 />

Jeli jestemy natomiast po drugiej stronie, czyli po stronie pliku code-behind, to musimy
najpierw utworzy przycisk i doda go do listy czonkw siatki, tak jak to robilimy w poprzednich przykadach. Nastpnie musimy okreli kolumn i wiersz przycisku, co nie jest
prostym zadaniem z racji tego, e w XAML-u te wasnoci s atrybutami doczonymi.
Z pomoc przychodzi tutaj klasa Grid. Na jej licie czonkw mona znale cztery metody
statyczne:
void SetColumn(FrameworkElement element, int value) wkada element
do kolumny o numerze value,
void SetRow (FrameworkElement element, int value) wkada element
do wiersza o numerze value,
void SetColumnSpan (FrameworkElement element, int value) ustawia
scalanie kolumn o wartoci value dla obiektu element,
void SetRowSpan (FrameworkElement element, int value) ustawia
scalanie wierszy o wartoci value dla obiektu element.

Za pomoc tych metod moemy z poziomu kodu zrealizowa nasze cele. Listing 4.12
pokazuje kod, za pomoc ktrego umieszczamy przycisk w drugiej kolumnie i drugim
wierszu siatki, a take nadajemy mu scalanie dwch kolumn.
Listing 4.12. Umieszczenie przycisku w drugiej kolumnie i drugim wierszu siatki
1
2
3
4
5
6
7
8

Button b = new Button();

b.Content = "Przycisk";
b.Width = 250;
b.Height = 25;
LayoutRoot.Children.Add(b);
Grid.SetColumn(b, 1);
Grid.SetRow(b, 1);
Grid.SetColumnSpan(b, 2);

Rysunek 4.15 pokazuje, e rzeczywicie udao nam si osign zamierzony efekt.

Peen kod programu mona znale w solucji /Rozdzial4.sln w plikach ButtonOnGrid
FromCodeBehind.xaml i ButtonOnGridFromCodeBehind.xaml.cs.

Pozycjonowanie na kanwie Canvas

W przypadku kanwy Canvas mamy problem podobny do tego z poprzedniego podrozdziau,
gdzie wasnoci pozycjonujce element byy atrybutami doczonymi. I tak jak w przypadku siatek, tak i tutaj rozwizaniem s metody statyczne udostpniane poprzez klas Canvas.
S to:
void SetLeft(UIElement element, double length) ustala dla obiektu
element odsunicie od lewej krawdzi o dugo length,

112

Silverlight. Od podstaw

Rysunek 4.15.
Zrzut ekranu
aplikacji, ktra
osadza przycisk na
siatce z poziomu kodu

void SetTop(UIElement element, double length) ustala dla obiektu

element odsunicie od grnej krawdzi o dugo length,
void SetZIndex(UIElement element, int value) dla obiektu element
kolejno wywietlania jako value.

Napiszemy przykadowy program, w ktrym stworzymy dwa kwadraty, ustalimy ich pozycje na ekranie i kolejno wywietlania. Listing 4.13 pokazuje kod pliku .cs tej aplikacji.
Listing 4.13. Uycie metod pozycjonujcych klasy Canvas
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// Zdefiniowanie kwadratw
Rectangle r1 = new Rectangle();
Rectangle r2 = new Rectangle();
r1.Width = r2.Width = 100;
r1.Height = r2.Height = 100;
r1.Fill = new SolidColorBrush(Colors.Red);
r2.Fill = new SolidColorBrush(Colors.Green);
// Osadzenie kwadratw na kanwie
LayoutRoot.Children.Add(r1);
LayoutRoot.Children.Add(r2);
// Uycie metod klasy Canvas
Canvas.SetLeft(r1, 50);
Canvas.SetTop(r1, 50);
Canvas.SetZIndex(r1, 2);
Canvas.SetLeft(r2, 100);
Canvas.SetTop(r2, 100);
Canvas.SetZIndex(r2, 1);

W kodzie aplikacji utworzylimy dynamicznie dwa kwadraty: jeden czerwony, drugi

zielony. Nastpnie dodalimy je do istniejcej kanwy o nazwie LayoutRoot. Najpierw
dodalimy kwadrat czerwony, a potem zielony ma to znaczenie, poniewa kwadrat

Rozdzia 4. Kontenery i pozycjonowanie

113

zielony bdzie wywietlany ponad czerwonym. Na koniec ustawilimy kwadraty tak,

aby nachodziy na siebie. Zdefiniowalimy im take z-indeks, dziki czemu ostatecznie kwadrat zielony bdzie wywietlany ponad czerwonym.
Kod aplikacji mona znale w solucji /Rozdzial4.sln w pliku ButtonOnCanvasFrom
CodeBehind.xaml.cs. Rysunek 4.16 pokazuje zrzut ekranu dziaajcego programu.
Rysunek 4.16.
Aplikacja
demonstrujca
dziaanie metod
statycznych klasy
Canvas