1

TRƯỜNG ĐẠI HỌC KINH DOANH VÀ CÔNG NGHỆ HÀ NỘI
KHOA CƠNG NGHỆ THƠNG TIN

***

LUẬN VĂN TỐT NGHIỆP
ĐỀ TÀI:
TÌM HIỂU VỀ SILVERLIGHT VÀ ỨNG DỤNG LẬP TRÌNH
GAME CỜ CARO

Sinh viên:
Mã sinh viên:
Lớp:

Hà Nội, 2022


2

MỤC LỤC
LỜI NÓI ĐẦU
1 Lý do chọn đề tài

5

5

2. Đối tượng nghiên cứu 5
3. Giới hạn và phạm vi nghiên cứu

5

4. Mục đích nghiên cứu 5
5. Nhiệm vụ nghiên cứu 6
6. Phương pháp nghiên cứu

6

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

6

Chương 1. CƠ SỞ LÝ LUẬN
1.1.

Silverlight là gì? 7
1.1.1.

Đặc điểm 7

1.1.2. Kiến trúc và các thành phần
1.1.3. Mơ hình lập trình

7

9

1.1.4. Cơng nghệ và cơng cụ liên quan của Silverlight
1.2.


Layout trong silverlight 10
1.2.1.Canvas 11
1.2.2. StackPanel
1.2.3. Grid

12

13

1.3. Các control cơ bản 14
1.3.1. Border 14
1.3.2. Button 14
1.3.3. Calendar

15

1.3.4. CheckBox

15

10

7


3

1.3.5. ComboBox


16

1.3.6. ContentControl
1.3.7. DatePicker

17

1.3.8. GridSpliter

18

1.3.9. HyperlinkButton

16

19

1.3.10. Image 20
1.3.11. InkPresenter 20
1.3.12. ListBox

21

1.3.13. MediaElement

22

1.3.14. MultiSaleImage

22


1.3.15. PasswordBox

23

1.3.16. Popup 23
1.3.17. ProgressBar 23
1.3.18. RadioButton 24
1.3.19. RepeatButton
1.3.20. ScrollBar

25

25

1.3.21. Scrollviewer 26
1.3.22. Slider 26
1.3.23. TabControl 27
1.3.24. TextBox

28

1.3.25. TextBlock

28

1.3.26. ToolTip

29


1.3.27. DataGrid

29

1.4. Xử lý đồ họa trên Silverlight
1.4.1. Giới thiệu

30

30

1.4.2. Shapes và Drawing 30
1.4.3. Geometries(Hình học)

37


4

1.4.4. Bushes 39
1.5. Animation và Media 45
1.5.1. Animation

45

1.5.2. Media 50
1.6. Expression Blend

51


1.6.1. Ví dụ tạo hiệu ứng di chuyển giữa các ảnh

51

1.6.2. Hiệu ứng các Button trong chương trình

53

1.6.3. Hiệu ứng các con cờ khi chiến thắng

55

Chương 2. THỰC TRẠNG 57
2.1. Giới thiệu sơ lược về trò chơi caro

57

2.2. Giới thiệu sơ lược về đề tài 57
Chương 3. GIẢI PHÁP

58

3.1. Giải thuật của chương trình 58
3.1.1. Giải thuật xác định thắng thua cho một ván cờ 58
3.1.2.. Giải thuật tìm nước đi cho máy tính
3.1.3. Kỹ thuật sinh nước đi

58

62


3.2. Thiết kế chương trình và các hàm chính của chương trình
3.2.1. Thiết kế chương trình
3.2.2. Giao diện chính

66

66

66

3.2.3. Các hàm của chương trình 69
KẾT LUẬN
TÀI LIỆU THAM KHẢO

81
82


5

LỜI NĨI ĐẦ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 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”.
Qua q trình tìm hiểu em đã hồn thành bản báo cáo với nội dung sau:
Chương 1. Cơ sở lý luận
Chương 2. Thực trạng
Chương 3. Giải pháp
2. Đối tượng nghiên cứu
 Cơng nghệ Silverlight, xaml
 Chương trình chơi game caro


6

 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ựng chươ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ững kiế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ện cho 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ều tí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.


7


8

Chương 1. CƠ SỞ LÝ LUẬN
1.1.


Silverlight là gì?

a) Lý do ra đời Silverlight
 Các ứng dụng viết cho web thường gặp vấn đề về khả năng tương thích
