WPF-Lesson 8 - Graphics

Bi 8 ha hai chiu trong WPF (2D-Graphics)Trc y, xy dng mt ng dng ha p, hin th cc i tng ha vi nhng hiu ng v chuyn ng ngi lp trnh phi mt nhiu cng sc. Vi WPF cc cng vic trn tr nn n gin hn nhiu, bi v WPF tch hp sn ha vector, a phng tin, hnh nh ng (animation) v cc i tng ha phc hp. Cc i tng ha trong WPF khng ch hin th mt cc n thun, chng cn c kh nng pht sinh cc s kin m thng thng ch c trong cc iu khin thng dng ca Window. Lp trnh vin c th xy dng cc ng dng ha p, sinh ng v th v vi Microsoft Visual Studio .NET hay thm ch ch cn s dng NotePad. Bi ny gii thiu v cch xy dng cc i tng ha nh on thng, chui on thng, a gic,.. vi cc cch thc t v phong ph, p mt cng nh cc hiu ng dch chuyn bng m lnh XAML.

1.

Cc i tng ha c bn - Shape

bt u, chng ta s tm hiu cc m lnh XAML hin th cc i tng ha c bn nh Line (on thng), Ellipse (hnh elip), Polygon (a gic), Polyline (chui on thng), Rectangle (ch nht) v Path (hnh phc hp). Cc i tng ny c k tha t i tng c s Shape. Cc i tng k tha t Shape c chung mt s thuc tnh nh: Stroke: M t mu sc ng vin ca mt hnh hoc mu ca mt on thng. StrokeThickness: dy ca ng vin. Fill: Cch t phn bn trong ca mt hnh. Data: M t cc ta , cc nh ca mt hnh, n v o l pixel.

1.1

on thng (Line)

on thng l mt i tng c nh ngha da trn hai u mt l hai im. Chng ta c th nh ngha dy ca on thng, mu sc hay cch v on thng (nt lin, nt t..). Hnh di y minh ha mt s v d v on thng

Microsoft Vietnam DPE Team | WPF Bi 8: ha hai chiu trong WPF (2D Graphics)

1

on thng nt lin mu en c dy l 4 pixel

on thng nt t mu da tri c dy l 4 pixel.

Hnh 8.1. V d v on thng

M lnh XAML ca v d trn nh sau. on m trnh ca hai on thng trn bng XAML:

Thng thng ta hay chn layout l Canvas cha cc i tng ha bi v Canvas cho php t cc i tng bn trong theo v tr tuyt i. Trong v d trn th dng nh ngha mt on thng. Th ny c mt s thuc tnh c bn: X1="10" Y1="10" :Ta nh th nht l X=10 v Y = 10 StrokeThickness="4" : dy ca on thng l 4 pixel X2="50" Y2="50" :Ta nh th hai l X=50 v Y = 50 Stroke="Black" : Mu ca on thng l mu en StrokeThickness="4" : dy ca on thng l 4 pixel StrokeDashArray="4 1":on thng c t theo nt t, c 4 pixel c

mu th 1 pixel l khong trng. on m trnh C# v on thng.// Add a Line Element myLine = new Line(); myLine.Stroke = System.Windows.Media.Brushes.LightSteelBlue; myLine.X1 = 1; myLine.X2 = 50; myLine.Y1 = 1; myLine.Y2 = 50; myLine.HorizontalAlignment = HorizontalAlignment.Left; myLine.VerticalAlignment = VerticalAlignment.Center; myLine.StrokeThickness = 2; myGrid.Children.Add(myLine);


3

1.2

Chui on thng (Polyline)

Polyline l i tng bao gm nhiu on thng lin tip ni vi nhau. Mt Polyline gm N on thng th c nh ngha bi N+1 im. Hnh di minh ha hai Polyline, mt Polyline gm ba on v mt Polyline gm hai on.

Polyline gm ba on thng mu en, nt lin

Polyline gm hai on thng mu da tri, nt t 4-1-2-1

