Xem mẫu
- Silverlight - Step by Step
I. CHƯƠNG 1
Chào m ng b n n v i SilverLight, m t công ngh a n n t ng, cho phép xây d ng các ng d ng tương tác trên Web
không ph thu c trình duy t và tương tác v i server. Dùng SilverLight, b n có th xây d ng các lo i ng d ng sau:
- Các ng d ng n ng cho phép xem phim, nghe nh c trên Internet
- Các ng d ng nh , ki u như game ho c các thành ph n tương tác khác
- Các thành ph n tr c quan trên Web, hi n th d li u
...
Có th coi SilverLight như m t i th n ng ký c a Adobe Flash, ra i sau, th a hư ng tính ưu vi t c a các công ngh
hi n có, nh g n, (s ) a n n t ng, b công c phát tri n m nh m và hoàn ch nh, và hơn h t là ư c phát tri n b i
Microsoft - ông trùm s m t trong th gi i ph n m m.
1. T o d án SilverLight Làm th nào ưa SilverLight vào trang Web c a b n ? M t d án SilverLight tiêu bi u
thư ng có 4 file: 1 file HTML ch a Silverlight plug-in, 1 file silverlight.js, 1 file XAML và m t file Javascript ch a
các hàm h tr cho file HTML. Tài li u này mô t cách t o ra m t d án Silverlight cơ b n và ưa thêm n i dung vào file
HTML trong vòng 3 bư c Trư c khi b t u Trư c khi b t u, b n c n chu n b m t s th sau: - Silverlight plug-in:
n u chưa có, xin m i nh n vào ây cài t Silverlight. Silverlight plug-in là ph n m m ch y trên trình duy t x lý
n i dung Silverlight, nó cũng tương t như Flash Player - M t file HTML: b n s c n file này hi n th n i dung
Silverlight, b n có th t t o m t file c a riêng b n ho c copy t ây - m t trình so n th o văn b n: b n s c n nó ch nh
s a file HTML, b n có th dùng Notepad, UltraEdit ho c EditPlus 2. Thêm các tham chi u c n thi t vào file HTML
Trong bư c này, b n s thêm các tham chi u n các file Silverlight.js và createSilverlight.js vào trong trang HTML, ng
th i t o m t element ch a plug-in Silverlight. File Silverlight.js là m t file h tr vi t b ng Javascript, nó cho phép n i
dung Silverlight có th hi n th ư c trên nhi u n n t ng khác nhau. B n cũng s t o file createSilverlight.js trong bư c 2.
a. L y file Silverlight.js B n có th l y file này t thư m c Tools trong b Silverlight 1.0 SDK. b. M file HTML và thêm
o n mã sau vào ph n . N u b n chưa có s n m t file HTML dùng, nh n nút ph i chu t lên trên liên k t
SampleHTMLPage.html và ch n "Save Target As..." lưu file SampleHTMLPage.html vào cùng thư m c v i file
Silverlight.js.
c. T o m t file tr ng và t tên là createSilverlight.js, b n s dùng file này trong bư c 3. d. Trong trang
HTML(SampleHTMLPage.html), thêm m t tham chi u n script khác trong ph n , t thu c tính src c a tham
chi u là createSilverlight.js.
ã có nh ng thành ph n cơ b n sau:
Trang HTML c a b n gi
A Sample HTML page
2. T o thành ph n ch a Silverlight và kh i t o trên trang HTML a. Thêm ba dòng sau vào gi a c p th , nơi
b n mu n Silverlight hi n th :
B n có th thay i giá tr c a ID trong th
- n u mu n. N u b n ang t o nhi u plug-in Silverlight trên cùng m t trang web, làm l i bư c này cho m t cái và ph i m
b o giá tr c a ID là duy nh t. b. T o kh i l nh kh i t o: ngay sau o n HTML b n v a thêm vào bư c trư c, hãy thêm
o n HTML và script sau:
// Retrieve the div element you created in the previous step.
var parentElement =
document.getElementById("mySilverlightPluginHost");
// This function creates the Silverlight plug-in.
createMySilverlightPlugin();
N u ang t o nhi u plug-in Silverlight trên cùng trang, hãy l p l i bư c này cho m i cái, b o m m i tên hàm là duy
nh t, ho c b n có th dùng m t hàm nh n tham s ID mà b n ã t giá tr duy nh t. Cũng ph i m b o m t i u là m i
an script ph i n m ngay sau th DIV tương ng mà b n ã t o bư c trên. B n ã hoàn thành bư c 2. File HTML c a
b n gi có n i dung như sau:
A Sample HTML page
// Retrieve the div element you created in the previous step.
var parentElement =
document.getElementById("mySilverlightPluginHost");
// This function creates the Silverlight plug-in.
createMySilverlightPlugin();
3. nh nghĩa hàm kh i t o i tư ng Silverlight plug-in M file createSilverlight.js file b n ã t o bư c 1 và thêm
vào hàm javascript sau:
function createMySilverlightPlugin()
{
Silverlight.createObject(
"myxaml.xaml", // Source property value.
parentElement, // DOM reference to hosting DIV tag.
"mySilverlightPlugin", // Unique plug-in ID value.
{ // Per-instance properties.
width:'300', // 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, // OnError property value --
// event handler function name.
onLoad:null // OnLoad property value --
// event handler function name.
},
null); // Context value -- event handler function name.
}
o n script trên ch a m t s tham s mà b n có th s mu n tùy bi n, ki u như chi u cao và chi u r ng c a plug-in (có
t kích thư c theo ph n trăm %), tên c a file XAML ch a n i dung Silverlight c a b n, và m t giá tr ch ra plug-in
th
c a b n s ho t ng ch c a s hay tòan màn hình. N u ang thêm nhi u plug-in vào cùng m t trang, hãy t o m t
hàm m i cho m i cái, ho c dùng hàm t o s d ng tham s (xem l i 2b). V i cách nào b n cũng u ph i m b o r ng l i
g i kh i t o ch n ID c a m i plug-in khác nhau ("mySilverlightPlugin" trong ví d trên). 4. T o file ch a n i dung
Silverlight B n ã t m hoàn thành file HTML, gi hãy t o ra n i dung cho i tư ng Silverlight. T o m t file tr ng có
tên "myxaml.xaml" trong cùng thư m c v i file HTML. N u b n ã i tham s tên file trong bư c trư c, hãy t l i tên
file c a b n cho úng v i giá tr m i c a b n. Bư c này là tùy ch n: n u mu n d án Silverlight c a b n có kh năng x
lý các s ki n, t o mã ng, ho c nh ng gì khác cho phép tương tác v i ngư i dùng, b n s c n thêm m t file script n a.
T o file m t file Javascript và thêm tham chi u n nó trong file HTML, b n có th làm gi ng ví d sau, trong ví d này
tên file ư c t là "my-script.js".
File HTML c a b n gi s ch a các thành ph n sau:
A Sample HTML page
// Retrieve the div element you created in the previous step.
var parentElement = document.getElementById("mySilverlightPluginHost");
createMySilverlightPlugin();
T o nhi u i tư ng Silverlight N u mu n t o nhi u i tư ng Silverlight trên trang c a b n, hãy l p l i các bư c 2,3,
và 4 cho m i i tư ng. M i th DIV (t o trong bư c 2a) ph i có m t giá tr ID duy nh t. M i o n l nh kh i t o (trong
bư c 2b) ph i n m ngay sau th DIV tương ng ư c t o bư c trư c (2a). M i tham s ID c a i tư ng cũng là duy
nh t.
i tư ng Silverlight" ư c d ch t c m t "Silverlight plug-in instance"
Ghi chú: trong ph n trên, các c m t "Silverlight plug-in", "
II. Chương 2
Trong bài trư c, t o m t d án Silverlight, b n ã thêm m t i tư ng Silverlight vào m t trang HTML và t o m t file
XAML tr ng. Bài này s hư ng d n b n cách t o n i dung Silverlight bên trong file XAML.
Bư c 1: t o m t i tư ng Canvas và khai báo namespace
- M file myxaml.xaml mà b n ã t o trong bài trư c, t o m t Canvas và khai báo namespace cho Silverlight và XAML
b ng cách copy o n mã sau vào file XAML c a b n:
M i file XAML Silverlight b t u v i m t th , trong ó có m t thu c tính xmlns dùng khai báo namespace
c a Silverlight, và m t thu c tính khác là xmlns:x dùng khai báo namespace cho XAML.
Bư c 2: V lên trên i tư ng Silverlight
C t và dán do n mã l nh sau vào trong file XAML c a b n, gi a c p th r i lưu l i.
Bư c 3: Xem n i dung XAML c a b n
xem n i dung hi n th b i XAML, nháy úp vào file HTML. B n s nhìn th y m t hình tròn màu tím v i vi n en
m.
N u máy c a b n có cài t WPF thi khi nháy úp lên file XAML s làm cho WPF ch y ch không ph i là Silverlight.
Nhưng cũng ng lo l ng v i u này, vì file XAML ư c t cùng ch v i file HTML trên Web server nên ngư i dùng
không th nháy úp vào ư c.
Xin chúc m ng! B n ã t o ra ư c ng d ng Silverlight u tiên !!!
- III. Chương 3
M t Canvas là m t i tư ng ư c t o ra ch a các i tư ng i u khi n (control) và các i tư ng hình v (shape). T t
c các file XAML ph i ch a ít nh t m t Canvas và nó s ư c coi là i tư ng g c. Bài này gi i thi u v i tư ng
Canvas và cách thêm, xác nh v trí và kích thư c c a các i tư ng con.
Thêm m t i tư ng vào Canvas
M t Canvas ch a và t v trí cho các i tư ng khác. thêm m t i tư ng vào Canvas, b n hãy chèn nó vào gi a c p
th . Ví d sau s thêm m t hình ellipse và trong m t Canvas. Vì Canvas là i tư ng g c nên t t hơn h t là b n
nên khai báo các thu c tính v namespace (xmlns) c n thi t cho nó.
M t Canvas có th ch a m t s b t kỳ các i tư ng khác, th m chí c các Canvas khác.
t v trí cho m t i tư ng
t v trí cho m t i tư ng trong Canvas, b n t các thu c tính Canvas.Left và Canvas.Top trên i tư ng ó. Thu c
i tư ng c nh bên trái c a Canvas ch a nó, và Canvas.Top ch ra kho ng cách
tính Canvas.Left ch ra kho ng cách t
n c nh trên c a Canvas. Ví d sau cũng v n dùng i tư ng ellipse trong cùng ví d trư c như t l i ví trí c a nó là 30
pixel ( i m trên màn hình) tính t bên trái và 30 pixel tính t phía trên c a Canvas.
Hình minh h a sau s giúp b n hi u hơn v h t a ư c dùng trong Canvas và v trí c a hình ellipse trong ví d trư c.
- z-order
Thu t ng z-order ư c dùng ch i tư ng n m ch ng
sâu (chi u th 3 trên h t a xyz), hay nói cách khác là n u có nhi u
lên nhau thì z-order s xác nh i tư ng nào n m trên, i tư ng nào n m dư i
M c nhiên, z-order c a các i tư ng trong m t Canvas s ư c xác nh b i th t chúng ư c khai báo. i tư ng nào
ư c khai báo sau s n m lên trên i tư ng ư c khai báo trư c. Ví d sau s t o ra 3 ellipse, b n s th y i tư ng ư c
khai báo sau cùng (màu xanh lá cây) s n m lên trên các i tư ng khác.
- B n có th thay i i u này b ng cách t l i thu c tính Canvas.ZIndex c a i tư ng bên trong Canvas, giá tr càng cao
thì s n m càng g n v phía trư c, và càng th p thì càng n m ra sau. Ví d sau cũng s tương t như cái trư c, ch có m t
thay i là các giá tr c a z-order ã ư c t ngư c l i, b n s th y trong trư ng h p này, hình ellipse màu b c s n m
lên trên cùng.
- Chi u r ng và chi u cao
Canvas, hình h a và nhi u thành ph n khác u có thu c thu c tính Width và Height cho phép ch ra kích thư c c a nó.
Ví d sau s t o m t hình ellipse cao 200 pixel và r ng 200 pixel, nh là không ư c dùng giá tr theo ki u ph n trăm %.
i tư ng Canvas cha thành 200 và
Ví d ti p theo t Width và Height c a t màu n n cho nó là Lime.
- Khi ch y ví d này, hình ch nh t màu xanh lá cây chính là Canvas, ph n màu tr ng là ph n còn l i c a Silverlight plug-in
không b che ph b i Canvas. B n s th y r ng ph n n m ngoài Canvas c a hình ellipse s không b xén m t.
N u không t thì giá tr m c nhiên c a Width và Height s là 0.
Các Canvas l ng nhau
M t Canvas có th ch a nh ng Canvas khác. trong ví d sau b n s th y m t Canvas l i ch a 2 Canvas khác bên trong.
Chương 4
IV.
h a cơ b n cho phép b n có th v ư c hình ellipse, ch nh t, ư ng th ng, a giác và các ư ng
Silverlight h tr
cong... Các thành ph n này ư c g i chung là các hình h a (shape).
Các hình h a cơ b n
- Silverlight cung c p ba thành ph n hình h a cơ b n: hình ellipse, ch nh t và ư ng th ng.
i tư ng ellipse mô t m t hình ellipse hay hình tròn. B n có th ki m soát chi u r ng và chi u cao b ng cách t thu c
tính Width và Height.
i tư ng Rectangle mô t m t hình vuông ho c m t hình ch nh t, có th bo tròn góc. B n ki m soát chi u r ng và
chi u cao b ng cách t giá tr các thu c tính Width ho c Height. B n cũng có th dùng thu c tính RadiusX và RadiusY
xác nh cong c a góc.
Thay vì dùng các thu c tính Width và Height, b n ki m soát kích thư c và v trí c a m t ư ng th ng b ng cách t giá
tr cho các thu c tính X1, Y1, X2, Y2 c a nó.
Ví d sau v m t Ellipse, m t Rectangle, và m t Line trong m t Canvas.
i tư ng hình h a khác
Các
Ngoài các i tư ng Ellipse, Line, và Rectangle, Silverlght còn cung c p 3 i tư ng hình h a khác: Polygon, Polyline, và
Path. M t Polygon ( a giác) là m t hình óng v i m t s c nh, trong khi m t PolyLine là m t chu i các o n th ng n i
v i nhau, các o n th ng này có th t o thành m t hình óng ( a giác) ho c không. Ví d sau s t o nên m t Polygon và
m t PolyLine:
- i tư ng Path có th ư c dùng bi u di n m t hình d ng ph c t p bao g m c cung và ư ng cong. dùng Path,
t thu c tính Data c a nó. Ví d sau s t o nên ba i tư ng Path.
b n ph i dùng m t ki u cú pháp c bi t
có thêm thông tin v cú pháp c a Path, hãy xem ph n Path Markup Syntax trong b Silverlight SDK.
V hình b ng cách s d ng bút v
H u h t các hình h a u bao g m hai ph n, ư ng vi n và n n bên trong ư c ki m soát b i các thu c tính Stroke và
Fill. Hình minh h a sau cho b n th y ph n ư ng vi n và n n c a hình ch nh t ví d u tiên.
- Không ph i m i hình u có y n n và vi n: m t Line ( o n th ng) ch có ư ng vi n. t giá trí thu c tính Fill c a
m t Line s không có tác d ng.
B n t giá tr cho Stroke và Fill b ng cách s d ng Brush (bút v ). Có 5 ki u i tư ng bút v mà b n có th dùng:
- SolidColorBrush
- nearGradientBrush
- RadialGradientBrush
- ImageBrush
- VideoBrush (mô t trong ph n media)
V dùng m t màu v i SolidColorBrush
v m t vùng v i m t màu nào ó, b n dùng SolidColorBrush. XAML cung c p m t s cách t o SolidColorBrush.
B n có th dùng m t s cú pháp ch tên c a m t màu, ki u như “Black” hay “Gray”.
B n cũng có th dùng cú pháp th p l c phân mô t các thành ph n , xanh lá cây và xanh nư c bi n, cùng m t thành
ph n tùy ch n ch ra trong su t. Có th dùng nh ng cách sau:
- Ký pháp 6-s : D ng là #rrggbb, trong ó rr là hai ch s th p l c phân mô t thành ph n màu , gg mô t màu xanh lá
cây va bb mô t màu xanh nư c bi n. Ví d như: #0033FF.
- Ký pháp 8-s : nh d ng tương t ký pháp 6-s , ngo i tr có thêm 2 ký t m r ng mô t giá tr alpha, ch ra trong
su t: #aarrggbb. Ví d : #990033FF.
Ngoài ra còn có ký pháp 3 ho c 4 s cho các màu 8-bit, nhưng ít ư c s d ng.
Thay vì dùng các thu c tính như Stroke và Fill t giá tr cho bút v , b n cũng có th t o m t i tư ng
SolidColorBrush riêng và t thu c tính Color cho nó, dùng m t trong nh ng nh d ng màu ã nói trên.
i tư ng b ng màu en.
Ví d sau ây cho th y m t s cách v mt
- V hình v i gradient dùng LinearGradientBrush và RadialGradientBrush
Silverlight h tr c linear và radial gradiant. Gradient có m t ho c nhi u gradient stop mô t s chuy n i và v trí c a
các màu s c khác nhau trong gradient.
H u h t các gradient ch c n hai gradient stop, nhưng b n có th t o nhi u hơn n u mu n.
- LinearGradientBrush v m t gradient theo m t ư ng th ng. ư ng th ng này m c nhiên s n m theo ư ng chéo t
góc trên trái xu ng góc dư i ph i. B n có th t l i giá tr cho thu c tính StartPoint và EndPoint thay i v trí c a
o n th ng này.
- RadialGradientBrush v m t gradient d c theo m t ư ng tròn, m c nhiên tâm hình tròn này s n m gi a vùng ư c
v . B n có th thay i hình th c c a gradient b ng cách t l i giá tr các thu c tính GradientOrigin, Center, RadiusX,
and RadiusY.
thêm gradient stop vào bút v , b n hãy t o các i tư ng GradientStop. t l i thu c tính Offset c a m t GradientStop
t l i v trí tương i c a nó trong gradient. t thu c tính Color c a GradientStop thành
thành m t giá tr t 0 n 1
m t giá tr màu, có th dùng tên ho c dùng cú pháp th p l c phân.
i tư ng LinearGradientBrush và RadialGradientBrush i tư ng Rectangle.
Ví d sau dùng các v4
-
B n cũng có th dùng gradient v vi n c a m t hình h a.
u tiên trong ví d trư c.
Hình minh h a sau cho th y các gradient stop c a LinearGradientBrush
V nh dùng ImageBrush
M t ki u bút v khác là ImageBrush. M c nhiên, hình nh s ư c ép l i sao cho v a v i toàn b hình, b n cũng có th
dùng thu c tính Stretch ki m soát cách bút v ép hình nh. Ví d sau dùng hai i tư ng ImageBrush v i các giá tr
Stretch khác nhau v hai i tư ng Rectangle.
-
V. Chương 5
Các thu c tính h a chung
Có m t s thu c tính ư c áp d ng chung cho t t c các i tư ng Silverlight (UIElement): Canvas, các hình h a,
MediaElement và TextBlock.
Thu c tính Opacity
Thu c tính Opacity cho phép b n ki m soát trong su t c a m t i tư ng UIElement. B n có th t giá tr cho thu c
tính Opacity t 0 n 1. i tư ng càng trong su t n u giá tr càng g n v 0, n u t là 0 thì i tư ng s hoàn toàn trong
su t, giá tr m c nhiên c a thu c tính này là 1.0.
Ví d sau ây s t o 2 hình h a v i các thu c tính Opacity khác nhau:
Thu c tính OpacityMask
i tư ng UIElement.
Thu c tính OpacityMask cho phép b n ki m soát trong su t trong các ph n khác nhau c a m t
- L y ví d , b n có th dùng OpacityMask làm i tư ng m d n t ph i sang trái. Thu c tính OpacityMask nh n vào
m t i tư ng Brush. Bút v ư c áp d ng vào i tư ng và kênh alpha (kênh xác nh trong su t) s ư c dùng
xác nh trong su t c a pixel tương ng. N u m t ph n nào ó c a bút v là trong su t thì nó cũng s làm cho thành
ph n tương ng trong su t.
B n có th dùng b t kỳ ki u bút v nào dùng OpacityMask, tuy nhiên LinearGradientBrush, RadialGradientBrush, và
ImageBrush là nh ng ki u thư ng dùng nh t.
Ví d sau s áp d ng m t LinearGradientBrush b n trong su t vào m t i tư ng Rectangle.
Thu c tính Clip
Thu c tính Clip cho phép b n v các ph n c a m t i tư ng m t cách ch n l c. dùng thu c tính Clip, b n ph i cung
c p m t i tư ng Geometry ( i tư ng hình h c) mô t ph n b n mu n v . T t c nh ng ph n n m bên ngoài hình này
u s b n i, hay ư c g i là “b xén”.
Ví d sau ây dùng m t RectangleGeometry mô t vùng xén cho m t i tư ng Ellipse. K t qu là, ch có ph n nào
bên trong vùng ư c nh nghĩa b i RectangleGeometry ư c hi n th , nh ng ph n còn l i s b xén.
Thu c tính RenderTransform
i tư ng Transform
Thu c tính RenderTransform cho phép b n dùng quay (rotate), làm xiên (skew), i t l (scale)
- ho c d ch chuy n (translate) m t i tư ng. Danh sách sau s mô t các i tư ng Transform khác nhau mà b n có th
dùng v i thu c tính RenderTransform.
- RotateTransform: Quay m t i tư ng theo m t góc nào ó.
- SkewTransform: Làm xiên i tư ng b i m t kho ng theo chi u X ho c chi u Y.
- ScaleTransform: Phóng to ho c thu nh m t i tư ng theo chi u cao ho c chi u r ng b i m t kho ng cho trư c.
- TranslateTransform: D ch chuy n i tư ng theo chi u d c ho c chi u ngang b i m t kho ng cho trư c.
Ngoài ra còn có m t ki u bi n hình c bi t, TransformGroup, b n có th dùng áp d ng nhi u phép bi n hình lên m t
i tư ng nào ó. Ch ng h n b n có th quay r i sau ó làm xiên m t i tư ng.
Ví d sau ây bi u di n các i tư ng Transform khác nhau b ng cách áp d ng chúng lên các i tư ng Rectangle khác
nhau.
- Chương 6
VI.
i tư ng Image cho phép b n hi n th hình nh bitmap trong Silverlight.
i tư ng Image
i tư ng Image cho phép b n hi n th các hình nh JPG ho c PNG m t cách d dàng trong Silverlight. hi n th m t
hình nh, t thu c tính Source c a i tư ng hình nh ch ư ng d n n file hình nh. Ví d sau ây dùng i tư ng
Image hi n th m t nh 141x131. Vì giá tr c a thu c tính Width và Height không ư c ch nh nên nó s ư c hi n
th v i giá tr g c c a nó.
Thu c tính Stretch
Khi kích thư c c a hình nh và kích thư c ch nh cho i tư ng Image khác nhau, thu c tính Stretch s xác nh cách
hình nh thay i kích thư c kh p v i i tư ng Element. Thu c tính Stretch nh n m t trong các giá tr sau: None,
Fill, Uniform, UniformToFill. Ví d sau s bi u di n các giá tr None, Uniform, and Fill.
None
Fill
Uniform
nh hư ng c a các giá tr khác nhau c a thu c tính Stretch, xem thêm trong Silverlight SDK.
có thông tin v
Cách khác hi n th hình nh bitmap
dùng m t bitmap như hình n n c a m t i tư ng, dùng ImageBrush. Xem thêm trong ph n 4.
VII. Chương 7
Thành ph n TextBlock cho phép b n thêm văn b n vào Silverlight.
thêm văn b n vào Silverlight, b n t o m t thành ph n TextBlock và thêm n i dung vào gi a c p th . Ví
d sau s dùng TextBlock hi n th m t s văn b n.
hello world!
- Các thu c tính thư ng dùng c a TextBlock
Ngoài các thu c tính chung th a hư ng t UIElement, như là Clip và Opacity (xem l i ph n 5), TextBlock còn cung c p
thêm m t s thu c tính khác:
- FontSize: t kích thư c Font, tính theo pixel.
- FontStyle: Ki u ch , có th t là Normal ho c Italic.
- FontStretch: Ki u giãn font. Nh n các giá tr UltraCondensed, ExtraCondensed, Condensed, SemiCondensed, Normal,
Medium, SemiExpanded, Expanded, ExtraExpanded, ho c UltraExpanded.
- FontWeight: m c a ch . Nh n các giá tr Thin, ExtraLight, Light, Normal, Medium, SemiBold, Bold, ExtraBold,
Black, ExtraBlack.
- FontFamily: H c a font ch .
- Foreground: Bút v ư c dùng v văn b n. B n có th dùng màu c, gradient, hình nh và th m chí là video. Xem
l i ph n 4 có thêm thông tin.
Ví d sau s mô t các thu c tính trên:
Hello world!
Thành ph n Run
B n có th dùng nhi u ki u Font khác nhau trong cùng m t TextBlock b ng cách dùng thành ph n Run. Run có cùng các
thu c tính như TextBlock, m c dù nó không th ư c xác nh v trí b ng Canvas.Left và Canvas.Top. Ví d sau s dùng
Run thay i kích thư c c a m t ph n văn b n trong TextBlock.
Hello world
- Dùng nhi u lo i font
Không ch c là t t c các Font u có s n trên máy tính c a ngư i dùng. Thu c tính FontFamily cho phép b n li t kê m t
danh sách font (font fallback), các font sau s ư c ư c dùng n u font trư c không có s n. M t font t bi t ư c g i là
"Portable User Interface" s luôn t n t i trên t t c các máy, như là m t ph n c a Silverlight. Ví d sau ây bi u di n các
cài t khác nhau c a FontFamily.
VIII. Chương 8
i tư ng MediaObject cho phép b n có th chơi l i các file WMV và WMA, cũng như m t vài
Silverlight cung c p m t
lo i file MP3 khác.
Thêm kh năng a phương ti n vào trang Web
thêm kh năng a phương ti n, b n có th dùng MediaElement và t thu c tính Source c a nó ch n file media c a
b n thông qua m t URI. B n có th xem ví d sau:
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.
Cũng gi ng như các i tư ng UIElement khac, b n có th t các hình v lên trên i tư ng MediaElement. Ví d sau s
thêm m t hình ellipse lên trên thành ph n MediaElement l y t ví d trư c:
M t s thu c tính c a MediaElement
Ngoài các thu c tính th a hư ng t MediaElement, như Opacity hay Clip, MediaElement cung c p m t s thu c tính
nguon tai.lieu . vn