với trình duyệt và hệ điều hành.
 Các công nghệ plug-in trên web trước đây khơng cho phép truyền tải
những dữ liệu hình ảnh chất lượng cao như 720p HDTV.
b) Silverlight là gì?
 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ên web.
 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#.
1.1.1. Đặ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ủa bạn. Silverlight cung cấp các tính năng sau:
1. Sự kết hợp của WPF và XAML
2. Mở rộng cho ngơn ngữ kịch bản
3. Sự tích hợp với các ứng dụng đã có
4. Sử dụng mơ hình ngơn ngữ lập trình trên nền tảng .Net
Framework và các công cụ để kết hợp.
5. Hỗ trợ mạng
6. Hỗ trợ ngơn ngữ tích hợp truy vấn (LINQ)


9


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

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)


10

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,
ngồ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:

1.1.3. Mơ hình lập trình
 Javascript API
 Managed API

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


11

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.

1.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ành cho 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
1.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ượng thành phần bằng cách sử dụng tọa độ tham chiếu. Bạn có thể sử


12

dụng lồng các Canvas với nhau và những thành phần bên trong của Canvas
phải là một UIElement. Trong nhiều trường hợp thì Cancas chỉ đóng vài trị
như một đối tượng để chứa đựng những đối tượng khá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õ đến Canvas., công nghệ IntelliSense sẽ hiện ra một menu pop-up cho thấy
các thuộc tính dạng AttachedProperty của Canvas. Khi đó, bạn có thể thấy
thuộc tính ZIndex. Tính chất của thuộ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 ZIndex thì đố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">
Fill="Violet">
</Rectangle >
</Grid>

13

Hình 2.1: sử dụng thẻ canvas
1.2.2. StackPanel
- Sắp xếp những thành phần bên trong nó thành một dịng và có thể hiển thị
theo hai kiểu ngang hoặc dọc.
- StackPanel hay được dùng khi muốn sắp xếp chỉ trong một phần của tồ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
Margin="10,10,10,30">
<Button Width="70" Height="30" Margin="30"></Button>
<Button Width="70" Height="30" Margin="30"></Button>
<Button Width="70" Height="30" Margin="30"></Button>
</StackPanel>


14

Hình 2.2: StackPanel
1.2.3. Grid
- Grid là layout panel mềm dẻo nhất, nó cho phép sắp xếp các control theo
dạnh bảng bao gồm nhiều dịng và nhiều cột. Về tính năng nó tương tự như
thẻ Table trong HTML.
- Mặc định Grid chưa một cột và một dòng.

- Để định nghĩa nhiều cột hoặc nhiều dòng ta dùng ColumnDefinitions và
RowDefinitions. Mỗi ColumnDefiniton và RowDefinitons trong
ColumnDefinitions và RowDefinitions xác định một dòng hoặc cột.
- Ví dụ sử dụng Grid
Margin="30,30,10,10">
<Grid.RowDefinitions>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />


15

<ColumnDefinition Width="80"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
Width="70" Height="30"/>
Width="70" Height="30"/>
Width="70" Height="30"/>
Width="70" Height="30"/>

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

Hình 2.3: Grid


16

1.3. Các control cơ bản
1.3.1. Border
- Border cung cấp một background, khu vực cho phép bạn nhúng vào đó một
thành phần duy nhất nhằm tạo ra hiệu ứng về đồ họa
- Ví dụ:
CornerRadius="30">
<TextBlock FontSize="20">Dùng border để bo góc </TextBlock>
</Border>

Hình 3.1: Border
1.3.2. Button
- Button kiểm sốt các phản ứng của người dùng qua các thiết bị đầu vào, bao
gồm các sự kiện, style.
- Ví dụ:
Background="Violet" Click="Button_Click" />

Hình 3.2: Button

17

1.3.3. Calendar
- Calendar cho phép người sử dụng chọn ngày tháng năm. Ta có thể sử dụng
các style khác nhau thơng qua Mode.
- Ví dụ:
<Grid x:Name="LayoutRoot" Background="White">
<sdk:Calendar Height="169" Name="calendar1" Width="230" />
</Grid>

Hình 3.3: Calendar

1.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 trung gian
- Ví dụ:
<Grid x:Name="LayoutRoot" Background="White">
Content="checkBox 2 trạng thái" IsThreeState="False" Margin="80,20,0,0 ">
</CheckBox>
IsThreeState="True" Content="ChecBox 3 trạng thái"
Margin="80,50,0,0"></CheckBox>
</Grid>