Hnh 8.2. V d v Polyline hin th mt Polyline bng m lnh, to mt i tng Polyline v s dng thuc tnh Points ca n khai bo ta ca cc nh. Tip n, c th s dng cc thuc tnh Stroke v StrokeThickness m t mu sc v dy ca Polyline. i vi m XAML, c php khai bo dy cc im l: mi cp ta X,Y phn bit vi nhau bi khong trng v gia X vi Y phn bit bi du phy. Ch rng, i tng Polyline cng c thuc tnh Fill t mu bn trong, nhng thuc tnh ny khng c tc dng. Nu mun t mu cho vng bn trong ca tp hp cc im th s dng i tng Polygon. on m sau minh ha m lnh XAML ca v d ny.

Th c s dng to Polyline. Thuc tnh Points="X1,Y1 X2,Y2 X3,Y3 X4,Y4" khai bo tp hp cc im to nn Polyline. Thuc tnh StrokeDashArray="4 1 2 1" c ngha l Polyline c v bng nt t theo th t 4 nt mu 1 nt trng tip n l 2 nt mu m 1 nt trng, v tip tc lp li

1.3

Hnh ch nht (Rectangle)

i tng Rectangle c xc nh bi ta ca gc trn tri v rng, cao ca hnh ch nht cn hin th. Ngoi ra, ta c th thit lp cc thuc tnh cho ng vin (mu sc, dy, kiu dng) v t phn bn trong ca hnh.


5

Hnh ch nht khng c ng vin

Hnh ch nht khng c ng vin v cnh vt trn

Hnh ch nht c ng vin nt t Hnh 8.3. V d v hnh ch nhton m sau minh ha m lnh XAML ca v d ny.

Th dng v mt hnh ch nht. Cc thuc tnh Canvas.Left, Canvas.Top, Width, Height ch nh ta gc trn tri v rng, cao ca hnh ch nht. Thuc tnh Fill ch nh mu t bn trong hnh ch nht. nu b qua thuc tnh ny th hnh ch nht s l trong sut. Cc thuc tnh Stroke, StrokeThickness, StrokeDashArray ch nh kiu ng vin ca hnh ch nht. Nu khng ch nh gi tr cho cc thuc tnh ny th hnh ch nht s khng c ng vin. Cc thuc tnh RadiusX, RadiusY l bn knh ca hnh ellipse to ra cc gc trn ca hnh ch nht.

1.4

Hnh elip (Ellipse) v hnh trn (Circle)

Hnh Ellipse c xc nh bi ta ca gc trn tri v rng, cao ca hnh ch nht ngoi tip ca Ellipse cn hin th. Hnh trn l hnh Ellipse vi chiu rng v chiu cao bng nhau. Ellipse cng c cc thuc tnh cho ng vin (mu sc, dy, kiu dng) v t phn bn trong ca hnh tng t nh hnh ch nht.


8

Hnh trn khng c ng vin. Hnh Ellipse khng c ng vin

Hnh Ellipse c ng vin nt t Hnh 8.4. V d v hnh Ellipseon m sau minh ha m lnh XAML ca v d ny.


9


10

Th dng v mt hnh Ellipse hay hnh trn. Cc thuc tnh Canvas.Left, Canvas.Top, Width, Height ch nh ta gc trn tri v rng, cao ca hnh ch nht ngoi tip ca Ellipse. Nu Width v Height bng nhau th ta s c hnh trn. Thuc tnh Fill ch nh mu t bn trong hnh Ellipse. nu b qua thuc tnh ny th hnh Ellipse s l trong sut. Cc thuc tnh Stroke, StrokeThickness, StrokeDashArray ch nh kiu ng vin ca hnh Ellipse. Nu khng ch nh gi tr cho cc thuc tnh ny th hnh Ellipse s khng c ng vin.

1.5

a gic (Polygon)

Polygon l i tng dng trnh din cc hnh dng phc tp, gm on thng ni tip khp kn. Mt Polygon N nh c nh ngha bi mt tp hp N cp ta tng ng vi mi nh ca n. Hnh di minh ha mt s Polygon dng tam gic v lc gic.

Hnh Lc gic

Cc hnh Tam gic

Hnh 8.5. V d v Polygon

