Vous êtes sur la page 1sur 10

Infoway

Solutions
CHNG III: S DNG SILVERLIGHT TRN EXPRESSION BLEND V VISUAL
STUDIO 2008

CHNG III:
S DNG SILVERLIGHT TRN EXPRESSION BLEND V VISUAL
STUDIO 2008
1 Gii thiu v cc cng c pht trin Expression Blend 2 kt hp vi VS2008

Expression Blen l mt cng c thit k chuyn nghip v y tnh nng to cc giao din ngi
dng cho cc ng dng trn nn tng Microsoft Silverlight v Microsoft Window. Bng vic tch ri mi
tp tin ca d n theo vai tr, Epxpression Blend cho php nh thit k ch cn tp trung vo vic sng
to cn cc lp trnh vin th tp trung vo cng vic lp trnh. Mi thnh vin nhm c th lm vic
m khng lm cn tr n qu trnh lm vic ca ngi khc.
Expression Blend c th lm ra cc ng dng Windows Presentation Foundation(WPF), trang web
Silverlight 1.0, User control cho Silverlight 2 (file .xap v cc file h tr khc). Cc thit k ca bn
(visual design) c trnh by theo ngn ng nh du l XAML
1.1 Expression Blend lm vic nh th no?
Trong Expression Blen, Bn c th thit k ng dng mt cch trc quan, v cc hnh, ng k, v cc
Control c trn Artboard, v sau bn c th thay i s xut hin v cc hnh ng ca chng. Bn
c th nhp hnh nd, video, v m thanh. Cn trong cc ng dng trn nn tng Window, bn cn c
th nhp v thay i cc i tng 3D.
Bn c th to cc storyboard lm chuyn ng hnh trong thit k ca bn, sau ty trn Trigger
trong Storyboard khi ngi dng c tng tc vi ng dng ca bn
1.2 Nhng tnh nng c c t Expression Blend
Expression Blend 2 bao gm cc tnh nng sau:

- y b cc cng c v vector, n bao gm Text v cc cng c 3D
- D dng s dng, giao din trc quan hin
- Kh nng chuyn ng thi gian thc
- 3D and media support for enhancing user experiences
- H tr tng cng cho ngi dng nhiu kinh nghip vi 3D v Media
- Advanced, flexible, and reusable customization and skinning options for a variety of
common controls
- Nng cao, linh ng, ty bin ha cc tnh nng s dng li, cc la chn b mt cho
mt vo control ph bin.
- Tnh nng tng tc mnh m vi cc ngun d liu v cc ti nguyn bn ngoi
- Tnh nng thit k theo Real-time v markup views
Smith Nguyen Studio.
https:/ / www.facebook.com/ SmithNguyenStudio
Infoway
Solutions
CHNG III: S DNG SILVERLIGHT TRN EXPRESSION BLEND V VISUAL
STUDIO 2008


2
- Artwork import capabilities from Expression Design 2
- Kh nng nhp Artwork t Expression Design 2
- Site import capabilities from Expression Encoder 2
- Kh nng nhp site t Expression Encoder 2
- Tng tc vi Visual Studio 2008 gip nh thit k v lp trnh vin lm vic cht
ch v hiu qu vi nhau
2 Bt u nhanh vi Silverlight 2 trn Expression Blend 2
2.1 To mt Project cho ng dng Silverlight 2
Bn c th to mt Project Silverlight 2 trong Microsoft Expression Blend 2 sau khi ci t
Service Pack1 . vi Expression Blend, mt Project Silverlight s xy dng mt ng dng
Silverlight 2 vi s h tr cc file bao gm mt trang HTML kim tra c tn l Default.html
n s ti ng dng ca bn vo trnh duyt ca window.
Cc bc to project cho silverlight 2 nh sau
1. Trn thanh menu chn File v chn NewProject( CTRL+SHIFT+N)

2. Trong hp hi thoi New Project , ph di chn project type l Silverlight 2 Application

3. t tn cho project ca bn, ci ny s tr thnh tn th mc v tn namespace ca
ng dng.
Smith Nguyen Studio.
https:/ / www.facebook.com/ SmithNguyenStudio
Infoway
Solutions
CHNG III: S DNG SILVERLIGHT TRN EXPRESSION BLEND V VISUAL
STUDIO 2008


3
4. Tip theo l chn v tr lu tr project trn cng ca bn bng cch tm trong nt
Browse.
5. Trong mc Language, chn ngn ng l Visual C#, s l ngn ng bn vit
trong file code-behind.
6. Chn OK.
Khi mt project mi c to ra bn c th bt u ngay vi cc thao tc v cc khun
hnh v control trong trang chnh(Page.xaml)
Di y l danh sch cc file v cc tham chiu dll m Expression Blend 2 t to ra
cho project mi ca bn

