Silverlight Tips of the Day 系列翻译与领悟#4

Silverlight Tip of the Day #4: Building the Game Interface Using the Grid Control.

Silverlight提供了<Grid> 控件用来规划你游戏的界面。这个控件也支持在grid中内嵌grid，就像Word中表格可以内嵌表格一样。

在创建我们的游戏"Fireball"的界面之前，先让我们来看一下最终的界面效果:

 

游戏的UI是存放在Page.xaml文件里的。在添加 <Grid> 控件之前，你要先设置Silverlight控件的Width和Height。这里我们使用800x728。你可以在Page.Xaml文件的UserControl里设置Width和Height属性。

<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 - 在这个游戏里这个属性只是为了辅助设计用的。所以你只能使用点线。 这里你可以设置这个属性为"True",但是当你完成设计后记得把这个属性设置为"False"否则你的界面上会有一些丑陋的线条。

我们将使用3列。在第二列我们内嵌另一个三行的 <Grid> 控件。

列 1: 这是左边界条。

列 2: 另外一个三行的 <Grid> 控件:

行 1: 写着"Silverlight Fireball"的标题栏。 
行 2: 游戏的地图区域。 
行 3: 聊天窗口和其他按钮。

列 3: 这是右边界条。

为了创建这三列，我们在Page.xaml中加入如下的XAML:

<Grid  Background="Black" ShowGridLines="True"> 

      <Grid.ColumnDefinitions> 

          <ColumnDefinition Width="12"/> 

          <ColumnDefinition Width="776"/> 

          <ColumnDefinition Width="12"/>  

      </Grid.ColumnDefinitions> 

</Grid> 

我们设置第一列和最后一列Width="12"，因为它们只是笔直的边界条。因为第二列是主要的区域，用来放标题栏，游戏地图，聊天窗口，所以设置第二列 Width="776"。

如果你在预览窗口中查看，你可以看到如下界面:

 

现在，让我们在第二列内嵌另一个上面介绍过的Grid。我们先给第二个Grid指定Grid.Column=1 (列数从0开始)。 这样写就是告诉Silverlight把这个grid放置在第一个grid的第2列。

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

设置第一行Height = 62, 这是标题栏的高度。
设置第二行Height=538, 这是地图的高度。
设置第三行Height=128, 这是聊天窗口的高度。

预览

现在，让我们添加一些图片!

Step 1: 在solution explorer中右键点击Fireball项目，选择 Create New Folder。创建一个叫 images的目录。

Step 2: 右键点击下图，选择 Save Target As 并且保存图片到刚刚建的 images目录中。

 

Step 3: 右键点击新建的 images目录，选择 Add | Existing Item。将所有图片添加到项目中，否则你没法显示图片。也就是说，仅仅把文件放在目录下是无法让工程找到它们的，一定要把它们加入工程，才能找到。

Step 4: 在grid上添加图片。对每个图片元素，我们将声明一个 <Image> 控件。Silverlight中所有的控件允许你指定它们显示在哪一行哪一列上。 Canvas.ZIndex 指定画的顺序，因为我们希望边界条永远在最上面，所以我们把这个值设置为"1001"。我们的左边界条和右边界条如下声明:

<Image Canvas.ZIndex="1001" Grid.Column="0" Source="images/column.png"/>

<Image Canvas.ZIndex="1001" Grid.Column="2" Source="images/column.png"/>

这样可以把边界条放在第一列和第三列的第一个<Grid>里

顶上的面板和标题栏组织在一个Canvas对象中并放置在第二个Grid的第一行中。你可以把 "Silverlight Fireball" 图片使用 Canvas.Left 以及 Canvas.Top 属性。 如果你没有设置，那么这些属性默认是0。

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

最终完成的代码如下:

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

 

源代码下载

 

原文链接

转载于:https://www.cnblogs.com/ueqtxu/archive/2008/12/10/part-iv-building-the-game-interface-using-the-grid-control.html