Đồ án Ứng dụng silverlight lập trình game cờ caro

Tìm hiểu SilverlightChương 1: Tổng quan về Silverlight • Silverlight là một dạng plug-in dựa trên công nghệ của Microsoft .Net • Nó độc lập với đa nền tảng và đa trình duyệt • Nó cho phé

Trang 1

NHẬN XÉT GIẢNG VIÊN HƯỚNG DẪN

Hưng Yên, ngày … tháng 11 năm 2011 GIẢNG VIÊN HƯỚNG DẪN NHẬN XÉT GIẢNG VIÊN HƯỚNG DẪN

Trang 2

Trang 3

Trang 4

Hưng Yên, ngày … tháng 11 năm 2011 GIẢNG VIÊN HƯỚNG DẪN

MỤC LỤC

Trang 5

LỜI CẢM ƠN

Sau thời gian thực hiện làm đề tài đến nay nhóm đã hoàn thành đề tài của mình Để

có được kết quả như hôm nay, nhóm thực hiện đề tài đã nhận được rất nhiều sự quan tâm,giúp đỡ và chỉ đạo nhiệt tình của các thầy, cô trong khoa công nghệ thông tin

Đặc biệt nhóm thực hiện đề tài xin gửi lời cảm ơn chân thành nhất tới thầy “Hoàng

Quốc Việt” Thầy là người đã tận tình chỉ bảo, chia sẻ cho nhóm những kiến thức bổ ích

hướng dẫn động viên trong suốt thời gian qua, tạo mọi điều kiện tốt nhất cho nhóm trongquá trình thực hiện

Mặc dù nhóm thực hiện đề tài đã rất cố gắng trong quá trình làm đề tài song đồ án củanhóm không thể tránh khỏi những thiếu sót, hạn chế Nhóm thực hiện đề tài rất mongnhận được sự đóng góp chân thành từ các thầy, cô và các bạn để đề tài của nhóm đượchoàn thiện hơn

Nhóm thực hiện đề tài xin chân thành cảm ơn!

Hưng Yên, ngày 11tháng 11 năm 2011

Nguyễn Thành Trường

Trang 6

PHẦN I: MỞ ĐẦU

1 Lý do chọn đề tài

Tìm hiểu công nghệ là hành trang tốt nhất để chuẩn bị kiến thức cho chúng em sau khi ratrường Silverlight là một công nghệ mới kết hợp nhiều công nghệ vào một nền tảng pháttriển, nó cho phép lựa chọn nhiều công cụ và ngôn ngữ lập trình thích hợp để giải quyếtbài toán Silverlight ra đời đã giải quyết vấn đề thường gặp của các ứng dụng web về khảnăng tương thích với trình duyệt và hệ điều hành Silverlight cung cấp một mô hình lậptrình lập trình mềm dẻo và đồng nhất Ứng dụng nó tạo ra giao diện thân thiện, hiệu ứngđẹp cho các phần mềm các trang web Hiện nay cờ caro là một trò chơi rất phổ biến tronggiới học đường Từ nhu cầu giải trí đó, đã có rất nhiều hãng đã sản xuất trò chơi caro trênmáy tính, giúp cho việc chơi cờ caro được dễ dàng hơn, và bạn có thể đánh cờ với máy

mà không cần một người bạn thực sự

Trên cùng mục đích muốn đem trò chơi cờ caro đến với mọi người, làm cho việc chơi cờtrở nên dễ dàng hơn, có thể hỗ trợ cho bạn chơi với bạn bè, nhóm em đã chọn đề tài là:

“Tìm hiểu silverlight và lập trình game cờ caro”.

Qua quá trình tìm hiểu chúng em đã hoàn thành bản báo cáo với nội dung sau:

Phần I: Mở đầu

Phần II: Nội dung

I Tìm hiểu công nghệ

 Chương 1: Tổng quan về Silverlight

 Chương 2: Layout trong silverlight

 Chương 3: Các control cơ bản

 Chương 4: Xử lý đồ họa trên Silverlight

Trang 7

 Chương 5: Animation và Media

 Chương 6: Expression Blend

II Lập trình game caro

 Chương 1: Giới thiệu trò chơi caro

 Chương 2: Giải thuật của chương trình

 Chương 3: Thiết kế chương trình và các hàm chính của chương trìnhPhần III: Kết luận

Phần IV: Tài liệu tham khảo

