Silverlight-Chapter 2 - Smith.N Studio

Infoway
Solutions
CHNG II: XAML

CHNG II:
XAML - Extensible Application Markup Language
1 Tng quan v XAML
1.1 XAML l g
XAML c vit tt bi cm t: Extensible Application Markup Language l mt ngn ng dng khai
bo. Bn c th to ra cc phn t ha(UI) vi nhng khai bo thng qua th trong XAML. Sau
bn c th dng file m lnh tch bit ca n(code-behind) tr v nhng s kin v iu khin
nhng i tng m bn nh ngha trong XAML. N l mt ngn ng m t da trn XML l rt
trc quan xy dng giao din t nhng bc phc tho cho ti sn xut sn phm, c bit hu ch
cho i tng c kinh nghim thit k website v k thut.
1.2 Khai bo i tng
C hai cch khai bo i tng trong XAML:
1.2.1 Khai bao trc tip:
S dng th ng m khai bo mt i tng ging nh l mt phn t XML. Bn cng c th s
dng c php ny khai bo i tng gc (root object) hoc xt cc gi tr cc thuc tnh.
1.2.2 Khai bo gin tip:

S dng gi tr trc tip khai bo mt i tng. Bn c th s dng c php ny thit lp gi tr
ca thuc tnh.Thng thng, iu ny c ngha l ch nhng thuc tnh m c h tr bi i tng
mi c th s dng c phng php ny.
1.3 Thit lp c tnh cho i tng
C nhng cch sau khai bo c tnh cho i tng:
1.3.1 S dng c php theo thuc tnh

Di y l v d xt gi tr cho cc thuc tnh: Width, Height, Fill ca i tng Rectangle:
<Rectangle Width="100" Height="100" Fill="Blue" />

1.3.2 S dng c php theo c tnh ca thnh phn(element):

Di y l v d xt c tnh Fill theo cch ny cho i tng Rectangle:

<Rectangle Width="100" Height="100">
<Rectangle.Fill>
<SolidColorBrush Color="Blue"/>
</Rectangle.Fill>
</Rectangle>

Smith Nguyen Studio.
https:/ / www.facebook.com/ SmithNguyenStudio
Infoway
Solutions
CHNG II: XAML

2
1.3.3 S dng c php theo ni dung

Di y l v d xt c tnh Text cho i tng TextBlock(Ging nh i tng Label trong Winform,
Webform):
<TextBlock>
Hello!
</TextBlock>
1.3.4 S dng theo mt tp hp

y l mt trng hp kh th v trong XAML, bi c nhng cch khc nhau th hin tp hp ny.
Hn na n c th xut hin phn u tin ca XAML cho php bn xt nhng c tnh ch c
(read-only) ca i tng.
Di y l v d xt c tnh theo nhng cch khc nhau s dng theo kiu tp hp.
Cch 1:
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>

<GradientStopCollection>
<GradientStop Offset="0.0" Color="Red" />
<GradientStop Offset="1.0" Color="Blue" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
Cch 2:
<LinearGradientBrush.GradientStops>
<! Khng cn khai bo GradientStopCollection, b phn tch s hiu v to ra n -
->
</LinearGradientBrush.GradientStops>
Cch 3:
Ngoi ra, c nhng c tnh m chng c nhng tp hp c tnh nhng chng c xc nh nh l
c tnh ni dung ca lp. Trong trng hp ny ta xt n c tnh GradientStops c x dng
trn. Bn c th loi b c tnh ny v s c kt qu nh sau:
1.4 Root elements v namespace trong XAML
Mt file XAML ch c c duy nht mt Root element v phi tha mn c hai tiu ch sau: well-
formed XML(c m v ng th) v valid XML(tun th theo Document Type Definition(DTD)). V d
di y cho Root element in hnh ca XAML cho Silverlight vi Root element l thnh phn
UserControl.
<UserControl x:Class="MySilverlight.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Grid>
</Grid>
</UserControl>
Infoway
Solutions
CHNG II: XAML

