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

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


............................................................................................................
............................................................................................................

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


............................................................................................................
............................................................................................................
............................................................................................................

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


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

GIẢNG VIÊN HƯỚNG DẪN

MỤC LỤC

4


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 trong
quá 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ủa
nhó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 mong
nhậ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 được
hoà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
Sinh viên thực hiện
Nguyễn Thành Trường
Bùi Thị Thanh

5


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

 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ình

Phầ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ự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


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.

8


PHẦN II: NỘI DUNG
I. Tìm hiểu Silverlight
Chương 1: Tổng quan về Silverlight
I.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#.
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ủ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.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.
Thành phần
Diển tả
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
bao gồm các control cho dữ liệu cho người dùng nhập, thiết bị đa ph
phân quyền số, trình bày dữ liệu, đồ họa vector, chữ, hình ảnh động.
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
tương việc tương tác dữ liệu, khả năng mở rộng các control, mạng, g
và CLR
Cà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
đầu tiên, tiếp sau đó chỉ cung cấp cơ chế tự động cập nhật và tương
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


Tính năng
Dữ liệu vào (input)
Trình bày giao diện người
dùng (UI Rendering)
Thiết bị nghe nhìn (Media)

Mô tả
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ản
thiết bị đầu vào khác
Trình bày vector và các đồ hoạ ảnh bitmap, ảnh động, và văn bản

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 n

và .MP3
Hỗ trợ mở rộng cho các control để có khả năng tùy chỉnh về kiểu dáng và
Cho phép khả năng xếp đặt vị trí động các thành phần giao diện người dù
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 d

Controls
Xếp đặt Layout
Trình bày dữ liệu
(Data Binding)
DRM
Khả năng Quản lý phân quyền số
XAML
Cung cấp trình phân tách cho XAML
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:
Tính năng
Mô tả
Hỗ trợ ngôn ngữ truy vấn tích hợp (LINQ) và LINQ với đặc tả XML, dễ
Data
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
và các lớp biên đổi hóa (serialization) để xử lý dữ liệu
Thuộc thư viện của .Net Framework, nó cung cấp các chức năng lập trìn
Base class library
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
hóa.
Window Communication
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ơ c

Foundation
gồm một đối tượng trình duyệt, HTTP request và HTTP Response, RSS,
(WCF)
và các SOAP
Common language runtime
Cung cấp việc quản lý bộ nhớ, dọn dẹp bộ nhớ thừa, xử lý ngoại lệ…
(CLR)
Windows Presentation
Cung cấp các control giầu tính năng như Button, Calendar, CheckBox, D
Foundation controls
DatePicker, HyperlinkButton, ListBox, RadioButton, and ScrollViewer.
(WPF)
Dynamic language runtime
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
(DLR)
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

11




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.

12


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à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
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ử 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">
<Rectangle Width="200" Height="100" Canvas.Left="20" Canvas.Top="53" Fill="Violet">

13


</Rectangle >
</Grid>

Hình 2.1: sử dụng thẻ canvas
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 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 Orientation="Horizontal" Background="Green" 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>

Hình 2.2: StackPanel
14


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

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

Height="30"/>
Height="30"/>
Height="30"/>
Height="30"/>

- 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

15


Hình 2.3: Grid

Chương 3: Các control cơ bản
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ụ:
<Border Background="Yellow" Width="350" Padding="40" CornerRadius="30">

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

Hình 3.1: Border
3.2. Button
- Button kiểm soá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ụ:

Click="Button_Click" />

Hình 3.2: Button

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


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

Hình 3.3: Calendar
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">
IsThreeState="False" Margin="80,20,0,0 "> </CheckBox>
Content="ChecBox 3 trạng thái" Margin="80,50,0,0"></CheckBox>
</Grid>

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ụ:
<Grid x:Name="LayoutRoot" Background="White">
SelectedIndex="0" Width="90" Height="30">
<ComboBoxItem x:Name="ComboBox1" Content="Item1"></ComboBoxItem>
<ComboBoxItem x:Name="ComboBox2" Content="Item2"></ComboBoxItem>
<ComboBoxItem x:Name="ComboBox3" Content="Item3"></ComboBoxItem>
17