2 Đối tượng nghiên cứu

 Công nghệ Silverlight, xaml

 Chương trình chơi game caro

 Công cụ xây dựng phần mềm: Visual Studio 2010, Microsoft Expression Blend

3 Giới hạn và phạm vi nghiên cứu

Tìm hiểu công nghệ Silverlight và lập trình game caro

4 Mục đích nghiên cứu

 Xây dựng được tài liệu giúp tìm hiểu về công nghệ Silverlight

 Xây dựng được chương trình chơi game caro có sử dụng công nghệ Silverlight

5 Nhiệm vụ nghiên cứu

 Tìm hiểu công nghệ Silverlight và ngôn ngữ XAML

 Tìm hiều các kiến thức của công nghệ Silverlight để áp dụng vào xây dựngchương trình game caro

6 Phương pháp nghiên cứu

 Tìm hiểu hết tổng hợp kiến thức chung của Silverlight, sau đó đi sâu vào nhữngkiến thức cụ thể để xây dựng giao diện ứng dụng cờ caro

 Nghiên cứu công cụ Microsoft Expression Blend để dựa vào đó thiết kế giao diệncho trang web của ứng dụng

Trang 8

7 Ý nghĩa lý luận và thực tiễn của đề tài

 Qua việc tìm hiểu đã giúp em biết thêm kiến thức một công nghệ mới với nhiềutính năng nổi trội so với các công nghệ hiện có của Microsoft

 Công nghệ Silverlight cho ta một cái nhìn tổng quan về thiết kế giao diện đẹp vàbóng bảy mà không đòi hỏi phải sử dụng quá nhiều công nghệ cùng lúc mới tạođược, chính điều đó tạo nên sức mạnh của Silverlight

Trang 9

PHẦN II: NỘI DUNG

I. Tìm hiểu SilverlightChương 1: Tổng quan về Silverlight

• Silverlight là một dạng plug-in dựa trên công nghệ của Microsoft Net

• Nó độc lập với đa nền tảng và đa trình duyệt

• Nó cho phép phát triển các ứng dụng đa phương tiện đặc biệt là các ứng dụng trênweb

• Silverlight cung cấp một mô hình lập trình lập trình mềm dẻo và đồng nhất, nó hỗtrợ Ajax, Python, Ruby và các ngôn ngữ lập trình Net như Visual basic, C#

I.2. Đặc điểm

Silverlight kết hợp nhiều công nghệ vào một nền tảng phát triển, nó cho phép bạnđược lựa chọn nhiều công cụ và ngôn ngữ lập trình thích hợp để giải quyết bài toán củabạn Silverlight cung cấp các tính năng sau:

Trang 10

1.3 Kiến trúc và các thành phần

Về cơ bản Silverlight là một nền tảng thống nhất của nhiều thành phần khác nhau

Dưới đây là bảng các thành phần chính của silverlight

Nền tảng trình bày cơ sở Các thành phần và dịch vụ hướng tới giao diện người dùng và tương tác người dùng,

bao gồm các control cho dữ liệu cho người dùng nhập, thiết bị đa phương tiện, quản lýphân quyền số, trình bày dữ liệu, đồ họa vector, chữ, hình ảnh động cũng bao gồm XAML để đặc tả việc bố trí giao diện

.Net Framework cho silverlight Là một gói nhỏ trong Net Framework, bao gồm các thành phần và cá thư viện, kể cả

tương việc tương tác dữ liệu, khả năng mở rộng các control, mạng, garbage collection,

và CLRCài đặt và cập nhật Là thành phần để sử lý các tiến trình cài đặt làm sao để đơn giản hóa cho lần cài đặt

đầu tiên, tiếp sau đó chỉ cung cấp cơ chế tự động cập nhật và tương tác ở mức thấp.Dưới đây là hình ảnh mô tả những thành phần trong kiến trúc của Silverlight cùng với các

thành phần và dịch vụ liên quan khác

Core Presentation Components: (các thành phần chính)

Trang 11

Tính năng Mô tả

Dữ liệu vào (input) Xử lý dữ liệu đầu vào từ các thiết bị phần cứng như bàn phím, chuột, bảng vẽ hoặc các thiết bị đầu vào khácTrình bày giao diện người

dùng (UI Rendering)

Trình bày vector và các đồ hoạ ảnh bitmap, ảnh động, và văn bản

