Silverlight-Chapter 5 - Smith.N Studio PDF

Infoway
Solutons
X L HA TRN SILVERLIGHT

CHNG V:
1 Gii thiu
Silverlight cung cp nhiu la chn cho vic thm cc tnh nng trc quan th v cho ng dng
ca bn. Bn c th s dng v, Shape, Path, v nhng hnh hc phc tp. Nhng khu vc
c xc nh bi dng hnh th c th t hiu ng, nh l nh, di mu, hoc l on video,
thng qua vic s dng Brush.
Silverlight k tha mt th vin ha kh y t WPF bi vy s khng qu kh khn
mt lp trnh vin quen vi WPF chuyn qua lm vic vi Silverlight. Di y chng ta s
ln lt lm quen vi cc i tng ha nh Ellipse, Line, Path, Polygon, Geometries,
Brushes
2 Shapes and Drawing
Trong Silverlight, Shape l kiu UIElement nn bn c th d dng hin th mt i tng dng
Shape ln mn hnh. Bi v chng l nhng thnh phn ha nn nhng i tng Shape
ny c th i km vi nhng container nh Grid v Canvas. Silverlight cung cp nhng dng
hnh(Shape) m bn c th dng ngay c nh Ellipse, Line, Path, Polygon, Polyline, v
Rectangle. Nhng Shape u c chung nhng c tnh di y:
- Stroke: dng v vin ngoi ca Shape.
- StrokeThickness: dy ca vin ngoi ca Shape.
- Fill: M t cch pha bn trong ca Shape c v.
- c tnh Data ch r ta v cc nh c nh ngha ty theo thng tin u vo
Nhng i tng Shape c th dng bn trong Canvas. Canvas h tr ch ra v tr tuyt i
ca i tng con bn trong thng qua c tnh nh km l Canvas.Left v Canvas.Top
2.1 Ellipse
Bn c th to mt Ellipse bng cch xc nh hai thuc tnh c bn l rng(Width) v
cao(Height) nh v d minh ha di y.
<Canvas>
<Ellipse
Fill="Yellow"
Height="100"
Width="200"
StrokeThickness="2"
Stroke="Black"/>
</Canvas>

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

2.2 Line
Cho php bn v mt on thng gia hai im. V d di y ch ra mt s cch
bn xc nh ta ca on thng v c tnh Stroke ca n.
<Canvas Height="300" Width="300">
<!V mt ng cho t ta (0, 0) ti (100,100). -->
<Line X1="0" Y1="0" X2="100" Y2="100" Stroke="Black" StrokeThickness="4" />
<!V mt ng cho t ta (0, 0) ti (100,100) v di chuyn n ti gc
ta mi thm 100 pixels v pha bn phi. -->
<Line X1="0" Y1="0" X2="100" Y2="100" StrokeThickness="10" Canvas.Left="100">
<Line.Stroke>
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"
RadiusX="0.5" RadiusY="0.5">
<RadialGradientBrush.GradientStops>
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Blue" Offset="0.5" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Line.Stroke>
</Line>
<!V mt on ngang t ta (10,80) ti (150,80). -->
<Line X1="0" Y1="80" X2="200" Y2="80" Stroke="Black" StrokeThickness="4"/>
</Canvas>

2.3 Path
Lp Path cho php bn v nhng hnh cong v nhng dng hnh phc tp. Nhng hnh
cong v dng hinh(shape) c din t thng qua vic s dng i tng Geometry.
s dng Path, bn to mt Geometry v dng n xt cho c tnh Data ca i
tng Path. C nhiu loi i tng Geometry khc nhau bn chn: LineGeometry,
RectangleGeometry, v EllipseGeometry c lin quan ti nhng dng hnh(shape) n
gin ln lt tng ng Line, Rectangle, Ellipse. to nhng dng hnh phc tp
hoc hnh trn chng ta s dng PathGeometry. V d di y x dng c php rt
gn biu din mt dng hnh phc tp.
<Canvas>
<Path Stroke="DarkGoldenRod" StrokeThickness="3"
Data="M 100,200 C 100,25 400,350 400,175 H 280" />
</Canvas>

Infoway
Solutons

2.4 Polygon
xc nh mt a gic(Polygon) bn cn cung cp mt danh sch cc im (Point) v
t mu cho n qua c tnh Fill. V d di y v mt a gic vi mu vin ta v
bn trong c mu xanh.
<Canvas>
<Polygon
Points="300,200 400,125 400,275 300,200"
Stroke="Purple"
StrokeThickness="2">
<Polygon.Fill>
<SolidColorBrush Color="Blue" Opacity="0.4"/>
</Polygon.Fill>
</Polygon>
</Canvas>