Polygon cng c cc thuc tnh tng t nh Polyline nh: thuc tnh Points ca n khai bo ta ca cc nh, cc thuc tnh Stroke v StrokeThickness m t mu sc v dy ng vin Polyline. Tuy nhin, i tng Polygon cn c tnh Fill t mu bn trong a gic.


11

i vi m XAML, c php khai bo dy cc im l: mi cp ta X,Y phn bit vi nhau bi khong trng v gia X vi Y phn bit bi du phy. on m sau minh ha m lnh XAML ca v d ny.

Th c s dng to a gic. Thuc tnh Points="X1,Y1 X2,Y2 X3,Y3 X4,Y4" khai bo tp hp cc nh ca a gic.

1.6

ng cong Bezier bng i tng Path

i tng Path c s dng to nn nhng hnh phc tp, gm nhiu phn ni vi nhau. V d di y minh ha s dng i tng Path to nn mt hnh gm mt ng cong Bezier, cui ng cong l mt on thng ni ngc tr li im u.

Mt Path gm ng cong Bezier v mt on thng ni ngc v im u.

Mt Path gm ng cong Bezier v mt on thng ni ngc v im gia. Hnh ny c t bn trong bi mu Blue.

Hnh 8.6. V d v Pathon m sau minh ha m lnh XAML ca v d ny.

Th c s dng to ng cong Bezier. Thuc tnh Data="M 10,100 C 100,0 200,200 300,100 z" khai bo cc thng s to nn mt Path. Trong M 10,100 ngha l ng cong bt u t im c ta (10,100) tnh theo h ta ca Canvas cha Path ny. Cc thng s ca thuc tnh Data c phn bit ch hoa, ch thng. Nu l ch hoa th ta im c tnh theo v tr tuyt i, ch thng th ta c tnh theo v tr tng i. V d, M khai bo ta im bt u ca Path tnh theo v tr tuyt i, cn nu thay bng m th s hiu l v tr tng i. K t C dng khai bo hai im iu khin (Control Point) ca ng cong. V d vi C 100,0 200,200 th hai im iu khin s c ta l (100,0) v (200,200). Sau hai im iu khin l im kt thc ca ng cong, trong v d trn, ta im kt thc l (300,100). on th hai ca Path trong v ny l mt ng k ngang ni t im kt thc ti im khi u ca ng cong nh tham s z. Nu mun t ng k ny ti mt im no trn ng nm ngang th ta thay tham s z bng tham s H. Trong v d hnh th 2 ta c tham s H 150 ngha l ng k ngang bt u t im cui ca ng cong v kt thc im c ta X = 150 tnh theo v tr tuyt i (nu l ch thng h th ngha l v tr tng i).


14

2.

S dng chi t - Brush

Tt c nhng g chng nhn thy trn mn hnh, chng hin th c l nh c t bi chi t (Brush). Chi t c th s dng t nn ca mt nt bm (Button), t cc nt ch (Text) hay t mu bn trong cho mt i tng hnh hc nh hnh ch nht, a gic,... Trong phn ny chng ta s tm hiu cch s dng chi t trong WPF bng m lnh XAML t cc i tng hnh hc theo nhiu cch khch nhau nh t mu ng nht (Solid Color), t kiu mu theo tuyn tnh (Linear Gradient Color), t mu dc theo bn knh hnh trn (Radial Gradient Color) v s dng nh bitmap t.

T mu ng nht

T mu theo tuyn tnh

T mu theo tm trn

T bng nh Bitmap

Hnh 8.7. Minh ha mt s kiu t hnh nhThao tc c bn t v cho mt i tng trc ht l to mt i tng ch t (Brush) ty theo tng loi nh trn, sau gn chi t vi thuc tnh c lin quan ca i tng cn s dng chi t ny. Mi loi i tng c mt s thuc tnh khc nhau ch nh t mu cho phn bn trong ca n. Bng sau y lit k mt s loi i tng v thuc tinh c dng gn vi chi t.Loi i tng (Class) Border Control Panel Pen Thuc tnh t v (Brush properties) BorderBrush, Background Background, Foreground Background Brush


15

Shape TextBlock

Fill, Stroke Background