Thiết bị nghe nhìn (Media) Các tính năng phát và quản lý một vài thể loại file âm thanh và hình ảnh như WMP và MP3Controls Hỗ trợ mở rộng cho các control để có khả năng tùy chỉnh về kiểu dáng và khuôn mẫuXếp đặt Layout Cho phép khả năng xếp đặt vị trí động các thành phần giao diện người dùng

Trình bày dữ liệu

(Data Binding) Cho phép việc kết nối dữ liệu của các đối tượng và các thành phần giao diện người dùng

Các lập trình viên có thể tương tác với thành phần nền tảng trình bày cơ sở trên đây bằng

cách sử dụng XAML để đặc tả XAML là một yếu tố quan trọng nhất trong việc tương tác

giữa Net Framwork và các kiểu trình bày Layout, ngoài ra các lập trình viên cũng có thể

sử dụng cơ chế quản lý code bên trong để thao tác với lớp trình bày

.Net Frame work for Silverlight:

Data

Hỗ trợ ngôn ngữ truy vấn tích hợp (LINQ) và LINQ với đặc tả XML, dễ dang xử lý việctích hợp và làm việc với dữ liệu từ nhiều nguồn khác nhau Hỗ trợ việc sử dụng XML

và các lớp biên đổi hóa (serialization) để xử lý dữ liệu

Base class library

Thuộc thư viện của Net Framework, nó cung cấp các chức năng lập trình chủ yếu như việc xử lý chuỗi, biểu thức chính quy, đầu vào và đầu ra, ánh xạ, tập hợp và toàn cục hóa

(CLR) Cung cấp việc quản lý bộ nhớ, dọn dẹp bộ nhớ thừa, xử lý ngoại lệ…

Dynamic language runtime

(DLR) Hỗ trợ việc biên dịch và thi hành với tính năng động của các ngôn ngữ kịch bản như Javascript và IronPython cho các chương trình trên nền tảng Silverlight

1.4 Mô hình lập trình

 Javascript API

Trang 12

 Managed API

1.5 Công nghệ và công cụ liên quan của Silverlight

Microsoft Expression Blend: Sử dụng công cụ này bạn bạn có thể tạo và thay đổi cách

xắp xếp trình bày Layer của ứng dụng bằng cách thao tác đến canvas và control trong XAML, làm việc với các chức năng đồ họa, Lập trình với ngôn ngữ Javascript

Visual Studio 2008: Visual Studio cung cấp các công cụ hiệu quả cho việc phát triển các

ứng dụng có hỗ trợ thao tác code bên tron Tất cả các phiên bản đã có của Visual Studio đều có khả năng hỗ trợ Silverlight,Tuy nhiên ở phiên bản mới này nó còn hỗ trợ các tính năng đặc biệt hơn như bao gồm khả năng IntelliSense, debugging và các template cho việc tạo mới một ứng dụng Silverlight

ASP.NET AJAX: Bao gồm tập các Control, Service, và các thư viện cần thiết cho việc tạo

và tương tác với nền ứng dụng web

Microsoft ASP.NET 3.5 Extensions Preview: Công nghệ này cung cấp chức năng thêm để

việc tăng cường các ứng dụng ASP.NET AJAX Nó bao gồm 2 control sử dụng hữu ích cho việc xây dựng ứng dụng nền tảng silverlight cũng như là một phần của ứng dụng ASP.NET:

- ASP.NET MediaPlayer Server Control

- ASP.NET Silverlight Server Control

Internet servers: Bao gồm IIS (Microsoft Internet Information Services), và Apache Web server

Microsoft Windows Communication Foundation (WCF) services

Trang 13

Chương 2: Layout trong silverlight

Khi xây dựng ứng dụng Silverlight, một trong những điều cần quan tâm là việc bố trígiao diện đồ họa như thế nào để một developer có thể tận dụng những sức mạnh về đồhọa của Silverlight, trước hết chúng ta cần phải biết được những đối tượng cơ bản dànhcho việc sắp xếp, thiết kế các thành phần UI Silverlight cung cấp cho ta 3 kiểu bố trí khácnhau đó là: Canvas, StackPanel và Grid

2.1.Canvas

Định nghĩa một khu vực mà trong đó bạn có thể chỉ ra vị trí của từng đối tượngthành phần bằng cách sử dụng tọa độ tham chiếu Bạn có thể sử dụng lồng các Canvasvới nhau và những thành phần bên trong của Canvas phải là một UIElement Trong nhiềutrường hợp thì Cancas chỉ đóng vài trò như một đối tượng để chứa đựng những đối tượngkhác và không có một thuộc tính hiển thị nào

