Silverlight-Step by Step

Silverlight - Step by Step
I. CHNG 1
Cho mng bn n vi SilverLight, mt cng ngh a nn tng, cho php xy dng cc ng dng tng tc trn Web khng ph thuc trnh duyt v tng tc vi server. Dng SilverLight, bn c th xy dng cc loi ng dng sau: - Cc ng dng nng cho php xem phim, nghe nhc trn Internet - Cc ng dng nh, kiu nh game hoc cc thnh phn tng tc khc - Cc thnh phn trc quan trn Web, hin th d liu ... C th coi SilverLight nh mt i th nng k ca Adobe Flash, ra i sau, tha hng tnh u vit ca cc cng ngh hin c, nh gn, (s) a nn tng, b cng c pht trin mnh m v hon chnh, v hn ht l c pht trin bi Microsoft - ng trm s mt trong th gii phn mm. 1. To d n SilverLight Lm th no a SilverLight vo trang Web ca bn ? Mt d n SilverLight tiu biu thng c 4 file: 1 file HTML cha Silverlight plug-in, 1 file silverlight.js, 1 file XAML v mt file Javascript cha cc hm h tr cho file HTML. Ti liu ny m t cch to ra mt d n Silverlight c bn v a thm ni dung vo file HTML trong vng 3 bc Trc khi bt u Trc khi bt u, bn cn chun b mt s th sau: - Silverlight plug-in: nu cha c, xin mi nhn vo y ci t Silverlight. Silverlight plug-in l phn mm chy trn trnh duyt x l ni dung Silverlight, n cng tng t nh Flash Player - Mt file HTML: bn s cn file ny hin th ni dung Silverlight, bn c th t to mt file ca ring bn hoc copy t y - mt trnh son tho vn bn: bn s cn n chnh sa file HTML, bn c th dng Notepad, UltraEdit hoc EditPlus 2. Thm cc tham chiu cn thit vo file HTML Trong bc ny, bn s thm cc tham chiu n cc file Silverlight.js v createSilverlight.js vo trong trang HTML, ng thi to mt element cha plug-in Silverlight. File Silverlight.js l mt file h tr vit bng Javascript, n cho php ni dung Silverlight c th hin th c trn nhiu nn tng khc nhau. Bn cng s to file createSilverlight.js trong bc 2. a. Ly file Silverlight.js Bn c th ly file ny t th mc Tools trong b Silverlight 1.0 SDK. b. M file HTML v thm on m sau vo phn <head>. Nu bn cha c sn mt file HTML dng, nhn nt phi chut ln trn lin kt SampleHTMLPage.html v chn "Save Target As..." lu file SampleHTMLPage.html vo cng th mc vi file Silverlight.js.
<script type="text/javascript" src="Silverlight.js"></script>
c. To mt file trng v t tn l createSilverlight.js, bn s dng file ny trong bc 3. d. Trong trang HTML(SampleHTMLPage.html), thm mt tham chiu n script khc trong phn <head>, t thuc tnh src ca tham chiu l createSilverlight.js.
<script type="text/javascript" src="createSilverlight.js"></script>
Trang HTML ca bn gi c nhng thnh phn c bn sau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>A Sample HTML page</title> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript" src="createSilverlight.js"></script> </head> <body> </body> </html>
2. To thnh phn cha Silverlight v khi to trn trang HTML a. Thm ba dng sau vo gia cp th <body>, ni bn mun Silverlight hin th:
 <div id="mySilverlightPluginHost"> </div>
