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>
Sample2 :
<UserControl x:Class="FLogic.Workflow.Silverlight.Controls.FormRuntime.Attachment"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="200" >
<Border x:Name="MyBorder" BorderThickness="3, 3, 3, 3">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF617584" Offset="1"/>
<GradientStop Color="#FF718597" Offset="0.36"/>
</LinearGradientBrush>
</Border.BorderBrush>
<ItemsControl>
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"></ColumnDefinition>
<ColumnDefinition Width="30"></ColumnDefinition>
<ColumnDefinition Width="30"></ColumnDefinition>
<ColumnDefinition Width="30"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button x:Name="btnAdd" Width="30" Height="30" Content="+" Grid.Column="0" Grid.Row="0" IsEnabled="False"></Button>
<Button x:Name="btnRemove" Width="30" Height="30" Content="-" Grid.Column="1" Grid.Row="0" IsEnabled="False"></Button>
<Button x:Name="btnSave" Width="30" Height="30" Content="Save" Grid.Column="2" Grid.Row="0" IsEnabled="False"></Button>
<Button x:Name="btnView" Width="30" Height="30" Content="View" Grid.Column="3" Grid.Row="0" IsEnabled="False"></Button>
<TextBlock x:Name="txtNumOfAttachments" Text="No. of attachments: 6" Grid.Column="4" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Right"></TextBlock>
<TextBox x:Name="CategoryReferencePath" Height="30" IsReadOnly="True" Background="DarkGray" Grid.ColumnSpan="5" Grid.Row="1"></TextBox>
<Border Grid.ColumnSpan="5" Grid.Row="2" Background="White" BorderThickness="0, 9, 0, 0" Height="133">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF617584" Offset="1"/>
<GradientStop Color="#FF718597" Offset="0.36"/>
</LinearGradientBrush>
</Border.BorderBrush>
<ItemsControl x:Name="MyItems">
</ItemsControl>
</Border>
</Grid>
</ItemsControl>
</Border>
</UserControl>