2.1. T mu ng nht Solid ColorC nhiu cch t mu ng nht cho mt i tng, ta c th s dng trc tip thuc tnh t mu ca i tng (i tng hnh hc s dng thuc tnh Fill, i tng Button s dng thuc tnh Background,..) hoc to i tng tn l SolidColorBrush nh ngha mu sc cn t v gn cho i tng cn s dng chi t ng nht ny. i tng SolidColorBrush s dng thuc tnh Color ch nh mu cn t. Gi tr gn cho Color c th l tn ca mu c nh ngha sn (l cc thuc tnh tnh ca i tng Brush) nh Red, MediumBlue,.. hoc s dng cng thc biu din mu theo dng mu 32 bit #RRGGBB, trong RR (gi tr ca mu - Red), GG (gi tr ca mu l cy - Green), BB (gi tr ca mu da tri Blue) l cc s Hexa (h m c s 16) c gi tr nm trong khong t 00 n FF ( tng ng vi gi tr t 0 n 255) . Ngoi ra, c th s dng mu #AARRGGBB, AA l Alpha dng ch trong sut ca mu. Alpha cng gn vi 0 (00 h 16) th mu cng tr nn trong sut v cn gn vi 255 (FF h 16) th mu cng r nt. Sau y l v d hin th mt hnh ch nht c t ng nht mu .

on m XAML ca hnh ch nht ny nh sau:


16

on m lnh C# tng ng nh sau:// To i tng Rectangle v hnh ch nht. Rectangle exampleRectangle = new Rectangle(); exampleRectangle.Width = 75; exampleRectangle.Height = 75; // To i tng SolidColorBrush dng t mu cho hnh ch nht. SolidColorBrush myBrush = new SolidColorBrush(Colors.Red); exampleRectangle.Fill = myBrush;

Ta cng c th t mu cho cc iu khin nh thuc tnh Background. V d, t mu cho nt bmNt bm Nt bm

2.2. T mu theo nh hng tuyn tnh Linear Gradient ColorT mu (hay tn mu) l k thut t mt vng bng nhiu mu trn vi nhau dc theo mt trc nh hng (Gradient axis). Ta c th s dng k thut ny to nn cc hnh nh n tng vi sng hay bng ca mu to cm gic ba chiu (3D) hoc cng c th dng k thut ny to ra cc gi lp b mt knh, nhm, nc hay cc b mt vt liu mm khc. WPF cung cp hai loi mu l mu theo hng tuyn tnh (i tng LinearGradientBrush) hay mu dc theo bn knh hnh trn (i tng RadialGradientBrush).


17

i tng LinearGradientBrush dng t mt vng theo k thut tn mu da trn k thut ni suy cc mu nm gia cc cp mu ch nh dc theo mt trc (Gradient axis) dng ng thng. Hng ca ng thng chnh l hng mu, ta phi ch nh nhng mu cn xut hin ti cc im nm trn ng thng ny nh i tng GradientStop. Ta c th ch nh hng mu nm ngang t tri qua phi, nm dc t trn xung, hay theo ng cho bt k. Mc nh th hng mu s theo ng cho t gc trn bn tri ti gc di bn phi. Di y l mt v d v mt hnh ch nht gm bn mu khc nhau c t theo ch trn mu.

M lnh XAML ca hnh trn nh sau:

M lnh C# tng ng:Rectangle diagonalFillRectangle = new Rectangle(); diagonalFillRectangle.Width = 200; diagonalFillRectangle.Height = 100; // Hnh ch nht c t tn mu theo ng cho vi bn mu. LinearGradientBrush myLinearGradientBrush = new LinearGradientBrush(); myLinearGradientBrush.StartPoint = new Point(0, 0); myLinearGradientBrush.EndPoint = new Point(1, 1); myLinearGradientBrush.GradientStops.Add(


18

new GradientStop(Colors.Yellow, 0.0)); myLinearGradientBrush.GradientStops.Add( new GradientStop(Colors.Red, 0.25)); myLinearGradientBrush.GradientStops.Add( new GradientStop(Colors.Blue, 0.75)); myLinearGradientBrush.GradientStops.Add( new GradientStop(Colors.LimeGreen, 1.0)); // S dng chi t t hnh ch nht. diagonalFillRectangle.Fill = myLinearGradientBrush;