Bn c th thay i gi tr ca ID trong th
nu mun. Nu bn ang to nhiu plug-in Silverlight trn cng mt trang web, lm li bc ny cho mt ci v phi m bo gi tr ca ID l duy nht. b. To khi lnh khi to: ngay sau on HTML bn va thm vo bc trc, hy thm on HTML v script sau:
<script type="text/javascript"> // Retrieve the div element you created in the previous step. var parentElement = document.getElementById("mySilverlightPluginHost"); // This function creates the Silverlight plug-in. createMySilverlightPlugin(); </script>
Nu ang to nhiu plug-in Silverlight trn cng trang, hy lp li bc ny cho mi ci, bo m mi tn hm l duy nht, hoc bn c th dng mt hm nhn tham s ID m bn t gi tr duy nht. Cng phi m bo mt iu l mi an script phi nm ngay sau th DIV tng ng m bn to bc trn. Bn hon thnh bc 2. File HTML ca bn gi c ni dung nh sau:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>A Sample HTML page</title> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript" src="createSilverlight.js"></script> </head> <body>  <div id="mySilverlightPluginHost"> </div> <script type="text/javascript">
// Retrieve the div element you created in the previous step. var parentElement = document.getElementById("mySilverlightPluginHost"); // This function creates the Silverlight plug-in. createMySilverlightPlugin(); </script> </body> </html>
3. nh ngha hm khi to i tng Silverlight plug-in M file createSilverlight.js file bn to bc 1 v thm vo hm javascript sau:
function createMySilverlightPlugin() { Silverlight.createObject( "myxaml.xaml", parentElement, "mySilverlightPlugin", { width:'300',
// Source property value. // DOM reference to hosting DIV tag. // Unique plug-in ID value. // Per-instance properties. // Width of rectangular region of // plug-in area in pixels. height:'300', // Height of rectangular region of // plug-in area in pixels. inplaceInstallPrompt:false, // Determines whether to display // in-place install prompt if // invalid version detected. background:'#D6D6D6', // Background color of plug-in. isWindowless:'false', // Determines whether to display plug-in // in Windowless mode. framerate:'24', // MaxFrameRate property value. version:'1.0' // Silverlight version to use.
},
{ onError:null, onLoad:null }, null); } // // // // OnError property value -event handler function name. OnLoad property value -event handler function name.
// Context value -- event handler function name.
on script trn cha mt s tham s m bn c th s mun ty bin, kiu nh chiu cao v chiu rng ca plug-in (c th t kch thc theo phn trm %), tn ca file XAML cha ni dung Silverlight ca bn, v mt gi tr ch ra plug-in ca bn s hot ng ch ca s hay tan mn hnh. Nu ang thm nhiu plug-in vo cng mt trang, hy to mt hm mi cho mi ci, hoc dng hm to s dng tham s (xem li 2b). Vi cch no bn cng u phi m bo rng li gi khi to ch n ID ca mi plug-in khc nhau ("mySilverlightPlugin" trong v d trn). 4. To file cha ni dung Silverlight Bn tm hon thnh file HTML, gi hy to ra ni dung cho i tng Silverlight. To mt file trng c tn "myxaml.xaml" trong cng th mc vi file HTML. Nu bn i tham s tn file trong bc trc, hy t li tn file ca bn cho ng vi gi tr mi ca bn. Bc ny l ty chn: nu mun d n Silverlight ca bn c kh nng x l cc s kin, to m ng, hoc nhng g khc cho php tng tc vi ngi dng, bn s cn thm mt file script na. To file mt file Javascript v thm tham chiu n n trong file HTML, bn c th lm ging v d sau, trong v d ny tn file c t l "my-script.js".
<script type="text/javascript" src="my-script.js"></script>
File HTML ca bn gi s cha cc thnh phn sau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>A Sample HTML page</title> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript" src="createSilverlight.js"></script> <script type="text/javascript" src="my-script.js"></script> </head> <body>  <div id="mySilverlightPluginHost"> </div> <script type="text/javascript">
// Retrieve the div element you created in the previous step. var parentElement = document.getElementById("mySilverlightPluginHost"); createMySilverlightPlugin(); </script> </body> </html>
To nhiu i tng Silverlight Nu mun to nhiu i tng Silverlight trn trang ca bn, hy lp li cc bc 2,3, v 4 cho mi i tng. Mi th DIV (to trong bc 2a) phi c mt gi tr ID duy nht. Mi on lnh khi to (trong bc 2b) phi nm ngay sau th DIV tng ng c to bc trc (2a). Mi tham s ID ca i tng cng l duy nht.
Ghi ch: trong phn trn, cc cm t "Silverlight plug-in", "i tng Silverlight" c dch t cm t "Silverlight plug-in instance"
II. Chng 2
Trong bi trc, to mt d n Silverlight, bn thm mt i tng Silverlight vo mt trang HTML v to mt file XAML trng. Bi ny s hng dn bn cch to ni dung Silverlight bn trong file XAML. Bc 1: to mt i tng Canvas v khai bo namespace
M file myxaml.xaml m bn to trong bi trc, to mt Canvas v khai bo namespace cho Silverlight v XAML bng cch copy on m sau vo file XAML ca bn:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> </Canvas>
Mi file XAML Silverlight bt u vi mt th <Canvas>, trong c mt thuc tnh xmlns dng khai bo namespace ca Silverlight, v mt thuc tnh khc l xmlns:x dng khai bo namespace cho XAML. Bc 2: V ln trn i tng Silverlight Ct v dn don m lnh sau vo trong file XAML ca bn, gia cp th <Canvas> ri lu li.
<Ellipse Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
Bc 3: Xem ni dung XAML ca bn xem ni dung hin th bi XAML, nhy p vo file HTML. Bn s nhn thy mt hnh trn mu tm vi vin en m.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="SlateBlue" /> </Canvas>
Nu my ca bn c ci t WPF thi khi nhy p ln file XAML s lm cho WPF chy ch khng phi l Silverlight. Nhng cng ng lo lng v iu ny, v file XAML c t cng ch vi file HTML trn Web server nn ngi dng khng th nhy p vo c. Xin chc mng! Bn to ra c ng dng Silverlight u tin !!!
III. Chng 3
Mt Canvas l mt i tng c to ra cha cc i tng iu khin (control) v cc i tng hnh v (shape). Tt c cc file XAML phi cha t nht mt Canvas v n s c coi l i tng gc. Bi ny gii thiu v i tng Canvas v cch thm, xc nh v tr v kch thc ca cc i tng con. Thm mt i tng vo Canvas Mt Canvas cha v t v tr cho cc i tng khc. thm mt i tng vo Canvas, bn hy chn n vo gia cp th <Canvas>. V d sau s thm mt hnh ellipse v trong mt Canvas. V Canvas l i tng gc nn tt hn ht l bn nn khai bo cc thuc tnh v namespace (xmlns) cn thit cho n.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="SlateBlue" /> </Canvas>
Mt Canvas c th cha mt s bt k cc i tng khc, thm ch c cc Canvas khc. t v tr cho mt i tng t v tr cho mt i tng trong Canvas, bn t cc thuc tnh Canvas.Left v Canvas.Top trn i tng . Thuc tnh Canvas.Left ch ra khong cch t i tng cnh bn tri ca Canvas cha n, v Canvas.Top ch ra khong cch n cnh trn ca Canvas. V d sau cng vn dng i tng ellipse trong cng v d trc nh t li v tr ca n l 30 pixel (im trn mn hnh) tnh t bn tri v 30 pixel tnh t pha trn ca Canvas. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Canvas.Left="30" Canvas.Top="30" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="SlateBlue" /> </Canvas> Hnh minh ha sau s gip bn hiu hn v h ta c dng trong Canvas v v tr ca hnh ellipse trong v d trc.
z-order
Thut ng z-order c dng ch su (chiu th 3 trn h ta xyz), hay ni cch khc l nu c nhiu i tng nm chng ln nhau th z-order s xc nh i tng no nm trn, i tng no nm di
Mc nhin, z-order ca cc i tng trong mt Canvas s c xc nh bi th t chng c khai bo. i tng no c khai bo sau s nm ln trn i tng c khai bo trc. V d sau s to ra 3 ellipse, bn s thy i tng c khai bo sau cng (mu xanh l cy) s nm ln trn cc i tng khc.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Canvas.Left="5" Canvas.Top="5" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Silver" /> <Ellipse Canvas.Left="50" Canvas.Top="50" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" /> <Ellipse Canvas.Left="95" Canvas.Top="95" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Lime" /> </Canvas>
Bn c th thay i iu ny bng cch t li thuc tnh Canvas.ZIndex ca i tng bn trong Canvas, gi tr cng cao th s nm cng gn v pha trc, v cng thp th cng nm ra sau. V d sau cng s tng t nh ci trc, ch c mt thay i l cc gi tr ca z-order c t ngc li, bn s thy trong trng hp ny, hnh ellipse mu bc s nm ln trn cng.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Canvas.ZIndex="3" Canvas.Left="5" Canvas.Top="5" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Silver" /> <Ellipse Canvas.ZIndex="2" Canvas.Left="50" Canvas.Top="50" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" /> <Ellipse Canvas.ZIndex="1" Canvas.Left="95" Canvas.Top="95" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Lime" /> </Canvas>
Chiu rng v chiu cao Canvas, hnh ha v nhiu thnh phn khc u c thuc thuc tnh Width v Height cho php ch ra kch thc ca n. V d sau s to mt hnh ellipse cao 200 pixel v rng 200 pixel, nh l khng c dng gi tr theo kiu phn trm %.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Canvas.Left="30" Canvas.Top="30" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="SlateBlue" /> </Canvas>
V d tip theo t Width v Height ca i tng Canvas cha thnh 200 v t mu nn cho n l Lime.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="200" Height="200" Background="LimeGreen"> <Ellipse Canvas.Left="30" Canvas.Top="30" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="SlateBlue" /> </Canvas>
Khi chy v d ny, hnh ch nht mu xanh l cy chnh l Canvas, phn mu trng l phn cn li ca Silverlight plug-in khng b che ph bi Canvas. Bn s thy rng phn nm ngoi Canvas ca hnh ellipse s khng b xn mt. Nu khng t th gi tr mc nhin ca Width v Height s l 0. Cc Canvas lng nhau Mt Canvas c th cha nhng Canvas khc. trong v d sau bn s thy mt Canvas li cha 2 Canvas khc bn trong.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Canvas Height="50" Width="50" Canvas.Left="30" Canvas.Top="30" Background="blue"/> <Canvas Height="50" Width="50" Canvas.Left="130" Canvas.Top="30" Background="red"/> </Canvas>
IV.
Chng 4
Silverlight h tr ha c bn cho php bn c th v c hnh ellipse, ch nht, ng thng, a gic v cc ng cong... Cc thnh phn ny c gi chung l cc hnh ha (shape). Cc hnh ha c bn
Silverlight cung cp ba thnh phn hnh ha c bn: hnh ellipse, ch nht v ng thng. i tng ellipse m t mt hnh ellipse hay hnh trn. Bn c th kim sot chiu rng v chiu cao bng cch t thuc tnh Width v Height. i tng Rectangle m t mt hnh vung hoc mt hnh ch nht, c th bo trn gc. Bn kim sot chiu rng v chiu cao bng cch t gi tr cc thuc tnh Width hoc Height. Bn cng c th dng thuc tnh RadiusX v RadiusY xc nh cong ca gc. Thay v dng cc thuc tnh Width v Height, bn kim sot kch thc v v tr ca mt ng thng bng cch t gi tr cho cc thuc tnh X1, Y1, X2, Y2 ca n. V d sau v mt Ellipse, mt Rectangle, v mt Line trong mt Canvas.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30" Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/> <Rectangle Height="100" Width="100" Canvas.Left="5" Canvas.Top="5" Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/> <Line X1="280" Y1="10" X2="10" Y2="280" Stroke="black" StrokeThickness="5"/> </Canvas>
Cc i tng hnh ha khc Ngoi cc i tng Ellipse, Line, v Rectangle, Silverlght cn cung cp 3 i tng hnh ha khc: Polygon, Polyline, v Path. Mt Polygon (a gic) l mt hnh ng vi mt s cnh, trong khi mt PolyLine l mt chui cc on thng ni vi nhau, cc on thng ny c th to thnh mt hnh ng (a gic) hoc khng. V d sau s to nn mt Polygon v mt PolyLine:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Polyline Points="150, 150 150, 250 250, 250 250, 150" Stroke="Black" StrokeThickness="10"/> <Polygon Points="10,10 10,110 110,110 110,10" Stroke="Black" StrokeThickness="10" Fill="LightBlue"/> </Canvas>
i tng Path c th c dng biu din mt hnh dng phc tp bao gm c cung v ng cong. dng Path, bn phi dng mt kiu c php c bit t thuc tnh Data ca n. V d sau s to nn ba i tng Path.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Path Data="M0,0 L11.5,0 11.5,30 5.75,40 0,30z" Stroke="Black" Fill="SlateBlue" Canvas.Left="10" Canvas.Top="10" /> <Path Data="M 10,100 C 10,300 300,-200 250,100z" Stroke="Red" Fill="Orange" Canvas.Left="10" Canvas.Top="10" /> <Path Data="M 0,200 L100,200 50,50z" Stroke="Black" Fill="Gray" Canvas.Left="150" Canvas.Top="70" /> </Canvas>
c thm thng tin v c php ca Path, hy xem phn Path Markup Syntax trong b Silverlight SDK. V hnh bng cch s dng bt v Hu ht cc hnh ha u bao gm hai phn, ng vin v nn bn trong c kim sot bi cc thuc tnh Stroke v Fill. Hnh minh ha sau cho bn thy phn ng vin v nn ca hnh ch nht v d u tin.
Khng phi mi hnh u c y nn v vin: mt Line (on thng) ch c ng vin. t gi tr thuc tnh Fill ca mt Line s khng c tc dng. Bn t gi tr cho Stroke v Fill bng cch s dng Brush (bt v). C 5 kiu i tng bt v m bn c th dng: - SolidColorBrush - nearGradientBrush - RadialGradientBrush - ImageBrush - VideoBrush (m t trong phn media) V dng mt mu vi SolidColorBrush v mt vng vi mt mu no , bn dng SolidColorBrush. XAML cung cp mt s cch to SolidColorBrush. Bn c th dng mt s c php ch tn ca mt mu, kiu nh Black hay Gray. Bn cng c th dng c php thp lc phn m t cc thnh phn , xanh l cy v xanh nc bin, cng mt thnh phn ty chn ch ra trong sut. C th dng nhng cch sau: - K php 6-s: Dng l #rrggbb, trong rr l hai ch s thp lc phn m t thnh phn mu , gg m t mu xanh l cy va bb m t mu xanh nc bin. V d nh: #0033FF. - K php 8-s: nh dng tng t k php 6-s, ngoi tr c thm 2 k t m rng m t gi tr alpha, ch ra trong sut: #aarrggbb. V d: #990033FF. Ngoi ra cn c k php 3 hoc 4 s cho cc mu 8-bit, nhng t c s dng. Thay v dng cc thuc tnh nh Stroke v Fill t gi tr cho bt v, bn cng c th to mt i tng SolidColorBrush ring v t thuc tnh Color cho n, dng mt trong nhng nh dng mu ni trn. V d sau y cho thy mt s cch v mt i tng bng mu en.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="10" Fill="black"/>  <Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="10" Fill="#000000"/>  <Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="110" Fill="#ff000000"/>  <Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="110"> <Ellipse.Fill>  <SolidColorBrush Color="Black"/> </Ellipse.Fill> </Ellipse> </Canvas>
V hnh vi gradient dng LinearGradientBrush v RadialGradientBrush Silverlight h tr c linear v radial gradiant. Gradient c mt hoc nhiu gradient stop m t s chuyn i v v tr ca cc mu sc khc nhau trong gradient. Hu ht cc gradient ch cn hai gradient stop, nhng bn c th to nhiu hn nu mun. - LinearGradientBrush v mt gradient theo mt ng thng. ng thng ny mc nhin s nm theo ng cho t gc trn tri xung gc di phi. Bn c th t li gi tr cho thuc tnh StartPoint v EndPoint thay i v tr ca on thng ny. - RadialGradientBrush v mt gradient dc theo mt ng trn, mc nhin tm hnh trn ny s nm gia vng c v. Bn c th thay i hnh thc ca gradient bng cch t li gi tr cc thuc tnh GradientOrigin, Center, RadiusX, and RadiusY. thm gradient stop vo bt v, bn hy to cc i tng GradientStop. t li thuc tnh Offset ca mt GradientStop thnh mt gi tr t 0 n 1 t li v tr tng i ca n trong gradient. t thuc tnh Color ca GradientStop thnh mt gi tr mu, c th dng tn hoc dng c php thp lc phn. V d sau dng cc i tng LinearGradientBrush v RadialGradientBrush v 4 i tng Rectangle.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  <Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="10"> <Rectangle.Fill> <LinearGradientBrush> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="10"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>  <Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="110"> <Rectangle.Fill> <RadialGradientBrush> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="110"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="1,0"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> </Canvas>
Bn cng c th dng gradient v vin ca mt hnh ha. Hnh minh ha sau cho thy cc gradient stop ca LinearGradientBrush u tin trong v d trc.
V nh dng ImageBrush Mt kiu bt v khc l ImageBrush. Mc nhin, hnh nh s c p li sao cho va vi ton b hnh, bn cng c th dng thuc tnh Stretch kim sot cch bt v p hnh nh. V d sau dng hai i tng ImageBrush vi cc gi tr Stretch khc nhau v hai i tng Rectangle.
<Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="White"> <Rectangle Height="180" Width="90" Canvas.Left="10" Canvas.Top="10" Stroke="Black" StrokeThickness="1"> <Rectangle.Fill> <ImageBrush ImageSource="star.png"/> </Rectangle.Fill> </Rectangle>
<Rectangle Height="180" Width="90" Canvas.Left="110" Canvas.Top="10" Stroke="Black" StrokeThickness="1"> <Rectangle.Fill> <ImageBrush ImageSource="star.png" Stretch="Uniform"/> </Rectangle.Fill> </Rectangle> </Canvas>
V. Chng 5
Cc thuc tnh ha chung C mt s thuc tnh c p dng chung cho tt c cc i tng Silverlight (UIElement): Canvas, cc hnh ha, MediaElement v TextBlock. Thuc tnh Opacity Thuc tnh Opacity cho php bn kim sot trong sut ca mt i tng UIElement. Bn c th t gi tr cho thuc tnh Opacity t 0 n 1. i tng cng trong sut nu gi tr cng gn v 0, nu t l 0 th i tng s hon ton trong sut, gi tr mc nhin ca thuc tnh ny l 1.0. V d sau y s to 2 hnh ha vi cc thuc tnh Opacity khc nhau:
<Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Rectangle Opacity="1.0" Height="100" Width="100" Canvas.Left="30" Canvas.Top="30" Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/> <Rectangle Opacity="0.6" Height="100" Width="100" Canvas.Left="70" Canvas.Top="70" Stroke="Black" StrokeThickness="10" Fill="SlateBlue" /> </Canvas>
Thuc tnh OpacityMask Thuc tnh OpacityMask cho php bn kim sot trong sut trong cc phn khc nhau ca mt i tng UIElement.
Ly v d, bn c th dng OpacityMask lm i tng m dn t phi sang tri. Thuc tnh OpacityMask nhn vo mt i tng Brush. Bt v c p dng vo i tng v knh alpha (knh xc nh trong sut) s c dng xc nh trong sut ca pixel tng ng. Nu mt phn no ca bt v l trong sut th n cng s lm cho thnh phn tng ng trong sut. Bn c th dng bt k kiu bt v no dng OpacityMask, tuy nhin LinearGradientBrush, RadialGradientBrush, v ImageBrush l nhng kiu thng dng nht. V d sau s p dng mt LinearGradientBrush bn trong sut vo mt i tng Rectangle.
<Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Rectangle Height="100" Width="100" Canvas.Left="30" Canvas.Top="30" Stroke="Black" StrokeThickness="10" Fill="SlateBlue"> <Rectangle.OpacityMask> <LinearGradientBrush> <GradientStop Offset="0.25" Color="#00000000"/> <GradientStop Offset="1" Color="#FF000000"/> </LinearGradientBrush> </Rectangle.OpacityMask> </Rectangle> </Canvas>
Thuc tnh Clip Thuc tnh Clip cho php bn v cc phn ca mt i tng mt cch chn lc. dng thuc tnh Clip, bn phi cung cp mt i tng Geometry (i tng hnh hc) m t phn bn mun v. Tt c nhng phn nm bn ngoi hnh ny u s b n i, hay c gi l b xn. V d sau y dng mt RectangleGeometry m t vng xn cho mt i tng Ellipse. Kt qu l, ch c phn no bn trong vng c nh ngha bi RectangleGeometry c hin th, nhng phn cn li s b xn.
<Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30" Stroke="Black" StrokeThickness="10" Fill="SlateBlue"> <Ellipse.Clip> <RectangleGeometry Rect="0, 0, 100, 100"/> </Ellipse.Clip> </Ellipse> </Canvas>
Thuc tnh RenderTransform Thuc tnh RenderTransform cho php bn dng i tng Transform quay (rotate), lm xin (skew), i t l (scale)
hoc dch chuyn (translate) mt i tng. Danh sch sau s m t cc i tng Transform khc nhau m bn c th dng vi thuc tnh RenderTransform. - RotateTransform: Quay mt i tng theo mt gc no . - SkewTransform: Lm xin i tng bi mt khong theo chiu X hoc chiu Y. - ScaleTransform: Phng to hoc thu nh mt i tng theo chiu cao hoc chiu rng bi mt khong cho trc. - TranslateTransform: Dch chuyn i tng theo chiu dc hoc chiu ngang bi mt khong cho trc. Ngoi ra cn c mt kiu bin hnh c bit, TransformGroup, bn c th dng p dng nhiu php bin hnh ln mt i tng no . Chng hn bn c th quay ri sau lm xin mt i tng. V d sau y biu din cc i tng Transform khc nhau bng cch p dng chng ln cc i tng Rectangle khc nhau.
<Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Rectangle Height="100" Width="100" Canvas.Left="70" Canvas.Top="10" Fill="Black"> <Rectangle.RenderTransform> <RotateTransform Angle="45"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle Height="100" Width="100" Canvas.Left="130" Canvas.Top="10" Fill="red"> <Rectangle.RenderTransform> <SkewTransform AngleX="30"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle Height="100" Width="100" Canvas.Left="10" Canvas.Top="190" Fill="blue"> <Rectangle.RenderTransform> <ScaleTransform ScaleX="1.3" ScaleY=".5"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle Height="100" Width="100" Canvas.Left="160" Canvas.Top="130" Fill="Green"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="45"/> <ScaleTransform ScaleX=".5" ScaleY="1.2"/> <SkewTransform AngleX="30"/> </TransformGroup> </Rectangle.RenderTransform> </Rectangle> </Canvas>
VI.
Chng 6
i tng Image cho php bn hin th hnh nh bitmap trong Silverlight. i tng Image i tng Image cho php bn hin th cc hnh nh JPG hoc PNG mt cch d dng trong Silverlight. hin th mt hnh nh, t thuc tnh Source ca i tng hnh nh ch ng dn n file hnh nh. V d sau y dng i tng Image hin th mt nh 141x131. V gi tr ca thuc tnh Width v Height khng c ch nh nn n s c hin th vi gi tr gc ca n.
<Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Image Source="star.png" /> </Canvas>
Thuc tnh Stretch Khi kch thc ca hnh nh v kch thc ch nh cho i tng Image khc nhau, thuc tnh Stretch s xc nh cch hnh nh thay i kch thc khp vi i tng Element. Thuc tnh Stretch nhn mt trong cc gi tr sau: None, Fill, Uniform, UniformToFill. V d sau s biu din cc gi tr None, Uniform, and Fill.
<Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="White"> <Image Source="star.png" Stretch="None" Height="100" Width="200" Canvas.Left="100" /> <Image Source="star.png" Stretch="Fill" Height="100" Width="200" Canvas.Top="100" Canvas.Left="100" /> <Image Source="star.png" Stretch="Uniform" Height="100" Width="200" Canvas.Top="200" Canvas.Left="100" /> <TextBlock Canvas.Left="5" Canvas.Top="0">None</TextBlock> <TextBlock Canvas.Left="5" Canvas.Top="100">Fill</TextBlock> <TextBlock Canvas.Left="5" Canvas.Top="200">Uniform</TextBlock> </Canvas>
c thng tin v nh hng ca cc gi tr khc nhau ca thuc tnh Stretch, xem thm trong Silverlight SDK. Cch khc hin th hnh nh bitmap dng mt bitmap nh hnh nn ca mt i tng, dng ImageBrush. Xem thm trong phn 4.
VII. Chng 7
Thnh phn TextBlock cho php bn thm vn bn vo Silverlight. thm vn bn vo Silverlight, bn to mt thnh phn TextBlock v thm ni dung vo gia cp th <TextBlock>. V d sau s dng TextBlock hin th mt s vn bn.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <TextBlock>hello world!</TextBlock> </Canvas>
Cc thuc tnh thng dng ca TextBlock Ngoi cc thuc tnh chung tha hng t UIElement, nh l Clip v Opacity (xem li phn 5), TextBlock cn cung cp thm mt s thuc tnh khc: - FontSize: t kch thc Font, tnh theo pixel. - FontStyle: Kiu ch, c th t l Normal hoc Italic. - FontStretch: Kiu gin font. Nhn cc gi tr UltraCondensed, ExtraCondensed, Condensed, SemiCondensed, Normal, Medium, SemiExpanded, Expanded, ExtraExpanded, hoc UltraExpanded. - FontWeight: m ca ch. Nhn cc gi tr Thin, ExtraLight, Light, Normal, Medium, SemiBold, Bold, ExtraBold, Black, ExtraBlack. - FontFamily: H ca font ch. - Foreground: Bt v c dng v vn bn. Bn c th dng mu c, gradient, hnh nh v thm ch l video. Xem li phn 4 c thm thng tin. V d sau s m t cc thuc tnh trn:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <TextBlock FontSize="40" FontFamily="Georgia" FontStyle="Italic" FontWeight="Bold" FontStretch="Expanded" Canvas.Top="20" Canvas.Left="20"> Hello world! <TextBlock.Foreground> <LinearGradientBrush> <GradientStop Color="SlateBlue" Offset="0.0" /> <GradientStop Color="Black" Offset="1.0" /> </LinearGradientBrush> </TextBlock.Foreground> </TextBlock> </Canvas>
Thnh phn Run Bn c th dng nhiu kiu Font khc nhau trong cng mt TextBlock bng cch dng thnh phn Run. Run c cng cc thuc tnh nh TextBlock, mc d n khng th c xc nh v tr bng Canvas.Left v Canvas.Top. V d sau s dng Run thay i kch thc ca mt phn vn bn trong TextBlock.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <TextBlock> Hello <Run FontSize="30">world</Run> </TextBlock> </Canvas>
Dng nhiu loi font Khng chc l tt c cc Font u c sn trn my tnh ca ngi dng. Thuc tnh FontFamily cho php bn lit k mt danh sch font (font fallback), cc font sau s c c dng nu font trc khng c sn. Mt font t bit c gi l "Portable User Interface" s lun tn ti trn tt c cc my, nh l mt phn ca Silverlight. V d sau y biu din cc ci t khc nhau ca FontFamily.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <TextBlock FontFamily="Arial, Times New Roman" Text="Hello World" FontSize="20"/> <TextBlock FontFamily="Times New Roman, Arial" Canvas.Top="40" Text="Hello World" FontSize="20"/> <TextBlock FontFamily="Portable User Interface" Canvas.Top="80" Text="Hello World" FontSize="20"/> </Canvas>
VIII. Chng 8
Silverlight cung cp mt i tng MediaObject cho php bn c th chi li cc file WMV v WMA, cng nh mt vi loi file MP3 khc. Thm kh nng a phng tin vo trang Web thm kh nng a phng tin, bn c th dng MediaElement v t thuc tnh Source ca n ch n file media ca bn thng qua mt URI. Bn c th xem v d sau:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <MediaElement Source="thebutterflyandthebear.wmv" Width="300" Height="300" /> </Canvas>
Like other UIElement objects, you can put drawings on top of MediaElement objects. The following example adds an Ellipse in front of the MediaElement from the previous example. Cng ging nh cc i tng UIElement khac, bn c th t cc hnh v ln trn i tng MediaElement. V d sau s thm mt hnh ellipse ln trn thnh phn MediaElement ly t v d trc:
<Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <MediaElement Source="thebutterflyandthebear.wmv" Width="300" Height="300" /> <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30" Stroke="Black" StrokeThickness="10" Fill="SlateBlue" Opacity="0.6" /> </Canvas>
Mt s thuc tnh ca MediaElement Ngoi cc thuc tnh tha hng t MediaElement, nh Opacity hay Clip, MediaElement cung cp mt s thuc tnh
chuyn cho a phng tin(media) nh sau: - Stretch: Ch ra cch m on video c p cho va vi i tng MediaElement. Thuc tnh ny nhn cc gi tr None, Uniform, UniformToFill, v Fill. Gi tr mc nhin l Fill. c thm thng tin, hy xem trong b Silverlight SDK. * IsMuted: Nu t l true th MediaElement s khng pht m thanh, ngc li l c. * Volume: t gi tr cho volumn, bn c th t cc gi tr t 0.0 cho n 1.0, vi 1.0 th m thanh s pht ra ln nht, gi tr mc nhin l 0.5. Hy xem thm Silverlight SDK c thm thng tin v cc thuc tnh ca MediaElement. Kim sot vic chi cc ti liu media Bn c th kim sot vic chi cc file media bng cch s dng cc phng thc Play, Pause, v Stop. V d sau s dng Play, Pause, v Stop cho php ngi dng iu khin vic chi li:
<Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <MediaElement x:Name="media" Source="thebutterflyandthebear.wmv" Width="300" Height="300" />  <Canvas MouseLeftButtonDown="media_stop" Canvas.Left="10" Canvas.Top="265"> <Rectangle Stroke="Black" Height="30" Width="55" RadiusX="5" RadiusY="5"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="Orange" Offset="0.0" /> <GradientStop Color="Red" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock> </Canvas>  <Canvas MouseLeftButtonDown="media_pause" Canvas.Left="70" Canvas.Top="265"> <Rectangle Stroke="Black" Height="30" Width="55" RadiusX="5" RadiusY="5"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Orange" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock> </Canvas>  <Canvas MouseLeftButtonDown="media_begin" Canvas.Left="130" Canvas.Top="265"> <Rectangle Stroke="Black" RadiusX="5" RadiusY="5" Height="30" Width="55"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="LimeGreen" Offset="0.0" /> <GradientStop Color="Green" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock> </Canvas>
</Canvas>
function media_stop(sender, args) { sender.findName("media").stop(); } function media_pause(sender, args) { sender.findName("media").pause(); } function media_begin(sender, args) { sender.findName("media").play(); }
Dng ch full-screen chi ch full-screen, t thuc tnh FullScreen ca i tng Silverlight plug-in l true v iu chnh kch thc ca MediaElement thnh ActualWidth v ActualHeight m bn ly t Silverlight. V d sau s cho php xem video ch full-screen.
<Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="canvas_loaded"> <MediaElement x:Name="media" Source="thebutterflyandthebear.wmv" Width="300" Height="300" /> <Canvas x:Name="buttonPanel">  <Canvas MouseLeftButtonDown="media_stop" Canvas.Left="10" Canvas.Top="265"> <Rectangle Stroke="Black" Height="30" Width="55" RadiusX="5" RadiusY="5"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="Orange" Offset="0.0" /> <GradientStop Color="Red" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock> </Canvas>  <Canvas MouseLeftButtonDown="media_pause" Canvas.Left="70" Canvas.Top="265"> <Rectangle Stroke="Black" Height="30" Width="55" RadiusX="5" RadiusY="5"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Orange" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock> </Canvas>  <Canvas MouseLeftButtonDown="media_begin" Canvas.Left="130" Canvas.Top="265"> <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
Height="30" Width="55"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="LimeGreen" Offset="0.0" /> <GradientStop Color="Green" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock> </Canvas>  <Canvas MouseLeftButtonDown="toggle_fullScreen" Canvas.Left="190" Canvas.Top="265"> <Rectangle Stroke="Black" RadiusX="5" RadiusY="5" Height="30" Width="85"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="Gray" Offset="0.0" /> <GradientStop Color="Black" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5" Foreground="White" >full screen</TextBlock> </Canvas> </Canvas> </Canvas>
function media_stop(sender, args) { sender.findName("media").stop(); } function media_pause(sender, args) { sender.findName("media").pause(); } function media_begin(sender, args) { sender.findName("media").play(); }
function canvas_loaded(sender, args) { var plugin = sender.getHost(); plugin.content.onfullScreenChange = onFullScreenChanged;
} function toggle_fullScreen(sender, args) { var silverlightPlugin = sender.getHost(); silverlightPlugin.content.fullScreen = !silverlightPlugin.content.fullScreen; } function onFullScreenChanged(sender, args) {
var silverlightPlugin = sender.getHost(); var buttonPanel = sender.findName("buttonPanel");
if (silverlightPlugin.content.fullScreen == true) { buttonPanel.opacity = 0; } else { buttonPanel.opacity = 1; } var mediaPlayer = sender.findName("media"); mediaPlayer.width = silverlightPlugin.content.actualWidth; mediaPlayer.height = silverlightPlugin.content.actualHeight;
Dng bt v VideoBrush Bn c th dng VideoBrush v cc hnh ha v vn bn bng Video. dung VideoBrush, hy theo cc bc sau: 1. To mt i tng VideoBrush. 2. To mt MediaElement v t tn cho n (t gi tr cho thuc tnh Name). i tng MediaElement c dng x l d liu video cho VideoBrush. Tr khi bn mun nhn thy 2 bn video cng lc, khng th phi t thuc tnh Opacity ca i tng MediaElement l 0.0. Nu khng mun on video pht ra ting th bn t gi tr cho thuc tnh IsMuted ca MediaElement l true. 3. t thuc tnh SourceName ca VideoBrush l tn ca MediaElement m bn to. V d sau s dng VideoBrush v nn cho mt TextBlock.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <MediaElement x:Name="myMediaElement" Source="thebutterflyandthebear.wmv" Width="300" Height="300" Opacity="0" IsMuted="True" /> <TextBlock Canvas.Left="10" Canvas.Top="10" FontFamily="Verdana" FontSize="80" FontWeight="Bold">Watch<LineBreak/>This <TextBlock.Foreground> <VideoBrush SourceName="myMediaElement" /> </TextBlock.Foreground> </TextBlock> </Canvas>
Vic ngng, tm dng hoc chi MediaElement cng nh hng n i tng VideoBrush dng n, nhng thay i kch thc hoc trong sut th khng. Mt i tng MediaElement cng c th c dng nh ngun ca nhiu i tng VideoBrush khc nhau.
IX.
Chng 9
To hot hnh vi cc th Silverlight Cc bc c bn lm mt hot hnh Bc 1: Chn mt i tng lm hot hnh Bc u tin l bn phi chn mt i tng no lm hot hnh, v d bn c th chn mt hnh ellipse. V d sau s to mt hnh ellipse vi nn en.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse x:Name="ellipse" Height="20" Width="20" Canvas.Left="30" Canvas.Top="30" Fill="black" /> </Canvas>
Nh l hnh ellipse c t tn l ellipse: x:Name="ellipse" Hnh ellipse ny cn phi c t tn, (chi tit hn, bn cn t tn cho n sau ny c th tham chiu li trong mt hot cnh c nh ngha ni khc trong file XAML). Gi bn c mt i tng to hot hnh, bc tip theo l to mt EventTrigger chy hot hnh ny. Bc 2: to mt EventTrigger Mt EventTrigger cho php thc hin mt thao tc khi c mt s kin no xy ra. S kin ny c ch ra bi thuc tnh RoutedEvent, v v bn mun EventTrigger bt u mt hot hnh nn hnh ng m n s lm s l mt BeginStoryboard. Bn cng cn quyt nh s kin no s kch hot hot cnh (animation) ca bn. Trong Silverlight 1.0, vic chn la tng i n gin, v cc i tng EventTrigger ch h tr mt s kin duy nht l Loaded. t gi tr cho thuc tnh RoutedEvent thnh Canvas.Loaded s lm hot hnh chay khi Canvas chnh c np. Bn c th xem v d sau:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <EventTrigger.Actions> <BeginStoryboard>  </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Canvas.Triggers> <Ellipse x:Name="ellipse" Height="20" Width="20" Canvas.Left="30" Canvas.Top="30" Fill="black"/> </Canvas>
Gi bn sn sng to mt StoryBoard v mt hot hnh. Bc 3: To StoryBoard v hot hnh Mt StoryBoard c th c dng m t v iu khin mt hoc nhiu hot hnh. Trong v d ny, chng ta s dng mt hot hnh n. Trong Silverlight, bn c th xy dng hot hnh bng vic s dng cc thuc tnh ca mt i tng. Dng DoubleAnimation thay i thuc tnh Canvas.Left ca i tng Ellipse. Bn dng DoubleAnimation bi v Canvas.Left c kiu Double. mt hot cnh hot ng, bn cn ch ra tn ca i tng trong thuc tnh TargetName
(Storyboard.TargetName="ellipse"), tn thuc tnh s c thay i trong TargetProperty (Storyboard.TargetProperty="(Canvas.Left)"), mt gi tr cp nht (To="300"), v khong thi gian m vic thay i din ra (Duration="0:0:1"). Thuc tnh Duration ch ra khong thi gian m hot cnh din ra t lc u cho n lc kt thc. Gi tr 0:0:1 c ngha l 0 gi, 0 pht v 1 giy.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Canvas.Left)" To="300" Duration="0:0:1" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Canvas.Triggers> <Ellipse x:Name="ellipse" Height="20" Width="20" Canvas.Left="30" Canvas.Top="30" Fill="black"/> </Canvas>
Bn dng DoubleAnimation l v thuc tnh m chng ta ang dng to hot hnh (Canvas.Left) c kiu Double. Vy l bn to ra hot hnh Silverlight u tin, gi y chc hn bn thy Silverlight th v hn rt nhiu Cc kiu hot hnh khc Silverlight cng h tr to hot hnh bng vic chuyn i (animating) mu sc (ColorAnimation) v im (PointAnimation).
Su tm v tng hp: V Ngc Tun

Silverlight-Step by Step

Uploaded by

Document Information

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

Uploaded by

Copyright:

Available Formats

Silverlight - Step by Step

Trang HTML ca bn gi c nhng thnh phn c bn sau:

// Context value -- event handler function name.

File HTML ca bn gi s cha cc thnh phn sau:

function canvas_loaded(sender, args) { var plugin = sender.getHost(); plugin.content.onfullScreenChange = onFullScreenChanged;

var silverlightPlugin = sender.getHost(); var buttonPanel = sender.findName("buttonPanel");

Su tm v tng hp: V Ngc Tun

You might also like