2.2. V khun hnh (Shape) trn ng dng Silverlight
1. Trong hp toolbox chn mt trong cc cng c shape sau: Hnh ch nht hoc
hnh Ellipse .

2. Trong khun vng thit k, bn c th ko chiu rng hoc chiu di hnh ch nht
ny theo hng di chut.
Smith Nguyen Studio.
https:/ / www.facebook.com/ SmithNguyenStudio
Infoway
Solutions
CHNG III: S DNG SILVERLIGHT TRN EXPRESSION BLEND V VISUAL
STUDIO 2008


4


Mo:
Nu bn gi SHIFT khi ko s gi c chiu rng v chiu cao cng kch thc. lm
nh vy s to ra mt hnh vung i vi hnh ch nht, v hnh trn i vi hnh ellipse


Mo:
Nu bn gi ALT khi bn v mi mt hnh ch nht hoc hnh ellipse th cng c v ny
s t ng chn im nhp chut ban u lm tm v.
3. Lu cc thay i (CTRL+S)
2.3. Thit k Control trn ng dng Silverlight
Cc bc thit k control
1. Trong hpk Toolbox, chn control l Textbox.

2. Trong khun vng thit k, v TextBox ny bng cch ko th chut. i tng tr v
s l mt TextBox m bn c th sa ni dung ch hin th trn TextBox ngay.
Smith Nguyen Studio.
https:/ / www.facebook.com/ SmithNguyenStudio
Infoway
Solutions
CHNG III: S DNG SILVERLIGHT TRN EXPRESSION BLEND V VISUAL
STUDIO 2008


5


Bn c th phng to, thu nh, xoay, di chuyn v thc thi cc s kin.

3. Lu cc thay i (CTRL+S).
3 Xy dng chng trnh Silverlight 2 vi Expression Blend v Visual Studio
2008

Trong mc ny chng ta s xy dng mt ng dng Silverlight 2 dng d bo thi tit ti
cac vng trn ton th gii. Chng trnh ng dng ny c s dng kt hp visual studio
2008 v Expression Blend
Chng ta s xy dng chng trnh vi kt qu l giao din m t di y

Trc tin hy xem qua cu trc ng dng trong Visual Studio 2008 sau khi to mi mt
Project Silverlight.
Smith Nguyen Studio.
https:/ / www.facebook.com/ SmithNguyenStudio
Infoway
Solutions
CHNG III: S DNG SILVERLIGHT TRN EXPRESSION BLEND V VISUAL
STUDIO 2008


6

Trong project WeatherWidget chng ta c mt tham chiu ti mt Web service triu gi d
liu d bo thi tit vi lin kt http://a4472706772.api.wxbug.net/weatherservice.asmx.
kt ni ti mt web service chng ta c th xem thm lin kt sau y
http://msdn.microsoft.com/en-us/library/d9w023sx.aspx
By gi chng ta s s dng Expression Blend thit k giao din ngi dng bng cch
chut phi vo file Page.xaml chn Open in Expression Blend

Sau khi Expression Blend khi ng xong, cc cu trc file v th mc trn vn c sp
xp v gi nguyn ging nh trong Visual Studio.
Smith Nguyen Studio.
https:/ / www.facebook.com/ SmithNguyenStudio
Infoway
Solutions
CHNG III: S DNG SILVERLIGHT TRN EXPRESSION BLEND V VISUAL
STUDIO 2008


7

By gi chng ta ln lt to cc Layout cho ng dng trn Expression Blend.
thit k mt lp hnh nn cho ng dng. Trn Toolbox, chut phi chn Canvas. Sau
t tn cho Canvas ny l LayoutRoot





Vi LayoutRoot ta chn hnh nn trong Resource c nh ngha sn, chng ta s c
theo hnh nh di y

Smith Nguyen Studio.
https:/ / www.facebook.com/ SmithNguyenStudio
Infoway
Solutions
CHNG III: S DNG SILVERLIGHT TRN EXPRESSION BLEND V VISUAL
STUDIO 2008


8

Tip theo chng ta ln lt to thm cc Layout l cc Canvas v StackPanel tng t nh
vi LayoutRoot c c cc hnh nh giao din di y