Canvas là đối tượng layout duy nhất cho phép định vị đối tượng dựa vào giá trị tọa

độ tuyệt đối, thông qua 2 thuộc tính được sử dụng dưới dạng Attached Property làCanvas.Top và Canvas.Left

Trong quá trình gõ đoạn code trên trong Visual Studio để thử nghiệm, khi bạn gõ đếnCanvas., công nghệ IntelliSense sẽ hiện ra một menu pop-up cho thấy các thuộc tính dạngAttachedProperty của Canvas Khi đó, bạn có thể thấy thuộc tính ZIndex Tính chất củathuộc tính này là giải quyết vấn đề khi các đối tượng trên Canvas che phủ lên nhau(overlap) Nếu như 2 đối tượng có ZIndex như nhau hoặc cùng không định nghĩa ZIndexthì đối tượng nào được khai báo sau sẽ đè lên trên Tuy nhiên, nếu 2 đối tượng có giá trịthuộc tính ZIndex khác nhau, thì ZIndex của đối tượng nào lớn hơn sẽ giúp đối tượngđược ưu tiên xuất hiện phía trên

Ví dụ minh họa: chỉ ra hình chữ nhật cách trái 20pixel và cách trên 53pixel

< Grid x : Name ="LayoutRoot" Background ="White">

< Rectangle Width ="200" Height ="100" Canvas.Left ="20" Canvas.Top ="53" Fill ="Violet">

Trang 14

- StackPanel hay được dùng khi muốn sắp xếp chỉ trong một phần của toàn bộ trang.

- Gía trị mặc định được gán cho thuộc tính Orientation là chiều dọc(Vertical) và giá trị mặc định được xét cho hai thuộc tính HorizontalAlignment và VerticalAlignment là Stretch.

- Ví dụ: StackPanel sắp xếp các nút theo chiều ngang

</StackPanel>

Trang 15

- Width="Auto": Đặt kích thước tự động theo kích thước của nội dung nó chứ bên trong

- Width="90": Đặt kích thước 1 cách tuyệt đối

- Width="*": Cột này sẽ chiếm toàn bộ phần còn lại

Trang 16

<TextBlock FontSize="20">Dùng border để bo góc </TextBlock>

Trang 17

<sdk:Calendar Height="169" Name="calendar1" Width="230" />

<CheckBox Name="checkbox2" ClickMode="Release" IsThreeState="True"

Content="ChecBox 3 trạng thái" Margin="80,50,0,0"></CheckBox>

</Grid>

Trang 18

Hình 3.4: CheckBox

3.5 ComboBox

- Cho phép lựa chọn một Item từ một danh sách Item từ ComboBox

- Ví dụ:

<ComboBox Name="ComboBox" BorderThickness="3" IsDropDownOpen="True"

SelectedIndex="0" Width="90" Height="30">

- Ví dụ: Cài đặt một số control được thừa kế từ ContentControl

<StackPanel Name="root" Width="300"

HorizontalAlignment="Center"VerticalAlignment="Center">

<! Tạo một nút với nội dung gán từ content >

Trang 19

<! Tạo một nút với UIElement gán từ content >

<TextBlock Width="303" >DataPicker- để mặc định (short date format)</TextBlock>

<sdk:DatePicker Name="dp1" Width="180" Height="33" />

<TextBlock Width="298">DataPicker- Long date format</TextBlock>

<sdk:DatePicker Name="dp2" SelectedDateFormat="Long" Width="290" Height="40" />

</StackPanel>

Trang 20

Hình 3.7: DatePicker

3.8 GridSpliter

- GridSplitter cho phép người dùng phân phối lại không gian giữa các hàng hoặc cột Nó là yếu tố

đồ họa tượng trưng cho một thành phần gắn vào nó mà thành phần đó có thể tương tác.

< TextBlock Text ="1" Grid.Row ="0" Grid.Column ="0"/>

< sdk : GridSplitter Grid.Row ="1" Grid.Column ="0" Grid.ColumnSpan ="4" Height ="5"

HorizontalAlignment ="Stretch" VerticalAlignment ="Top" ShowsPreview ="True"/>

< sdk : GridSplitter Grid.Row ="2" Grid.Column ="1" Grid.ColumnSpan ="2" Height ="5"

HorizontalAlignment ="Stretch" ShowsPreview ="True"/>