3
1.5 S kin
XAML l mt ngn ng khai bo cho i tng v nhng c tnh ca chng, nhng n cng bao gm
nhng c php cho s kt hp s kin cho i tng trong nhng th nh du. Bn ch r tn ca s
kin nh l mt thuc tnh tn trn i tng m s kin c nghe. V gi tr ca thuc tnh, bn ch
r tn ca hm nghe s kin m bn nh ngha phn code-behind hoc phn javascript.
Vic c khai bao hay khng c tnh x:Class th root trong XAML c nh hng n vic x l s
kin. Nu bn khai bo x:Class tc l vic x l s kin ca bn s c thc hin trong code-behind,
trng hp ny thng xut hin trong kiu lp trnh Managed API (cha trong silverlight 2.0). Cn
ngc li th vic x l s kin ca bn c thc hin ngay trong th Javascript cha trong HTML,
trng hp ny thng xut hin trong kiu lp trnh JavaScript API (cha trong Silverlight 1.0).
- V d di y ch r cho bn thy cch to mt s kin trong trng hp kiu lp trnh
Manged API
<UserControl x:Class="Chapter2.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Button Click="Button_Click" Content="Click me"></Button>
</Grid>
</UserControl>

Don m trn, trong th root <UserControl> chng ta khai bo c tnh x:Class="
Chapter2.Page", iu ny c ngha trong chng trnh ca chng ta c mt file cha class
Chapter2.Page. Class ny s m nhim vic x l cc s kin khai bo file XAML (Page.xaml).
Trong th <Grid> chng ta to thm mt nt <Button> v khai bo trong nt mt s kin
Click="Button_Click".S kin ny s c x l trong code-behind nh sau

namespace Chapter2
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}

private void Button_Click(object sender, RoutedEventArgs e)
{
//Xu ly su kien Button click o day
MessageBox.Show("Xin chao!");
}
}
}

- Cn v d di y s ch r cho bn thy cch to mt s kin trong trng hp kiu lp trnh
JavaScript API
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Button x:Name="button1" Click="Button_Click" Content="Button 1"></Button>
</Grid>
</UserControl>
Infoway
Solutions
CHNG II: XAML

4
Don m trn, trong th root <UserControl> chng ta khng khai bo c tnh x:Class. Vic x l s
kin s c thc hin ngay trong trang HTML c cha chng trnh silverlight ny.

<script type="text/javascript">
function Button_Click() {
alert("Xin chao!");
}
</script>

2 Cc namescope trong XAML

Trong Silverlight, mt XAML namescope lu tr quan h gia nhng tn t kha ca XAML c
nh ngha ca i tng v nhng khi to tng ng ca n. iu ny cng tng t nh ngha
ca namescope trong cc ngn ng lp trnh v cng ngh khc. XAML namescope c to ra trong
qu trnh dch m XAML v trong qu trnh to hnh i tng. Nhng tn m c to trong
namescope sau c s dng code-behind thao tc lc chy chng trnh truy cp ti i
tng c to bi qu trnh dch file XAML. bit thm chi tit cc bn c th tham kho ti a
ch: http://msdn.microsoft.com/en-us/library/cc189026(VS.95).aspx

3 S dng XAMLReader.Load

S dng JavaScript API cho Silverlight, to i tng trong lc thc thi ng dng bt buc phi s
dng qua phng thc CreateFromXaml. S dng manged API nhng class hoc cu trc (structure)
cho php c thm cc thnh phn bn trong thc s c khi to nu n c trong cy thnh phn
ca Silverlight. Trong hu ht cc trng hp m bn mun khi to i tng trong lc thc thi, bn
c th n gin triu gi constructor ca class lin quan ti n.
Tuy vy, Bn vn c th to i tng thng qua u vo l XAML thng qua managed API, qua vic s
dng phng thc XamlReader.Load.
Phng thc Load trong managed API l tng ng vi CreateFromXaml trong JavaScript API, cng
ging nh CreateFromXaml, u vo cho phng thc Load l nhng chui v u ra l nhng i
tng m c th thm vo mng i dng cy ca Silverlight.
XamlReader n gin c thit k c xml XmlReader c trong Silverlight cng nh trong cc
cng ngh khc ca Microsoft . XamlReader l lp c xy dng theo kiu static vi nhng phng
thc to i tng; n to i tng song song vi vic x l XAML sinh ra trong lc thc thi(run-
time) nhng cy i tng t XAML trong Silverlight
Cc bn cn lu nhng im sau khi s dng phng thc Load:
- Ni dung chui XAML phi nh ngha mt phn t gc (root element)
- Ni dung chui XAML phi l well-formed XML, v valid XML
4 XAML v cc Custom class

Infoway
Solutions
CHNG II: XAML

