Silverlight cung cấp một <Grid>
control để bạn có thể lên tạo lập và bố trí các giao diện người dùng một cách
rất dễ dàng trong các trò chơi của bạn. Control này còn hỗ trợ việc ghi dữ liệu
hay các đối tượng vào các lưới tương tự như cách mà bạn chèn các đối tượng vào
trong những bảng trong Word.
Trước khi
bắt đầu tạo giao diện game "Fireball" của chúng ta, hãy xem kết quả
cuối cùng đạt được:
Giao diện
cho trò chơi sẽ được chứa trong file Page.xaml. Điều đầu tiên mà bạn phải làm trước
khi thêm công cụ <Grid> là đặt chiều dài và chiều cao của Silverlight control của bạn. Trong trường hợp
này, chúng ta sẽ đặt là 800x728. Bạn có thể làm điều này bằng cách thêm
thuộc tính Width và Height ở UserControl
trong trang Page.Xaml như sau:
<UserControl x:Class="Fireball.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="728">
Chúng ta sẽ
sử dụng những thuộc tính của control <Grid>
sau:
- Background - Màu nền
của control. Mình
sẽ cho là màu đen: "black".
- ShowGridLines - Thuộc tính này chỉ dùng cho
việc sử dụng tạo layout mà thôi. Vì vậy, bạn chỉ
có những dòng nhỏ. Và
bây giờ, Bạn sẽ gán cho nó giá trị "True", nhưng khi bạn làm
đừng quên gán thuộc tính của nó sang "False" hoặc bạn sẽ có
những dòng nhỏ nhỏ ngớ ngẩn trên giao diện của bạn.
Trong trường
hợp này , chúng ta sẽ có 3 cột. Tại cột thứ hai, chúng ta sẽ chèn vào <Grid> control
3 dòng.
Cột 1: Đây là thanh border bên trái.
Cột 2: This has another <Grid> control with three rows:
Dòng 1: Banner sẽ có dòng "Silverlight Fireball".
Dòng 2: Khu vực dành cho Game Map.
Dòng 3: Cửa sổ tán gẫu các button khác.
Column 3: Đây là thanh border bên phải.
Để tạo ra 3
cột chúng ta sẽ có những dòng XAML trong trang Page.xaml như sau:
<Grid Background="Black" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="776"/>
<ColumnDefinition Width="12"/>
</Grid.ColumnDefinitions>
</Grid>
Chúng ta sẽ
cho cột đầu tiên và cột cuối cùng đều có chiều rộng là Width="12" vì
cột này chỉ dành cho thanh border nhỏ. Và chiều rộng của cột thứ hai là Width="776" vì đây là không gian con
dành cho banner, game map và chat window.
Nếu bạn nhìn
vào cửa sổ xem trước, bạn sẽ thấy giao diện bây giờ của bạn như sau:
Và bây giờ, hãy
chèn 1 Grid khác trong cột thứ hai của gird đầu tiên để có 3 dòng mà chúng ta
đã xác định ở trên. Để làm việc này, trong Grid thứ hai hãy viết Grid.Column=1
(mặc định là chỉ số 0). Điều này sẽ cho Silverlight
biết là chèn vào grid control này tại cột thứ hai của grid đầu tiên.
<Grid Background="Black" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="12"/>
<ColumnDefinition
Width="776"/>
<ColumnDefinition Width="12"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition
Height="62"></RowDefinition>
<RowDefinition Height="538"></RowDefinition>
<RowDefinition
Height="128"></RowDefinition>
</Grid.RowDefinitions>
</Grid>
</Grid>
Cho dòng đầu tiên có chiều cao Height = 62, đây
là chiều cao của banner của bạn.
Cho dòng thứ
hai có chiều cao là Height=538, chiều
cao bản đồ của bạn.
Cho dòng thứ ba có chiều cao là Height=128, đây là chiều cao của cửa sổ chat.
Đây rồi:
Nào, bây giờ
hãy thêm vào một số các graphic!
Bước 1: Trong solution explorer, Click chuột
phải lên Fireball project và chọn Create New Folder. Tạo 1 folder tên là images.
Bước 2: Chuột phải lên những hình sau, chọn
Save Target As và lưu những hình này vào thư mục mới images.
Bước 3: Click chuột phải vào thư mục images, chọn Add | Existing Item. Add tất cả
các hình vào project, nếu không các hình ảnh mà bạn lưu vào thư mục images sẽ
không được load lên và hiển thị. Tức là, không chỉ là có các hình ảnh trong thư
mục đó là được mà bạn phải add nó vào project hay là cho biết các hình ảnh đó ở
đâu.
Bước 4: Thêm các graphics vào trong lưới (grid)
của bạn. Với mỗi hình, chúng ta sẽ khai báo một tab <Image>.
Tất cả những control trong Silverlight cho phép bạn xác định dòng nào cột nào
mà bạn muốn hiển thị đối tượng của bạn. Thuộc tính Canvas.ZIndex
xác định thứ tự drawing, vì chúng ta luôn muốn chúng ở trên đầu trang nên tôi
chọn giá rị "1001". Còn thanh bên trái và bên phải chúng ta khai báo:
<Image Canvas.ZIndex="1001" Grid.Column="0" Source="images/column.png"/>
<Image Canvas.ZIndex="1001" Grid.Column="2" Source="images/column.png"/>
Điều này sẽ đặt border bar vào cột 1 và cột 3 của <Grid> đầu
tiên:
Bảng trên
cùng và cái banner Silverlight Fireball sẽ được nhóm lại trong control Canvas và
được đặt nơi dòng đầu tiên của Grid thứ hai và được định nghĩa như sau. Bạn có
thể canh chỉnh vị trí của hình "Silverlight Fireball" sử dụng thuộc tính Canvas.Left
và Canvas.Top. Mặc định, những thuộc tính này
là 0 nếu nó không được thiết lập.
<Canvas
Canvas.ZIndex="1001" Background="Black" x:Name="LogoCanvas" Canvas.Top="0" Grid.Row="0">
<Image Source="images/toppanel.png"/>
<Image Canvas.Top="5" Canvas.Left="0" Source="images/silverlightfireball.png"/>
</Canvas>
Cửa sổ chat sẽ
có nhiều phần và được khai báo như sau:
<Canvas
Canvas.ZIndex="1001" Background="Black" Canvas.Top="0" Grid.Row="2" Grid.Column="0">
<Image Source="images/panel.png"/>
<Image Canvas.Top="20" Canvas.Left="170" Source="images/chatwindow.png"/>
<Button Canvas.Top="30" Canvas.Left="720" Width="50" Background="Brown" Content="Send" ></Button>
</Canvas>
Cuối cùng, chúng
ta đã hoàn thành mã XAML trong trang Page.xaml như sau:
<UserControl x:Class="Fireball.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="728">
<Grid Background="Black" ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="776"/>
<ColumnDefinition
Width="12"/>
</Grid.ColumnDefinitions>
<Image Canvas.ZIndex="1001" Grid.Column="0" Source="images/column.png"/>
<Grid Grid.Column="1" ShowGridLines="False">
<Grid.RowDefinitions>
<RowDefinition Height="62"></RowDefinition>
<RowDefinition
Height="538"></RowDefinition>
<RowDefinition Height="128"></RowDefinition>
</Grid.RowDefinitions>
<Canvas Canvas.ZIndex="1001" Background="Black" x:Name="LogoCanvas" Canvas.Top="0" Grid.Row="0">
<Image Source="images/toppanel.png"/>
<Image Canvas.Top="5" Canvas.Left="0" Source="images/silverlightfireball.png"/>
</Canvas>
<Canvas x:Name="MapCanvas" Canvas.Top="0" Grid.Column="1">
</Canvas>
<Canvas Canvas.ZIndex="1001" Background="Black" Canvas.Top="0" Grid.Row="2" Grid.Column="0">
<Image Source="images/panel.png"/>
<Image Canvas.Top="20" Canvas.Left="170" Source="images/chatwindow.png"/>
<Button
Canvas.Top="30" Canvas.Left="720" Width="50" Background="Brown" Content="Send" ></Button>
</Canvas>
</Grid>
<Image Canvas.ZIndex="1001" Grid.Column="2" Source="images/column.png"/>
</Grid>
</UserControl>
Thank you,
--Mike Snow