</ Grid >

Trang 21

Hình 3.8: GridSpliter

3.9 HyperlinkButton

- HyperlinkButton hiển thị một siêu liên kết Khi bấm vào HyperlinkButton sẽ cho phép người dùng truy cập vào một trang web, địa chỉ URL chỉ được xác định với các NavigateUrl Bạn có thể chỉ định cửa sổ hoặc một khung trong những điểm đến trang web bằng cách sử dụng TargetName.

- Ví dụ:

<TextBlock Text="HyperlinkButton"

Margin="134,51,71,221" Width="200" Height="35"

FontFamily="Times New Roman" FontSize="15" FontWeight="Bold"

Trang 22

<InkPresenter x:Name="Caro" Height="400" Width="400"

Trang 23

//nếu để thì kẻ được đường thẳng

//if (newStroke != null)

<ListBox Height="131" HorizontalAlignment="Left"

Margin="102,111,0,0" Name="listBox1"

VerticalAlignment="Top" Width="207" >

<TextBlock>TextBlock</TextBlock>

Trang 24

< Grid x : Name ="LayoutRoot" Background ="White">

< MultiScaleImage x : Name ="caleimage" Source ="source/item.bin"

Trang 25

< TextBlock Text ="Mật khẩu" Width ="116" Margin ="10,20,0,0" />

< PasswordBox x : Name ="Pass" PasswordChanged ="Pass_PasswordChanged" Width ="300"

< StackPanel x : Name ="LayoutRoot" Background ="White">

< Button Width ="100" Height ="50" x : Name ="showPopup"

Click ="showPopup_Click" Content ="Show Popup" />

</ StackPanel >

C#:

Popup p = new Popup ();

private void Showpopup_Click( object sender, RoutedEventArgs e)