18

Hình 3.4: CheckBox
1.3.5. ComboBox
- Cho phép lựa chọn một Item từ một danh sách Item từ ComboBox
- Ví dụ:
<Grid x:Name="LayoutRoot" Background="White">
IsDropDownOpen="True" SelectedIndex="0" Width="90" Height="30">
Content="Item1"></ComboBoxItem>
Content="Item2"></ComboBoxItem>
Content="Item3"></ComboBoxItem>
Content="Item4"></ComboBoxItem>
</ComboBox>
</Grid>


19

Hình 3.5: ComboBox
1.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
<Grid x:Name="LayoutRoot" Background="White">
HorizontalAlignment="Center"VerticalAlignment="Center">
<!-- Tạo một nút với nội dung gán từ content-->

<Button Margin="10" Content="Đây là nội dung của 1 nút" />
<!--Tạo một nút với UIElement gán từ content-->
<Button Margin="10">
<Rectangle Height="40" Width="40" Fill="Violet"/>
</Button>

<CheckBox Margin="10">
<StackPanel Margin="3,0,0,0" Orientation="Horizontal">
<Ellipse Height="10" Width="10" Fill="Violet"/>
<TextBlock TextAlignment="Center" Text="A string of text">
</TextBlock>
</StackPanel>


20

</CheckBox>
</StackPanel>
</Grid>

Hình 3.6: ContentControl
1.3.7. DatePicker
- Cho phép người sử dụng lựa chọn ngày hoặc gõ trực tiếp vào texbox hoặc sử
dụng lịch thả xuống
DataPicker cung cấp một loạt các sự kiện hỗ trợ việc kiểm sốt lịch thả xuống
- Ví dụ:
<StackPanel>
<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>
Width="290" Height="40" />
</StackPanel>


21

Hình 3.7: DatePicker
1.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.
- Ví dụ:
Width="390" Height="390">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>


22

<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="1" Grid.Row="0" Grid.Column="0"/>
<TextBlock Text="2" Grid.Row="1" Grid.Column="1"/>
<TextBlock Text="3" Grid.Row="2" Grid.Column="2"/>
<TextBlock Text="4" Grid.Row="3" Grid.Column="3"/>
Grid.ColumnSpan="4" Height="5" HorizontalAlignment="Stretch"
VerticalAlignment="Top" ShowsPreview="True"/>
Grid.ColumnSpan="2" Height="5" HorizontalAlignment="Stretch"
ShowsPreview="True"/>
</Grid>

Hình 3.8: GridSpliter


23

1.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ụ:
<Grid x:Name="LayoutRoot" Background="White">
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=" />TargetName="_Blank" Margin="84,100,84,169"
FontSize="18" Width="200" Height="35"/>
</Grid>

Hình 3.9: HyperlinkButton
1.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">


24

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

Hình 3.10: Image
1.3.11. InkPresenter
- InkPresenter cung cấp các bản vẽ mặt để hỗ trợ tính năng TabletPC.
InkPresenter được dẫn xuất từ canvas nên có thể hiển thị một hoặc nhiều đối
tượng.
- Ví dụ:
XAML
<Grid x:Name="LayoutRoot" Background="White">
Stroke="Black"/>

Margin="50,50,0,0"
MouseLeftButtonDown="Caro_MouseLeftButtonDown"
LostMouseCapture="Caro_LostMouseCapture"
MouseMove="Caro_MouseMove"
Background="Transparent" Opacity="1"/>
</Grid>
Mã C#:
using System.Windows.Ink;
Stroke newStroke;


25

private void Caro_MouseLeftButtonDown(object sender,
MouseButtonEventArgs e)
{
Caro.CaptureMouse();
StylusPointCollection MySPC = new StylusPointCollection();
MySPC.Add(e.StylusDevice.GetStylusPoints(Caro));
newStroke = new Stroke(MySPC);
Caro.Strokes.Add(newStroke);
}
private void Caro_LostMouseCapture(object sender, MouseEventArgs e)
{
//nếu để thì kẻ được đường thẳng
//if (newStroke != null)
//{
//
newStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(Caro));
//}

newStroke = null;
}
private void Caro_MouseMove(object sender, MouseEventArgs e)
{
if (newStroke != null)
{