<ComboBoxItem x:Name="ComboBox4" Content="Item4"></ComboBoxItem>
</ComboBox>
</Grid>

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

<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>
<!--Tạo một button với một panel chưa nhiều đối tượng gán từ content-->
<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>
</CheckBox>
</StackPanel>
</Grid>

18


Hình 3.6: ContentControl
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 soá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>
<sdk:DatePicker Name="dp2" SelectedDateFormat="Long" Width="290" Height="40" />
</StackPanel>

Hình 3.7: DatePicker

19


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ụ:
<Grid ShowGridLines="True" Canvas.Top="60" Canvas.Left="25" Width="390" Height="390">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<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"/>
HorizontalAlignment="Stretch" VerticalAlignment="Top" ShowsPreview="True"/>
HorizontalAlignment="Stretch" ShowsPreview="True"/>
</Grid>

Hình 3.8: GridSpliter
20


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

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>

Hình 3.10: Image
21


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">
<Rectangle Height="400" Width="400" Margin=" 50,40,0,0" 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;
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)
{
newStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(Caro));
}
}

22


Hình 3.11: InkPresenter
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ụ:
<TextBlock Text="ListBox chứa các item" Margin="102,90,0,0"/>
Margin="102,111,0,0" Name="listBox1"
VerticalAlignment="Top" Width="207" >
<TextBlock>TextBlock</TextBlock>
<Button Content="Button"/>
<Rectangle Fill="Violet" Height="20" Width="140"></Rectangle>
<Ellipse Fill="Yellow" Height=" 30" Width="160"/>
</ListBox>

Hình 3.12: LisBox

23


3.13. MediaElement
- Các MediaElement kiểm soát nội dung Audio hoặc Video. MediaElement cung cấp một
vùng chữ nhật có thể hiển thị video hoặc audio trên đó.
- Ví dụ:
CurrentStateChanged="media_CurrentStateChanged"
Width="300" Height="300"/>

3.14. MultiSaleImage
- MultiScalelmage cho phép người dùng mở một hình ảnh cho phép phóng to thu nhỏ
thông qua công nghệ DeepZoom.
- Ví dụ:
XAML:
<Grid x:Name="LayoutRoot" Background="White">

MouseEnter="caleimage_MouseEnter"/>
</Grid>

C#:
private void caleimage_MouseEnter(object sender, MouseEventArgs e)
{
if (caleimage.UseSprings==false)
{
caleimage.UseSprings = true;
}
this.caleimage.ZoomAboutLogicalPoint(3, 0.5, 0.5);
}

3.15. PasswordBox
- PasswordBox được sử dụng để nhập vào thông tin mật khẩu, ký tự hiển thị chỉ là ký tự

đại diện
- Ví dụ:
<StackPanel>
<TextBlock Text="Mật khẩu" Width="116" Margin="10,20,0,0" />
Height="24" />
</StackPanel>

24


Hình 3.13: PasswordBox
3.16. Popup

- Popup luôn luôn xuất hiện lên trên cùng cửa sổ ứng dụng hữu ích cho việc hiển thị
thông báo cho một nhiệm vụ.
- Ví dụ:
XAML:
<StackPanel x:Name="LayoutRoot" Background="White">
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);
}

3.17. ProgressBar
- ProgressBar hiển thị cho biết tiến trình đang hoạt động bằng việc thay đổi giá trị thay
đôi.
- Ví dụ:
<Grid Height="250" Width="300">
<Border BorderThickness="5" BorderBrush="Black" >
<StackPanel Background="Violet">
<TextBlock HorizontalAlignment="Center" Margin="10" Text="value _based progress bar"/>
Height="15" IsIndeterminate="False"/>
Margin="10" Text="Indeterminate progress bar(VÔ HẠN)"/>

Height="15" IsIndeterminate="True"/>
</StackPanel>
</Border>
</Grid>

25