2.5 Polyline
Cng tng t nh i tng Polygon ngoi tr vic khng nht thit Polyline phi
khp kn. Bn cng c th nhn c kt qu tng t nh Polyline khi v chng ln
nhau nhiu Line. Ch Polyline vi mt im(Point) s khng c hin th ln. V d
di y v mt Polyline l mt hnh tam gic vin mu xanh khp kn.
<Canvas>
<Polyline Points="50,25 0,100 100,100 50,25"
Stroke="Blue" StrokeThickness="10"
Canvas.Left="75" Canvas.Top="50" />
</Canvas>

2.6 Rectangle
Mt hnh ch nht(Rectangle) c xc nh bi hai c tnh rng(Width) v
cao(Height), xc nh v tr ca Rectangle trong container chng ta s dng thuc
tnh Margin hoc Canvas.Left, Canvas.Top ty chnh. Rectangle khng h tr i
tng con bn trong bi vy nu bn mun khu vc Rectangle cha nhng i tng
Infoway
Solutons

khc bn c th s dng Canvas. Bn cng c th dng dng hnh hn hp, nhng
trong trng hp ny c l bn nn s dng RectangleGeometry hn l vic dng
Rectangle. V d di y hin th mt Rectangle vin mu v t mu bn trong mu
xanh.
<Canvas>
<Rectangle Width="100" Height="100" Fill="Blue" Stroke="Red"
Canvas.Top="20" Canvas.Left="20" StrokeThickness="3" />
</Canvas>

3 Geometries
Cung cp lp c s cho nhng i tng xc nh dng hnh hc cho i tng. i tng
Geometry c th s dng lm vng giao(clipping regions) v cng nh nh ngha d liu
cho i tng Path.
3.1 EllipseGeometry
Miu t hnh dng ca ng trn hoc ellipse. FillRule l c tnh k tha t lp c s
Geometry nhng ty chn ny khng c tc dng i vi EllipseGeometry.
EllipseGeometry ch n gin nh ngha hnh dng cho ellipse v khng th t n hin
th c. Bi v n rt n gin v phm vi s dng rng. V d di y v mt path
s dng d liu dng EllipseGeometry
<Canvas>
<Path Fill="Gold" Stroke="Black" StrokeThickness="1">
<Path.Data>
<EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50" />
</Path.Data>
</Path>
</Canvas>

3.2 PathGeometry
Miu t dng hnh phc tp c th gm c hnh cung, ng cong, ellipse, on thng,
v hnh ch nht. Mi PathGeometry xc nh bi mt danh sch i tng PathFigure.
Mi i tng PathFigure bao gm mt hoc nhiu PathSegment, tng t cng nh
vi ArcSegment v LineSegment. ph kn din tch ca PathGeometry th mi i
Infoway
Solutons

tng PathFigure bn phi xt thuc tnh IsFilled l "true" v FillRule xc nh khu
vc c fill.
<Canvas>
<Path Stroke="Black" StrokeThickness="1">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure StartPoint="10,20">
<PathFigure.Segments>
<LineSegment Point="100,130"/>
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>

3.3 GeometryGroup
Miu t mt hn hp hnh dng, c to thnh t nhiu i tng Geometry
khc. S dng FillRule cho GeometryGroup l rt hp l bi s kt hp cc
hnh dng c th c kh nng kt hp cc on ni m s p dng ca quy lut
fill c tc dng.
<Canvas>
<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
<Path.Data>


<GeometryGroup FillRule="EvenOdd">
<LineGeometry StartPoint="10,10" EndPoint="50,30" />
<EllipseGeometry Center="40,70" RadiusX="30" RadiusY="30" />
<RectangleGeometry Rect="30,55 100 30" />
</GeometryGroup>
</Path.Data>
</Path>
</Canvas>
4 Brushes
Bn c th t mu cc i tng trong Silverlight vi mu n, di nghing, bn knh nghing
v nh.
Infoway
Solutons

4.1 Solid Color
Mt trong nhng thao tc chung trong bt c nn tng no l t mu mt khu vc vi
mt mu n sc. thc hin vic ny, Silverlight cung cp lp SolidColorBrush. Di
y chng ti s ch ra nhng cch khc nhau t mu vi SolidColorBrush.
t mu mt khu vc vi mu n trong XAML, s dng theo nhng ty chn sau:
o SolidColorBrush c nh ngha trc theo tn. V d di y dng
SolidColorBrush xt thuc tnh Fill ca hnh ch nht(Rectangle).
<StackPanel>
<Rectangle Width="100" Height="100" Fill="Red" />
</StackPanel>
o Chn t bng mu 32-bit vi nh dng #rrggbb vi rr, gg, bb ln lt l 2 s m
16 cho cc mu , xanh l, xanh l. M rng thm bn c th xt vi nh dng
nh sau: #aarrggbb vi r, g, b ngha nh trn v aa y ch gi tr alpha hoc
l trong sut.
<StackPanel>
<Rectangle Width="100" Height="100" Fill="#FFFF0000" />
</StackPanel>
o S dng thuc tnh kiu phn t m t SolidColorBrush( y l thuc tnh
Fill)
<StackPanel>
<Rectangle Width="100" Height="100">
<Rectangle.Fill>
<SolidColorBrush Color="Red" />
</Rectangle.Fill>
</Rectangle>