{

Border border = new Border ();

border.BorderBrush = new SolidColorBrush ( Colors Blue);

border.BorderThickness = new Thickness (5.0);

Trang 26

< Grid Height ="250" Width ="300">

< Border BorderThickness ="5" BorderBrush ="Black" >

< StackPanel Background ="Violet">

< TextBlock HorizontalAlignment ="Center" Margin ="10" Text ="value _based progress bar"/> < ProgressBar x : Name ="pgb1" Value ="100" Margin ="10" Maximum ="200"

Height ="15" IsIndeterminate ="False"/>

< TextBlock HorizontalAlignment ="Center"

Margin ="10" Text ="Indeterminate progress bar(VÔ HẠN)"/>

< ProgressBar x : Name ="pgb2" Value ="100" Margin ="10" Maximum ="200"

Height ="15" IsIndeterminate ="True"/>

- Cho phép người dùng chọn một tùy chọn từ một nhóm các tùy chọn Các RadioButton

tổ chức trong cùng một nhóm bằng cách đặt các GroupName chung cho mỗi button CácRadioButton là một ContentControl

- Ví dụ:

< StackPanel Height ="200" Width ="250">

< RadioButton Width ="200" Content ="Radiobutton1" />

< RadioButton Width ="200" Content ="Radiobutton2"/>

</ StackPanel >

Trang 27

<RepeatButton x:Name="RepeatButton"

Content="Bấm và giữ cho nhiều sự kiện click"

Click="RepeatButton_Click"/>

</StackPanel>

C#:

staticint clicks = 0;

privatevoid RepeatButton_Click(object sender, RoutedEventArgs e)

Trang 28

< ScrollViewer Height ="200" HorizontalScrollBarVisibility ="Auto" >

< TextBlock Width ="300" TextWrapping ="Wrap" FontSize ="30"

Text ="Tìm hiểu các control trong

Tìm hiểu các control trong Silverlight"/>

< TextBlock > Basic Slider </ TextBlock >

< Slider x : Name ="slider1" Minimum ="0" Maximum ="10"

ValueChanged ="slider1_ValueChanged"/>

</ StackPanel >

Trang 29

<TextBlock>TabControl</TextBlock>

<sdk:TabControl x:Name="tab1" Canvas.Top="20" Canvas.Left="20"

<sdk:TabItem Header="Hình vuông">

<Rectangle Fill="BurlyWood" Width="100" Height="100"

Stroke="Khaki" StrokeThickness="5"/>

</sdk:TabItem>

<sdk:TabItem Header="Đa giác">

<Polygon Points="50,100,100,50,60,150" Fill="Violet"

Trang 30

Hình 3.19: TabControl

3.24 TextBox

- Được sử dụng nhập dữ liệu dạng text từ người dùng hoặc hiển thị văn bản

TextBox thường được dùng để chỉnh sửa văn bản đôi khi cũng được dùng ở chế độ chỉđọc, TextBox có thể hiển thị nhiều dòng văn bản

- Ví dụ:

< TextBlock x : Name ="ng1" Width ="100"> Tên người chơi 1: </ TextBlock >

< TextBox x : Name ="Nguoichoi1" Width ="130"/>

< TextBlock x : Name ="ng2" Width ="100"> Tên người chơi 2: </ TextBlock >

< TextBox x : Name ="Nguoichoi2" Width ="130"/>

- Ví dụ:

Trang 31

Hiển thị nội dung văn bản

Trang 32

DataGrid hỗ trợ các bảng tùy chọn định dạng và khả năng hiển thị hoặc ẩn các tiêu đề,các thanh trượt di chuyển.

Chương 4: Xử lý đồ họa trên Silverlight

4.1 Giới thiệu

- Silverlight cung cấp nhiều lựa chọn cho việc thêm các tính năng trực quan thú vị choứng dụng Ta có thể sử dụng vẽ, Shape, Path và những hình học phức tạp Những khu vựcđược xác định bởi dạng hình thì có thể tô hiệu ứng, như là ảnh, dải màu hoặc là đoạnvideo

- Dưới đây là cá đối tượng đồ họa như Ellipse, Line, Path, Geometries…

4.2 Shapes và Drawing

- Trong silverlight, Shapes là kiểu UIElement nên ta có thể dễ dàng hiển thị một đốitượng dạng Shape lên màn hình Những Shape đều có chung những đặc tính dưới đây:

• Stroke: dùng để vẽ viền ngoài của Shape

• StrokeThickness: độ dày của viền ngoài của Shape

• Fill: Mô tả cách phía bên trong của Shape được vẽ

Trang 33

• Data: là một đặc tính chỉ rõ tọa độ và các đỉnh được định nghĩa tùy theo thông tinđầu vào.

< Canvas Height ="300" Width ="400">

<! Vẽ một đường thẳng nằm ngang từ tọa độ (0,100) đến (200,100) >

< Line X1 ="0" Y1 ="100" X2 ="200" Y2 ="100" Stroke ="Blue" StrokeThickness ="2"/>

<! Vẽ một đường thẳng từ tọa độ (0,0) đến (200,200) >

< Line X1 ="0" Y1 ="0" X2 ="200" Y2 ="200" Stroke ="Blue" StrokeThickness ="2"/>

<! Vẽ một đường thẳng từ tọa độ (0,0) đến (200,200)

và dịch chuyển nó tới gốc tọa độ mới thêm 100px về phía bên phải >

< Line X1 ="0" Y1 ="0" X2 ="200" Y2 ="200" StrokeThickness ="4" Canvas.Left ="100">

< Line.Stroke >

< RadialGradientBrush GradientOrigin ="0.5,.5"

Center =".5,.5" RadiusX ="0.5"

RadiusY ="1.5">

< GradientStop Color ="Red" Offset ="0"/>

< GradientStop Color ="Blue" Offset ="1"/>

</ RadialGradientBrush >

</ Line.Stroke >

</ Line >

</ Canvas >

Trang 34

4.2.3 Path

- Lớp Path cho phép bạn vẽ những hình cong và những hình phức tạp Những hình cong

và dạng hình (Shape) được diễn tả thông qua việc sử dụng đối tượng Geometry Để sửdụng Path, bạn tạo một Geometry và dùng nó để xét cho đặc tính Data của đối tượngPath Có nhiều loại đối tượng Geometry khác nhau để bạn lựa chọn: LineGeometry,RectangleGeometry… Để tạo những dạng hình phức tạp hoặc hình tròn ta sử dụngPathGeometry

Thẻ <Path /> được sử dụng để tạo đường cong Bezier

Thuộc tính Data="M 10,100 C 100,0 200,200 300,100 z" khai báo cácthông số tạo nên một Path Trong đó M 10,100 nghĩa là đường cong bắt đầu từ điểm cótọa độ (10,100) tính theo hệ tọa độ của Canvas chứa Path này Các thông số của thuộctính Data có phân biệt chữ hoa, chữ thường Nếu là chữ hoa thì tọa độ điểm được tínhtheo vị trí tuyệt đối, chữ thường thì tọa độ được tính theo vị trí tương đối Ví dụ, M khaibáo tọa độ điểm bắt đầu của Path tính theo vị trí tuyệt đối, còn nếu thay bằng m thì sẽhiểu là vị trí tương đối Ký tự C dùng để khai báo hai điểm điều khiển (Control Point) củađường cong Ví dụ với C 100,0 200,200 thì hai điểm điều khiển sẽ có tọa độ là(100,0) và (200,200) Sau hai điểm điều khiển là điểm kết thúc của đường cong, trong ví

dụ trên, tọa độ điểm kết thúc là (300,100)

- Ví dụ sau sử dụng cú pháp rút gọn để biểu diễn một dạng hình phức tạp

<Path Stroke="DarkGreen" StrokeThickness="3"

Data="M 80,200 A 100,50 45 1 0 100,50" />

Trang 35

- M: Chữ cái M đại diện cho một hành động di chuyển và di chuyển đến điểm nhất định từ điểm hiện tại

· Cú pháp M điểm bắt đầu

· Ví dụ: M 80,200 lệnh di chuyển từ điểm hiện tại đến điểm (80,200)

- L: Vẽ một đường thẳng giữa điểm hiện tại và điểm kết thúc quy định

- C: điểm hút, tạo ra một đường cong giữa 2 điểm quy định

· Cú pháp: C ĐiểmĐầuTiên Điểm2 ĐiểmĐượcTạoRa

ĐiểmĐầuTiên: quyết định tiếp tuyến bắt đầu của đường cong.

Điểm2: quyết định tiếp tuyến kết thúc của đường cong.

Trang 36

Vẽ bàn cờ caro

Xaml:

< Canvas Canvas.Left ="20" Width ="490" Height ="490" Canvas.Top ="30">

<! Vẽ một đường thẳng từ tọa độ (4,180) đến (490,180)

và dịch chuyển nó tới gốc tọa độ mới thêm 30px về phía dưới cứ như vậy ta sẽ vẽ được

các đoạn thẳng tiếp theo Tương tự cho các đường dọc >

< Path Width ="420" Height ="1" Canvas.Left ="4" Canvas.Top ="30" Stretch ="Fill"

Trang 37

< Path Width ="1" Height ="420" Canvas.Left ="270" Canvas.Top ="4" Stretch ="Fill"

Trang 38

<Polygon Points="20,20 300,20 300,300 20,300" Stroke="Black"

Phân biệt 2 thuộc tính của FillRule là EvenOdd và Nonzero

- FillRule=Nonzero(Ký hiệu trong Data là F1)

<! <Canvas Height="300" Width="400"> >

- FillRule= EvenOdd (Ký hiệu trong Data là F0)

Trang 39

4.2.6 Rectangle

- Một hình chữ nhật (Rectangle) được xác định bởi hai đặc tính rộng và cao Để xác định

vị trí của Rectangle trong container chứa chúng ta sử dụng thuộc tính Margin hoặcCanvas.Left, Canvas.Top để tùy chỉnh Rectangle không hỗ trợ đối tượng con bên trongbởi vậy nếu muôn khu vực Rectangle chứa những đối tượng khác bạn có thể sử dụngCanvas Trong trường hợp này thì nên sử dụng RectangleGeometry

- Ví dụ:

< Rectangle Width ="100" Height ="100"

Fill ="Violet" Stroke ="Blue"

StrokeThickness ="2"/>

</ Canvas >

Trang 40

4.3 Geometries(Hình học)

Cung cấp các lớp cơ sở cho những đối tượng để xác định dạng hình học cho đối tượng.Đối tượng Geometry có thể sử dụng để làm vùng giao (clipping regions) và cũng nhưđịnh nghĩa dữ liệu cho đối tượng Path

- Ví dụ: vẽ một path sử dụng dữ liệu dạng EllipseGeometry

< Path Fill ="Gold" Stroke ="Orange" StrokeThickness ="3">

- Mỗi đối tượng PathFigure bao gồm một hoặc nhiều PathSegment

- Để phủ kín diện tích của PathGeometry thì mọi đối tượng PathFigure bạn phải xét thuộctính IsFilled là True và FillRule để xác định khu vực được fill

- Ví dụ:

Định dạng
Số trang	82
Dung lượng	3,81 MB
File đính kèm	Ứng dụng Silverlight viết game cờ caro C#.rar (6 MB)