Di y l cc on m Xaml t sinh trong qu trnh thit k vi Expression Blend
<Canvas x:Name="LayoutRoot" Width="264" Height="194" Background="{StaticResource blueBase}">
<Canvas Canvas.Top="13" Canvas.Left="13" Width="230" Height="160">
<StackPanel x:Name="ConditionsScreen" >
<Canvas Height="90">
<Image x:Name="ConditionsOverlay" Margin="-13,-13,0,0"
Source="{StaticResource SunBig}"/>
<StackPanel>
<TextBlock Width="225" Height="37" TextAlignment="Right"
FontSize="34" x:Name="TodayTemp" />
<TextBlock Width="225" Height="14" TextAlignment="Right"
x:Name="TodayDescription" />
<TextBlock Width="225" Height="14" TextAlignment="Right"
x:Name="TodayRange" />
<TextBlock Width="225" Height="14" TextAlignment="Right"
x:Name="City" Text="ang ly d liu..." />
</StackPanel>
</Canvas>
<StackPanel Orientation="Horizontal" Height="53">
<Canvas Width="71" Background="{StaticResource dividerVertical}"
Margin="5, 0, 0, 0">
<TextBlock FontSize="11" x:Name="TomorrowName" Foreground="White"
Opacity="0.5" />
<Image x:Name="TomorrowImage" Canvas.Top="17" Canvas.Left="23" />
Smith Nguyen Studio.
Infoway
Solutions
CHNG III: S DNG SILVERLIGHT TRN EXPRESSION BLEND V VISUAL
STUDIO 2008


9
<TextBlock Canvas.Top="20" x:Name="TomorrowHi" Foreground="White" />
<TextBlock Canvas.Top="35" x:Name="TomorrowLo" Foreground="White"
Opacity="0.5" />
</Canvas>
<Canvas Width="71" Background="{StaticResource dividerVertical}"
Margin="5, 0, 0, 0">
<TextBlock FontSize="11" x:Name="DayAfterName" Foreground="White"
Opacity="0.5" />
<Image x:Name="DayAfterImage" Canvas.Top="17" Canvas.Left="23" />
<TextBlock Canvas.Top="20" x:Name="DayAfterHi" Foreground="White" />
<TextBlock Canvas.Top="35" x:Name="DayAfterLo" Foreground="White"
Opacity="0.5" />
</Canvas>
<Canvas Width="71" Margin="5, 0, 0, 0">
<TextBlock FontSize="11" x:Name="TwoDaysAwayName" Foreground="White"
Opacity="0.5" />
<Image x:Name="TwoDaysAwayImage" Canvas.Top="17" Canvas.Left="23" />
<TextBlock Canvas.Top="20" x:Name="TwoDaysAwayHi" Foreground="White"
/>
<TextBlock Canvas.Top="35" x:Name="TwoDaysAwayLo" Foreground="White"
Opacity="0.5" />
</Canvas>
</StackPanel>
<StackPanel Height="17" Background="{StaticResource dividerHorizontal}"
Orientation="Horizontal" >
<TextBlock Text="Lm ti" Margin="5, 0, 5, 0" Width="105"
Foreground="White" Opacity="0.5" MouseLeftButtonUp="TextBlock_MouseLeftButtonUp_Refresh" />
<TextBlock Text="Change ZIP" Margin="5, 0, 5, 0" Width="105" TextAlignment="Right"
Foreground="White" Opacity="0.5" MouseLeftButtonUp="TextBlock_MouseLeftButtonUp_Zip" />
</StackPanel>
</StackPanel>
<Image IsHitTestVisible="False" Source="{StaticResource blackHighlight}" />
</Canvas>
</Canvas>
to s kin cho mt Textblock trn Expression Blend. Sau khi chn ng i tng
Texblock trn Objects and Timeline, nhp p chut vo v tr tn s kin nh hnh v di
y. Ngay lp tc Visual Studio s m ra cho chng ta vit code behind.



private void TextBlock_MouseLeftButtonUp_Zip(object sender, MouseButtonEventArgs e)
{
ZipCode.Text = "";
ZipCode.Foreground = new SolidColorBrush(Colors.Black);

ConditionsScreen.Visibility = Visibility.Collapsed;
ZipCodeScreen.Visibility = Visibility.Visible;
}

Bng vic s dng kt hp gia Visual studio v Expression Blend, cc s cp nht v m
lnh cng nh cc file trong ng dng lun c thng bo 2 chng trnh cng c c
cp nht mi nht.
Sau khi thit k y cc layout trn Expression Blend, vic cn li ch yu l dnh cho
ngi lp trnh m lnh trn Visual Studio. Visual studio s ng gi ng dng ny thnh file
.xap ( y l WeatherWidget.xap). file ny s c trin khai bt k mt trang html hay
aspx vi dng lnh di y.
Smith Nguyen Studio.
https:/ / www.facebook.com/ SmithNguyenStudio
Infoway
Solutions
CHNG III: S DNG SILVERLIGHT TRN EXPRESSION BLEND V VISUAL
STUDIO 2008


10

Trn trang HTML :
<object data="data:application/x-silverlight-2," type="application/x-
silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/WeatherWidget.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="2.0.30923.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=124807"
style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get
Microsoft Silverlight" style="border-style: none"/>
</a>
</object>
Trn trang ASPX :
<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/ WeatherWidget.xap"
MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />
Trn Visual studio bm F5 chy ng dng ta s c kt qu di y :

Smith Nguyen Studio.
https:/ / www.facebook.com/ SmithNguyenStudio

Vous aimerez peut-être aussi