WPF编游戏系列 之一 布局设计

原文:WPF编游戏系列 之一 布局设计

       本系列主要使用WPF和C#编写一个简单的小游戏（暂命名XMarket），意在通过该实例进一步学习和体验WPF，也欢迎广大同仁拍砖交流。言归正传，在编写一个软件前首先要思考软件的结构与布局，图片放在哪，按钮放在哪，都要先设计一下。当然本实例也只是简单布局，先上个图也好讲解。

从图中可以大概了解到本实例结构为上下布局：

1. 首先，是背景图片，不用多说就是为了好看，简单的一个Image就可以实现了。

<Image Source="image/backimage.jpg"></Image>

2. 在软件最上方的四个图标就是功能菜单，点击它们就会有相应的菜单显示在下面。这四个图标也是由Image构成，但是需要给它们附加一些事件，以达到想要的效果。后续文章中将介绍它们的功能。

       将图标放在Canvas中，通过Canvas.Left和Canvas.Top来调整图标位置，Width和Height调整图标大小，Tag标记一下图标内容，Cursor设为Hand当鼠标放到图标上时表现为可以点击状态。

<Canvas>
   <Image Source="image/home.png" Width="110" Height="110" Tag="My Home" 
          Canvas.Left="30" Canvas.Top="20" Cursor="Hand"></Image>
   <Image Source="image/market.png" Width="125" Height="125" Tag="My Shop"
          Canvas.Left="150" Canvas.Top="13" Cursor="Hand"></Image>
   <Image Source="image/new.png" Width="125" Height="125" Tag="Upgrade Shop" 
          Canvas.Left="275" Canvas.Top="13" Cursor="Hand"></Image>
   <Image Source="image/bank.png" Width="110" Height="110" Tag="Bank" 
          Canvas.Left="395" Canvas.Top="19" Cursor="Hand"></Image>
</Canvas>

3. 由于WPF的Image好像没有HTML <img> 的Title功能，所以如果显示图片标签，初步想用一个可移动的Textblock代替，所以在上面的Canvas中再加上一个Textblock。外加一个Border可以增加一些效果，Visibility默认要设为不可见。

<Border Name="imageTitleBorder" CornerRadius="5" 
        Background="AntiqueWhite" Visibility="Collapsed">
      <TextBlock Name="imageTitle"></TextBlock>
</Border>

 

4. 下方菜单处，还是以Grid来布局内容，Grid中的组件将由C#自动生成。将该Grid放入ScrollViewer中方便显示多行内容，同时ScrollViewer设为垂直滑动。

<Canvas Name="queryCanvas" Visibility="Collapsed">
    <Border Name="queryBorder" BorderThickness="7" CornerRadius="9" 
            Width="920" Height="440" Canvas.Left="40" Canvas.Top="160">
       <ScrollViewer  Name="queryScrollViewer" 
                      ScrollViewer.VerticalScrollBarVisibility="Visible">
           <Grid Name="queryGrid"></Grid>
       </ScrollViewer >
    </Border>
</Canvas>

5. 最后将代码整合起来如下，在Window中做了一些软件尺寸设置Height、Width、ResizeMode、WindowStartupLocation，以及软件的Icon。

<Window x:Class="XMarket.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="XMarket" Height="652" Width="1005" WindowStartupLocation="CenterScreen" 
    ResizeMode="NoResize" Icon="/XMarket;component/image/home.png">
    <Grid>
       <Image Source="image/backimage.jpg"></Image>
       <Canvas>
          <Image Source="image/home.png" Width="110" Height="110" Tag="My Home" 
                 Canvas.Left="30" Canvas.Top="20" Cursor="Hand"></Image>
          <Image Source="image/market.png" Width="125" Height="125" Tag="My Shop"  
                 Canvas.Left="150" Canvas.Top="13" Cursor="Hand"></Image>
          <Image Source="image/new.png" Width="125" Height="125" Tag="Upgrade Shop" 
                 Canvas.Left="275" Canvas.Top="13" Cursor="Hand"></Image>
          <Image Source="image/bank.png" Width="110" Height="110" Tag="Bank" 
                 Canvas.Left="395" Canvas.Top="19" Cursor="Hand"></Image>
          <Border Name="imageTitleBorder" CornerRadius="5" 
                  Background="AntiqueWhite" Visibility="Collapsed">
              <TextBlock Name="imageTitle"></TextBlock>
          </Border>
       </Canvas>
       <Canvas Name="queryCanvas" Visibility="Collapsed">
           <Border Name="queryBorder" BorderThickness="7" CornerRadius="9" 
                   Width="920" Height="440" Canvas.Left="40" Canvas.Top="160">
              <ScrollViewer Name="queryScrollViewer" 
                            ScrollViewer.VerticalScrollBarVisibility="Visible">
                  <Grid Name="queryGrid"></Grid>
              </ScrollViewer >
           </Border>
       </Canvas>
    </Grid>
</Window>

待续… …