您的位置：首页 > 其它

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

2008-12-10 09:19 363 查看

SilverlightTipoftheDay#4:BuildingtheGameInterfaceUsingtheGridControl.

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

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





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

<UserControlx: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:写着"SilverlightFireball"的标题栏。

行2:游戏的地图区域。

行3:聊天窗口和其他按钮。


列3:这是右边界条。

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

<GridBackground="Black"ShowGridLines="True">

<Grid.ColumnDefinitions>

<ColumnDefinitionWidth="12"/>

<ColumnDefinitionWidth="776"/>

<ColumnDefinitionWidth="12"/>

</Grid.ColumnDefinitions>

</Grid>


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

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





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

<GridBackground="Black"ShowGridLines="True">

<Grid.ColumnDefinitions>

<ColumnDefinitionWidth="12"/>

<ColumnDefinitionWidth="776"/>

<ColumnDefinitionWidth="12"/>

</Grid.ColumnDefinitions>


<GridGrid.Column="1"ShowGridLines="True">

<Grid.RowDefinitions>

<RowDefinitionHeight="62"></RowDefinition>

<RowDefinitionHeight="538"></RowDefinition>

<RowDefinitionHeight="128"></RowDefinition>

</Grid.RowDefinitions>

</Grid>

</Grid>


设置第一行Height=62,这是标题栏的高度。

设置第二行Height=538,这是地图的高度。

设置第三行Height=128,这是聊天窗口的高度。

预览





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

Step1:在solutionexplorer中右键点击Fireball项目，选择CreateNewFolder。创建一个叫images的目录。

Step2:右键点击下图，选择SaveTargetAs并且保存图片到刚刚建的images目录中。





















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

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

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


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



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

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

<CanvasCanvas.ZIndex="1001"Background="Black"x:Name="LogoCanvas"Canvas.Top="0"Grid.Row="0">

<ImageSource="images/toppanel.png"/>

<ImageCanvas.Top="5"Canvas.Left="0"Source="images/silverlightfireball.png"/>

</Canvas>


聊天窗口由不同的控件组成，如下所示:

<CanvasCanvas.ZIndex="1001"Background="Black"Canvas.Top="0"Grid.Row="2"Grid.Column="0">

<ImageSource="images/panel.png"/>

<ImageCanvas.Top="20"Canvas.Left="170"Source="images/chatwindow.png"/>

<ButtonCanvas.Top="30"Canvas.Left="720"Width="50"Background="Brown"Content="Send"></Button>

</Canvas>


最终完成的代码如下:

<UserControlx:Class="Fireball.Page"

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"Height="728">


<GridBackground="Black"ShowGridLines="False">

<Grid.ColumnDefinitions>

<ColumnDefinitionWidth="12"/>

<ColumnDefinitionWidth="776"/>

<ColumnDefinitionWidth="12"/>

</Grid.ColumnDefinitions>

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

<GridGrid.Column="1"ShowGridLines="False">

<Grid.RowDefinitions>

<RowDefinitionHeight="62"></RowDefinition>

<RowDefinitionHeight="538"></RowDefinition>

<RowDefinitionHeight="128"></RowDefinition>

</Grid.RowDefinitions>

<CanvasCanvas.ZIndex="1001"Background="Black"x:Name="LogoCanvas"Canvas.Top="0"Grid.Row="0">

<ImageSource="images/toppanel.png"/>

<ImageCanvas.Top="5"Canvas.Left="0"Source="images/silverlightfireball.png"/>

</Canvas>

<Canvasx:Name="MapCanvas"Canvas.Top="0"Grid.Column="1">

</Canvas>

<CanvasCanvas.ZIndex="1001"Background="Black"Canvas.Top="0"Grid.Row="2"Grid.Column="0">

<ImageSource="images/panel.png"/>

<ImageCanvas.Top="20"Canvas.Left="170"Source="images/chatwindow.png"/>

<ButtonCanvas.Top="30"Canvas.Left="720"Width="50"Background="Brown"Content="Send"></Button>

</Canvas>

</Grid>

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

</Grid>

</UserControl>


源代码下载

原文链接
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航