<Rectangle.Fill>
<SolidColorBrush Color="#FFFF0000" />
</Rectangle.Fill>
</Rectangle>
</StackPanel>

4.2 Gradient
Gradient brush v mt khu vc vi nhiu mu sc pha trn vo nhau dc theo mt trc.
Bn c th s dng chng to ra hiu ng nh sng v bng, mang li cho thnh
phn ha ca bn cm gic 3 chiu. Bn cng c th s dng chng m phng
knh, chrome, nc, v cc b mt mn. Silverlight cung cp 2 loi gradient brush l :
LinearGradientBrush v RadialGradientBrush.
a. Linear Gradients
LinearGradientBrush dng v mt khu vc vi mt di nghing. Bn ch
ra mu sc cho di nghing v v tr dc theo trc nghing thng qua vic s
dng i tng GradientStop. Bn cng c th chnh sa trc nghing, n
cho php bn to di nghing theo chiu dc hoc ngang v o hng ca
Infoway
Solutons

di nghing. V d di y s dng di nghing vi 4 mu v s sng n
v ln hnh ch nht.
<StackPanel>
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="LimeGreen" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</StackPanel>

b. Radial Gradients
Ging nh LinearGradientBrush, mt RadialGradientBrush v mt khu vc vi
mu sc m pha trn vi nhau dc theo mt trc. Cch v ca
RadialGradientBrush da theo mt trc c xc nh bi ng trn; mu sc
ca n tia ra ngoi t pha gc ca n. V d di y v mt hnh ch nht s
dng RadialGradientBrush t mu bn trong.
<StackPanel>
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"
RadiusX="0.5" RadiusY="0.5">
<GradientStop Color="Yellow" Offset="0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="LimeGreen" Offset="1" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
</StackPanel>
Infoway
Solutons

Di y l mt vi ty chn khc nhau gip bn to mt s kiu hiu ng khc
nhau vi RadialGradientBrush:

4.3 Images
Lp ImageBrush cho php bn s dng nh fill, xt lm bacrkground, v vin
ngoi. ImageBrush s dng c vi nhng nh dng nh JPEG hoc PNG v c
dng thng qua thuc tnh ImageSource. Bn c th cung cp thng tin ImageSource
vi ng dn ca nh ti chng.
Infoway
Solutons

Mc nh ImageBrush s gin nh ra ht ton b khu vc c v, c th nh s b lm
mo nu khu vc c v c t l b mt khc vi nh. Bn c th thay i trng thi
ny bng vic thay i thuc tnh Stretch mc nh ca n ti mt trong nhng gi tr
sau: None, Uniform, UniformToFill. V d di y s dng ImageBrush v nn ca
mt Canvas
<Canvas>
<Grid x:Name="LayoutRoot">
<Grid.Background>
<ImageBrush ImageSource="Forest.jpg" />
</Grid.Background>
</Grid>
</Canvas>

4.4 Video
VideoBrush cho php bn v mt khu vc bng video. V d di y s dng
VideoBrush v mu ch(Foreground) ca TextBlock
<Grid x:Name="LayoutRoot" Background="White">
<MediaElement
x:Name="butterflyMediaElement"
Source="Butterfly.wmv" IsMuted="True"
Opacity="0.0" IsHitTestVisible="False" />
<TextBlock Canvas.Left="5" Canvas.Top="30"
FontFamily="Verdana" FontSize="120"
FontWeight="Bold" TextWrapping="Wrap"
Text="Video">


<TextBlock.Foreground>
<VideoBrush SourceName="butterflyMediaElement" Stretch="UniformToFill" />
</TextBlock.Foreground>
</TextBlock>
</Grid>

Infoway
Solutons

4.5 Deep Zoom
Deep Zoom cung cp kh nng phng to thu nh mt cch ty nhng nh ln trong
Siliverlight mt cch hiu qu nht. nh c th hin th mc rt nh v rt ln m
khng nh hng ti hiu qu hot ng ca ng dng ang hin th nh. Ch c thuc
tnh lm nh hng ti hiu qu hot ng l phn gii ca mn hnh. bit
thm chi tit mi cc bn tham kho a ch sau: http://msdn.microsoft.com/en-
us/library/cc645050(VS.95).aspx

Silverlight-Chapter 5 - Smith.N Studio PDF

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 5 - Smith.N Studio PDF

Uploaded by

Copyright:

Available Formats

Infoway

You might also like