Thuc tnh StartPoint v EndPoint ca LinearGradientBrush xc nh im u v im ca ca trc t mi thuc tnh ny c xc nh bi mt cp gi tr x,y . Trong , x v y l cc s thc (double) c gi tr t 0 n 1, tng ng vi 0% v 100% tnh tng i so vi nh trn tri ca hnh ch nht cn v (hay nh ca hnh ch nht bao i vi cc hnh khc nh Ellipse, Polygon,..). Th ch nh cc im cht nm dc theo trc t. Thuc tnh Color xc nh mu cn t ti im cht. Thuc tnh Offset nhm xc nh v tr ca im cht, gi tr ny l mt s thc nm trong khong t 0 n 1, gi tr cng gn 0 th cng gn vi im xut pht StartPoint, gi tr gn vi 1 th cng gn vi im kt thcEndPoint ca trc t. H thng s t ng ni suy cc mu nm gia cc cp im cht.

hnh di y minh ha cc im cht ca v d trn. ng nt t chnh l trc t (Gradient Axis) cn vng trn l v tr ca im cht (GradientStop).

Ta cc im StartPoint v EndPoint ca trc t nh hng n hng t mu. Mc nh th gi tr ca StartPoint l (0,0) v EndPoint l (1,1), ngha l trc t l ng cho ca hnh ch nht bao.


19

Hnh di y minh ha cc t mu theo chiu ngang gm bn mu.


M lnh C# tng ng:Rectangle horizontalFillRectangle = new Rectangle(); horizontalFillRectangle.Width = 200; horizontalFillRectangle.Height = 100; // To chi t theo chiu ngang vi 4 im cht. LinearGradientBrush myHorizontalGradient = new LinearGradientBrush(); myHorizontalGradient.StartPoint = new Point(0, 0.5);


20

myHorizontalGradient.EndPoint = new Point(1, 0.5); myHorizontalGradient.GradientStops.Add( new GradientStop(Colors.Yellow, 0.0)); myHorizontalGradient.GradientStops.Add( new GradientStop(Colors.Red, 0.25)); myHorizontalGradient.GradientStops.Add( new GradientStop(Colors.Blue, 0.75)); myHorizontalGradient.GradientStops.Add( new GradientStop(Colors.LimeGreen, 1.0)); // Dng chi t t hnh ch nht. horizontalFillRectangle.Fill = myHorizontalGradient;

T hnh ch nht theo chiu ng


M lnh C# tng ng:Rectangle verticalFillRectangle = new Rectangle(); verticalFillRectangle.Width = 200; verticalFillRectangle.Height = 100;


21

// To chi t theo chiu ng vi 4 im cht. LinearGradientBrush myVerticalGradient = new LinearGradientBrush(); myVerticalGradient.StartPoint = new Point(0.5, 0); myVerticalGradient.EndPoint = new Point(0.5, 1); myVerticalGradient.GradientStops.Add( new GradientStop(Colors.Yellow, 0.0)); myVerticalGradient.GradientStops.Add( new GradientStop(Colors.Red, 0.25)); myVerticalGradient.GradientStops.Add( new GradientStop(Colors.Blue, 0.75)); myVerticalGradient.GradientStops.Add( new GradientStop(Colors.LimeGreen, 1.0)); // Dng chi t t hnh ch nht. verticalFillRectangle.Fill = myVerticalGradient;

2.3. T mu theo bn knh hnh trn Radial GradientK thut t mu theo bn knh hnh trn tng t nh k thut mu tuyn tnh, nhng im xut pht bt u t tm ng trn v mu c lan dn ra ngoi cho ti bin ca ng trn, s dng i tng tn l RadialGradientBrush. Cc im cht vn s dng i tng GradientStop nh phn trn. Di y l v d minh ha cch t mu theo bn knh hnh trn


22

M lnh minh ha thanh trng thi trn nh sau:

M lnh C# ca v d trn nh sau:RadialGradientBrush myRadialGradientBrush = new RadialGradientBrush(); myRadialGradientBrush.GradientOrigin = new Point(0.5, 0.5); myRadialGradientBrush.Center = new Point(0.5, 0.5); myRadialGradientBrush.RadiusX = 0.5; myRadialGradientBrush.RadiusY = 0.5; myRadialGradientBrush.GradientStops.Add( new GradientStop(Colors.Yellow, 0.0)); myRadialGradientBrush.GradientStops.Add( new GradientStop(Colors.Red, 0.25)); myRadialGradientBrush.GradientStops.Add( new GradientStop(Colors.Blue, 0.75)); myRadialGradientBrush.GradientStops.Add( new GradientStop(Colors.LimeGreen, 1.0)); Rectangle myRectangle = new Rectangle(); myRectangle.Width = 200; myRectangle.Height = 100; myRectangle.Fill = myRadialGradientBrush;

Cc thng s Center - Ta tm ng trn, RadiusX - Bn knh ngang, RadiusY - Bn knh dc c nht cc gi tr s thc trong khong t 0 n 1 tng ng vi t l khong cch ti nh trn tri ca hnh ch nht.


23

Thng s GradientOrigin l ta ca im xut pht. Cc im cht s chy t imGradientOrigin ny, dc theo ng knh hnh trn.

2.4. T bng nh Bitmap Radial GradientNgoi cc k thut t mu cho cc i tng hnh hc nh trn, WPF cn h tr t mt vng bng nhng hnh nh c sn (nh Bitmap, JPG,..) mt cch d dng nh i tng ImageBrush. Ta ch cn a tp nh vo ti nguyn ca Project v gn ng dn anh cho thuc tnh ImageSource ca i tng ImageBrush, sau dng chi t ImageBush t cc i tng hnh hc (Shape), cc iu khin (Control), Panel hay Text,.

Di y l v d minh ha t mu cho hnh ch nht bng hnh nh.


24

nh t ng co dn ph kn hnh ch nht

nh gi nguyn kch thc gc

nh co dn nhng gi nguyn t l

S dng Viewport v cch t kiu xp lp

Hnh 8.8. Minh ha t mt vng bng hnh nhM lnh minh ha thanh trng thi trn nh sau:


25

Thuc tnh ImageSource ca ImageBrush ch nh ng dn n tp hnh nh. Thuc tnh Stretch ch nh cc co dn hnh khi t vng, gi tr mc nh ca Stretch lFill. Thuc tnh ny c cc gi tr:


26

ca nh gc.

None: Chi t khng t ng co dn hnh. Uniform: Chi t co dn hnh trng kht vi mt chiu ca vng t nhng gi

nguyn t l ca nh gc.UniformToFill: Chi t co dn hnh ph kn vng t nhng gi nguyn t l

Fill: Chi t co dn hnh ph kn vng t, khng gi t l nh. Nu t l hai

chiu ca vng t khc vi t l hai chiu ca nh th nh t s b mo. Cc gi tr thuc tnh Stretch c minh ha nh hnh di y.

Thuc tnh TileMode ch nh kiu xp lp, gm cc gi tr sau: None: Khng xp lp. Tile: Xp lp ph kn vng cn t. FlipX: Xp lp ph kn vng cn t, hnh c lt theo chiu ngang. FlipY: Xp lp ph kn vng cn t, hnh c lt theo chiu dc. FlipXY: Xp lp ph kn vng cn t, hnh c lt theo c hai chiu.

Cc thuc tnh trn c minh ha bi hnh di.


27

2.5. Thit lp m ca chi t - Opacity to m (Opacity), WPF cung cp thuc tnh Opacity p dng cho cc i tng hnh hc (Shape), hnh nh hay RadientBrush,.. V d sau y minh ha thit lp m cho chi t.

Ch nht mu c t vi m l 0.75

Chi t Gradient vi m l 0.5

Chi t Image vi m l 0.3

Hnh 8.9. Minh ha chi t vi mM XAML ca v d trn nh sau:


29

Gi tr ca Opacity l mt s thc t 0 n 1. Nu Opacity cng gn bng 0 th chi t l trong sut, gi tr cng gn mt th chi t cng r nt.

3.