5
XAML h tr kh nng c th nh ngha ty chnh lp(custom class) hoc cu trc(structure) trong bt
k ngn ng runtime no (CLR), v sau truy cp vo class thng qua th nh du ca XAML(XAML
markup), bao gm cch s dng hn hp ca nhng th Silverlight nh ngha trong XAML v
nhng th XAML m tham chiu ti custom class tng ng ca n (Mi custom class cha tng
ng 2 file .cs v .xaml, v d: myclass.xaml v myclass.xaml.cs)
4.1 Custom class trong ng dng hoc Assemblies
Custom class dng trong XAML c th nh ngha theo cch ring bit:
- Trong code-behind c ng gi trong ng dng Silverlight
- Nh l mt class c nh ngha trong mt assembly tch bit, nh l mt th vin thc thi
hoc DLL
Mi cch trn u c nhng u v nhc im nh sau:
- u im ca vic to class v ng gi ring bit l kh nng c th chia s v dng c trong
nhiu ng dng Silverlight khc. ng thi l kh nng qun l phin bn ca control d dng
hn v n lm cho n c kh nng to ra class m bn d dnh s dng nh l mt root
element trong trang XAML.
- u im ca vic to custom class trong ng dng l v mt k thut tng i n gin v
gim thiu kch c v kim tra khi bn gp vn trong d n Silverlight da trn code-behind.
Tuy nhin c im hn ch l bn khng th dng custom class nh l mt root element. Bn
phi tham chiu custom class ca bn qua mt assembly khc hoc l gii hn subclass s dng
User Control h tr code-behind trong d n Silverlight ca bn.
- D l nh ngha trong cng mt assembly hay assembly khc nhau, custom class phi c
nh x qua CLR namespace v XML namespace c tham chiu trong XAML
4.2 Rng buc Custom Class tr thnh thnh phn i tng trong XAML
c to i tng nh l mt thnh phn i tng ca XAML, custom class ca bn phi p
ng cc yu t sau y:
- Custom class phi public v h tr khi to mc nh khng c tham s truyn vo (default
constructure parameterless).
- Custom class khng phi l class lng(class lng v du chm . c php ca n nh hng ti
nhng c im ca Silverlight nh l cc property km theo.
Ngoi ra i tng ca bn nh l mt thnh phn i tng ca XAML, bn c th cho php s
dng nhng property cho cc public property ca Custom class ca bn iu ny lm cho Custom class
ca bn nh l mt kiu property. iu ny bi v by gi i tng c th c khi to ging nh
mt thnh phn i tng v c th xt thuc tnh cho n nh l mt property
4.3 Yu cu i vi s kin trong XAML i vi Custom class
s dng c php theo kiu thuc tnh tng tc vi s kin trong XAML, s kin phi c
public trong class m h tr constructure mc nh, hoc s kin phi c nh ngha trong class tru
tng v sau s kin c th truy cp c qua nhng class k tha.

Infoway
Solutions
CHNG II: XAML

6
5 XAML v Type Converter

6 Layout

Khi bn xy dng ng dng Silverlight, mt trong nhng iu bn cn lm u tin l vic s b tr
giao din ha ca bn nh th no. Silverlight cung cp cho bn 3 kiu b tr khc nhau, l:
Canvas, StackPanel v Grid.
6.1 Canvas
nh ngha mt khu vc m trong bn c th ch ra v tr ca tng i tng thnh phn bng cch
s dng cc ta tham chiu. Bn c th s dng lng cc Canvas vi nhau v nhng thnh phn
bn trong ca Canvas phi l mt UIElement. Trong nhiu trng hp th Canvas ch ng vai tr nh
mt i tng cha ng nhng i tng khc v khng c mt thuc tnh hin th no. Mt
Canvas s khng c hin th nu n c mt trong nhng thuc tnh sau y:
- Thuc tnh Height xt gi tr 0
- Thuc tnh Width xt gi tr 0
- Background bng null hoc l Nothing VS Basic
- Opacity xt gi tr 0
- Visibility bng Visibility.Collapsed
- Mt trong nhng Canvas mc cao hn (parrent) ca n khng c hin th.
V d di y ch ra l hnh ch nht c cch tri 30pixel v cch trn 30pixel

<Canvas Width="640" Height="480" Background="White">
<Rectangle Canvas.Left="30" Canvas.Top="30" Fill="red" Width="200" Height="200"
/>
</Canvas>

6.2 StackPanel
Sp xp nhng thnh phn bn trong n thnh mt dng v c th hin th theo hai kiu ngang hoc l
dc. Gi tr mc nh c gn ch thuc tnh Orientation l chiu dc (Vertical) v gi mc nh c
xt cho hai thuc tnh HorizontalAlignment v VerticalAlignment l Stretch

V d di y hng dn cch to nhng nhng i tng trong StackPanel
Infoway
Solutions
CHNG II: XAML

7
<StackPanel Margin="20">
<Rectangle Fill="Red" Width="50" Height="50" Margin="5" />
<Rectangle Fill="Blue" Width="50" Height="50" Margin="5" />
<Rectangle Fill="Green" Width="50" Height="50" Margin="5" />
<Rectangle Fill="Purple" Width="50" Height="50" Margin="5" />
</StackPanel>

6.3 Grid
nh ngha dng li phc tp bao gm nhng dng v ct. Mc nh Grid cha mt ct v mt dng.
nh ngha nhiu ct hoc dng chng ta dng ColumnDefinitions v RowDefinitions. Mi
ColumnDefinition v RowDefinition trong ColumnDefinitions v RowDefinitions xc nh mt dng
hoc ct. ColumnDefinition v RowDefinition cng nh ngha kch thc ca mi ct v dng s dng
i tng GridLength

V d: Di y l v d dng Grid ln mt thit k giao din c bn.

<Grid x:Name="LayoutRoot" Background="#DCDCDC" Width="400" Height="300"
ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="2*" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="10"
FontWeight="Bold" Text="Contoso Corporation" HorizontalAlignment="Center"
VerticalAlignment="Center" />
<Grid x:Name="FormLayoutGrid" Grid.Row="1" Grid.Column="0"
ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="First Name" Margin="10"
HorizontalAlignment="Left" VerticalAlignment="Center" />
<TextBox Grid.Row="0" Grid.Column="1" Margin="10" />
Infoway
Solutions
CHNG II: XAML

8
<TextBlock Grid.Row="1" Grid.Column="0" Text="Last Name" Margin="10"
<TextBlock Grid.Row="2" Grid.Column="0" Text="Address" Margin="10"

</Grid>
</Grid>

Thm vo mt vi i tng qua code-behind C#

public Page()
{
InitializeComponent();
LayoutDesign();
}

private void LayoutDesign()
{
//To Stackpanel cho ListBox Control
StackPanel DeptStackPanel = new StackPanel();
DeptStackPanel.Margin = new Thickness(10);

LayoutRoot.Children.Add(DeptStackPanel);
Grid.SetColumn(DeptStackPanel, 1);
Grid.SetRow(DeptStackPanel, 1);

TextBlock DeptListHeading = new TextBlock();
DeptListHeading.Text = "Department";

ListBox DeptList = new ListBox();
DeptList.Items.Add("Finance");
DeptList.Items.Add("Marketing");
DeptList.Items.Add("Human Resources");
DeptList.Items.Add("Payroll");

DeptStackPanel.Children.Add(DeptListHeading);
DeptStackPanel.Children.Add(DeptList);

//To StackPanel cho cc nt
StackPanel ButtonsStackPanel = new StackPanel();
ButtonsStackPanel.Margin = new Thickness(10);
ButtonsStackPanel.Orientation = Orientation.Horizontal;
ButtonsStackPanel.HorizontalAlignment = HorizontalAlignment.Center;

Infoway
Solutions
CHNG II: XAML

9
LayoutRoot.Children.Add(ButtonsStackPanel);
Grid.SetColumn(ButtonsStackPanel, 0);
Grid.SetRow(ButtonsStackPanel, 2);
Grid.SetColumnSpan(ButtonsStackPanel, 2);

Button BackButton = new Button();
BackButton.Content = "Back";
BackButton.Height = 30;
BackButton.Width = 100;

Button CancelButton = new Button();
CancelButton.Content = "Cancel";
CancelButton.Height = 30;
CancelButton.Width = 100;

Button NextButton = new Button();
NextButton.Content = "Next";
NextButton.Height = 30;
NextButton.Width = 100;

ButtonsStackPanel.Children.Add(BackButton);
ButtonsStackPanel.Children.Add(CancelButton);
ButtonsStackPanel.Children.Add(NextButton);

BackButton.Margin = new Thickness(10);
CancelButton.Margin = new Thickness(10);
NextButton.Margin = new Thickness(10);
}
}

Infoway
Solutions
CHNG II: XAML

10

Silverlight-Chapter 2 - Smith.N Studio

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Silverlight-Chapter 2 - Smith.N Studio

Uploaded by

Copyright:

Available Formats

Infoway

You might also like