ĐỒ ÁN LẬP TRÌNH GAME CỜ CARO DÙNG C sharp VÀ silverlight

Xem thêm tài liệu tại: https://tailieuchatluong.com/......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 ra trườ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át triể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ết bà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ập trì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 trong giớ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ên má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”.

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 NHẬN XÉT GIẢNG VIÊN HƯỚNG DẪN 1

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

MỤC LỤC 5

LỜI CẢM ƠN 6

PHẦN I: MỞ ĐẦU 7

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

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

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

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

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

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

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

PHẦN II: NỘI DUNG 10

I Tìm hiểu Silverlight 10

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

Chương 2: Layout trong silverlight 14

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

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

Chương 5: Animation và Media 48

Trang 5

Chương 6: Expression Blend 54

II Lập trình game cờ caro 58

Chương I: Giới thiệu trò chơi caro 58

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

Chương III: Thiết kế chương trình và các hàm chính của chương trình 68

PHẦN III: KẾT LUẬN 81

1 Kết quả đạt được 81

2 Hạn chế của đề tài 81

3 Hướng phát triển của đề tài 81

4 Đề nghị ý kiến 81

PHẦN IV: TÀI LIỆU THAM KHẢO 82

Trang 6

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 7

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

Trang 8

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

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

 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

Trang 9

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

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 10

PHẦN II: NỘI DUNG

 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#

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 11

6 Hỗ trợ ngôn ngữ tích hợp truy vấn (LINQ)

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ácthành phần và dịch vụ liên quan khác

Trang 12

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

(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ầngiao diện người dùng

Trang 13

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ệc tí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

Window

Communication

Foundation

(WCF)

Cung cấp các tính năng để đơn giản hóa việc truy cập dữ liệu từ

xa Cơ chế này bao gồm một đối tượng trình duyệt, HTTP request

và HTTP Response, RSS, JSON, POX, và các SOAP

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

 Javascript API

 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

Trang 14

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.

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ác nhau đó 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

Trang 15

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

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

Trang 16

- 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 Orientation="Horizontal" Background="Green" Margin="10,10,10,30">

< Button Width="70" Height="30" Margin="30"></ Button >

Trang 17

- 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

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

</Border>

Trang 18

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

</Grid>

Hình 3.3: Calendar

Trang 19

3.4 CheckBox

- Cho phép người dùng lựa chọn 3 trạng thái đánh dấu, bỏ đánh dấu và trạng thái trunggian

- Ví dụ:

<CheckBox Name="checkbox1" ClickMode="Release" Content="checkBox 2 trạng thái"

IsThreeState="False" Margin="80,20,0,0 "></CheckBox>

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

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

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

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

</ComboBox>

</Grid>

Trang 20

Hình 3.5: ComboBox

3.6 ContentControl

- ContentControl có các dẫn xuất như Button, panel Ta có thể tùy chỉnh ContentControl thông qua template.

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

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

Trang 21

- Ví dụ:

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

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.

Trang 22

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

< 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"/>

- Ví dụ:

<TextBlock Text="HyperlinkButton"

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

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

Foreground="Blue"/>

<HyperlinkButton Content=">> vào trang google"

NavigateUri="http://www.google.com.vn/"

TargetName="_Blank" Margin="84,100,84,169"

FontSize="18" Width="200" Height="35"/>

</Grid>

Trang 23

Hình 3.9: HyperlinkButton

3.10 Image

- Hiển thị hình ảnh trong định dạng jpeg hoặc png

- Ví dụ:

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

< Image Source="Sunset.jpg"></ Image >

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

< Rectangle Height="400" Width="400" Margin=" 50,40,0,0" Stroke="Black"/>

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

Trang 24

privatevoid Caro_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {

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

//if (newStroke != null)

Trang 25

3.12 ListBox

- ListBox chứa một danh sách các item, item có thể là một đoạn văn bản hay một control

- Ví dụ:

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

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

VerticalAlignment="Top" Width="207" >

<TextBlock>TextBlock</TextBlock>

Trang 26

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

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

< 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)

Trang 27

{

Border border = new Border ();

border.BorderBrush = new SolidColorBrush ( Colors Blue);

border.BorderThickness = new Thickness (5.0);

< 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"/>

</ StackPanel >

</ Border >

</ Grid >

Hình 3.14: ProgressBar

Trang 28

3.18 RadioButton

- 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"/>

staticint clicks = 0;

privatevoid RepeatButton_Click(object sender, RoutedEventArgs e)

{

clicks += 1;

ClickTextBlox.Text = "Số lần Clicks: " + clicks;

}

Trang 29

< 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"/>

</ ScrollViewer >

</ StackPanel >

Hình 3.17: Scrollviewer

Trang 30

3.22 Slider

- Slider cho phép người dùng lựa chọn từ một loạt các giá trị bằng cahs di chuyển dọctheo một thanh ngang

- Ví dụ:

< TextBlock > Basic Slider </ TextBlock >

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

<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"

Stroke="Blue" StrokeThickness="5"/>

Trang 31

- Đượ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"/>

</ StackPanel >

Hình 3.20: TextBox

Trang 32

3.25 TextBlock

- TexBlock hiển thị nội dung văn bản, bạn có thể gán các nội dung của một TexBlockbằng cách sử dụng nguồn text Ngoài ra có thể gán TextBlock bằng một tập hợp các đốitượng text

- Ví dụ:

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

Trang 33

Hình 3.22: ToolTip

3.27 DataGrid

- DataGrid cung cấp một cách linh hoạt để hiển thị một tập hợp các dữ liệu trong cáchàng và cột

DataGrid hỗ trợ nhiều Style hiển thị dữ liệu trong các cột hoặc hàng

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 khuvự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…

Trang 34

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ẽ

 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"

Trang 35

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

RadiusY ="1.5">

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

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

- 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à

Trang 36

(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"

· 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

Trang 37

- 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.

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 38

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

Trang 39

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

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

Trang 40

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)

Định dạng
Số trang	83
Dung lượng	3,76 MB
File đính kèm	code.rar (6 MB)