Bin i hnh hc Transform

Trong phn ny, chng ta tm hiu c bn v cc k thut bin i hnh hc vi WPF nh cc php dch chuyn (translate), php co dn (scale), php lch hnh (skew), php quay (rotate) WPF cung cp mt s lp (class) h tr cho cng vic bin i hnh hcLp (Class) RotateTrans form Angle. M t Quay i tng theo gc ch nh bi thuc tnh Minh ha

ScaleTransf orm

Co dn i tng theo chiu ngang v dc vi cc thuc tnh ScaleX v ScaleY.


30

SkewTransf orm

Lm lnh hnh theo cc gc ch nh bi AngleX v AngleY.

TranslateTr ansform v Y.

Dch chuyn i tng ti v tr ch nh bi X

Khi bin i mt i tng, ta khng ch bin i bn thn n m cn bin i c khng gian ta cha i tng . Mc nh, tm ca php bin i thc hin ti gc ca h ta ca i tng. V d sau minh ha s dng php quay xoay mt hnh ch nht mt gc 45 xung quanh tm (0,0) ca trc ta ca i tng (chnh l gc trn tri ca hnh ch nht)

M lnh XAML nh sau:


31

V d tip theo minh ha xoay hnh ch nht mt gc 45 quanh tm ca chnh n, c ta l (25,25).

M lnh XAML nh sau:

Khng ch dng vic bin i cc i tng hnh hc, WPF cn cho php bin i cc iu khin (Control). V d sau minh ha xoay mt nt bm mt gc 45 theo chiu kim ng h, tm gc quay l tm ca nt bm. Mc nh th tm gc quay l gc trn tri ca nt bm. S dng thuc tnhRenderTransformOrigin

ca Button v thit lp v tr tm quay. Cp gi tr ca

RenderTransformOrigin l s thc t 0 n 1, c tnh theo t l chiu rng v cao ca i tng

tnh t gc trn tri.


32

S dng thuc tnh RenderTransform ca Button v thc hin bin i hnh hc, gc quay c thit lp nh thuc tnh Angle ca i tng RotateTransform.

M lnh XAML ca v d trn:

4.1.

Cu hi n tpCc i tng hnh hc c th c xy dng bi? A. B. C. M lnh XAML M lnh C# C hai

Cu tr li: C 2. i tng Polyline gm N cnh c nh ngha bi bao nhiu cp ta ? A. B. C. N cp ta N+1 cp ta N-1 cp ta 33


Cu tr li: B 3. i tng Rectangle c nh ngha bi? A. B. Cu tr li: B 4. i tng Ellipse c nh ngha bi? A. B. Cu tr li: B 5. i tng Polygon gm N nh c nh ngha bi bao nhiu cp ta ? A. B. C. Cu tr li: A 6. Cc i tng hnh hc c th c t bn trong bi: A. B. C. D. E. Cu tr li: D 7. Khi s dng nh t mu cho i tng th mc nh nh s A. B. C. D. Cu tr li: B Gi nguyn kch thc gc. T co dn ph kn i tng. Gi nguyn kch thc v t ng xp lp ph kn i tng. Khng p n no ng. Mu ng nht T mu theo tuyn tnh hoc theo bn knh hnh trn T mu bi hnh nh c sn p n A,B,C p n A v B N cp ta N+1 cp ta N-1 cp ta Cc thuc tnh Ta tm ca Ellipse v cc bn knh ca n Hnh ch nht ngoi tip ca Ellipse. Cc thuc tnh Left, Top, Right, Bottom Cc thuc tnh Left, Top, Width, Height


34

5.

Ti liu tham kho

1. WPF Graphics, Animation, and Media Overview; http://msdn.microsoft.com/enus/library/ms742562.aspx . 2. Shapes and Basic Drawing in WPF Overview; URL: http://msdn.microsoft.com/enus/library/ms747393.aspx . 3. WPF Brushes Overview; URL: http://msdn.microsoft.com/en-us/library/aa970904.aspx . 4. Transforms Overview; URL http://msdn.microsoft.com/en-us/library/ms750596.aspx .


35

Documents

WPF-Lesson 8 - Graphics