模仿Smartphone的开始菜单效果

最近业余时间想做一个WM系统九宫格那样的效果出来，在网上找到一篇博文，链接：http://www.cnblogs.com/JustDI/archive/2008/07/15/1243150.html
看完文章后受了启发，决心自己也搞一个。JustDI 提供的思路是做一个控件，根据位置画图，因为我对GDI+没接触过，也没有编过控件，很多原理不清楚，所以想换其他的方式实现类似的效果。想了一下想到了一个最原始的方式，开始动手了。

开发平台: VS2008 + Windows Mobile 6 Standard SDK

     项目: smartphone application .net2.0

设计思路: 现在SP手机基本都是QVGA(320*240)的分辨率，九宫格菜单最多显示9个菜单项，而上下左右移动方向键就两种效果，一个是两个菜单项互换，一个是上下翻页。所以我就在控件中放入9个固定位置的PictureBox和Label控件，只需要在后台实现上面两种效果就可以了。（省去了自己绘图的工作，水平有待提高啊~~）

类名	描述
GridMenuItem	单个菜单项
GridMenuControl	菜单容器控件

 

一个菜单项有这样一些属性：默认图标，选中图标，文字，按键点击该菜单项还会调用某个方法。

 1 public class GridMenuItem
 2     {
 3         /// <summary>
 4         /// 子项文本说明
 5         /// </summary>
 6         public string Text
 7         {
 8             get;
 9             set;
         }
 
         /// <summary>
         /// 子项默认图标
         /// </summary>
         public Image Icon
         {
             get;
             set;
         }
 
         /// <summary>
         /// 子项选中图标
         /// </summary>
         public Image Icon2
         {
             get;
             set;
         }
 
         public delegateItemClick Click;
 
     }

     

菜单容器控件有一个属性存放所有菜单项。然后两个方法，ReDrawSelectedItem()用于实现两个菜单项互换效果，ReDrawAll()用于实现上下翻页效果。

部分代码：

  1 public partial class GridMenuControl : UserControl
  2     {
  3         public GridMenuControl()
  4         {
  5             InitializeComponent();
  6 
  7             Items = new List<GridMenuItem>();
  8             itemImageList = new PictureBox[] { itemImage0, itemImage1, itemImage2, itemImage3, itemImage4, itemImage5, itemImage6, itemImage7, itemImage8 };
  9             itemTextList = new Label[] { itemText0, itemText1, itemText2, itemText3, itemText4, itemText5, itemText6, itemText7, itemText8 };
 10         }
 11 
 12 
 13         private int topLeftIndex = 0;
 14         private int selectedOffset = 0;//0-8 当前选中项位置
 15         private int oldSelectedOffset = 0;//0-8 上一个选中项位置
 16         private PictureBox[] itemImageList = null;
 17         private Label[] itemTextList = null;
 18         public List<GridMenuItem> Items
 19         {
 20             get;
 21             set;
 22         }
 23 
 24         public int TopLeftIndex
 25         {
 26             get
 27             {
 28                 return topLeftIndex;
 29             }
 30         }
 31 
 32         public int SelectedOffset
 33         {
 34             get
 35             {
 36                 return selectedOffset;
 37             }
 38         }
 39 
 40 
 41         #region " 响应事件 "
 42         protected override void OnKeyDown(KeyEventArgs e)
 43         {
 44         }
 45 
 46         #endregion
 47 
 48         #region " 内部方法 "
 49         //向上移动
 50         private void MoveUp()
 51         {            
 52         }
 53 
 54         //向下移动
 55         private void MoveDown()
 56         {            
 57         }
 58 
 59         //向左移动
 60         private void MoveLeft()
 61         {
 62         }
 63 
 64         //向右移动
 65         private void MoveRight()
 66         {            
 67         }
 68 
 69         //两个菜单项互换
 70         private void ReDrawSelectedItem()
 71         {
 72             if (selectedOffset == oldSelectedOffset)
 73                 return;
 74 
 75             //focus leave
 76             itemImageList[oldSelectedOffset].Image = Items[topLeftIndex + oldSelectedOffset].Icon;
 77 
 78             //focus on
 79             if (Items[topLeftIndex + selectedOffset].Icon2 != null)
 80             {
 81                 itemImageList[selectedOffset].Image = Items[topLeftIndex + selectedOffset].Icon2;
 82             }
 83 
 84         }
 85 
 86         //上下翻页
 87         public void ReDrawAll()
 88         {
 89             for (int i = 0; i < 9; i++)
 90             {
 91                 if (topLeftIndex + i > Items.Count - 1)
 92                 {
 93                     itemImageList[i].Image = null;
 94                     itemTextList[i].Text = "";
 95                 }
 96                 else
 97                 {
 98                     if (i == selectedOffset && Items[topLeftIndex + i].Icon2 != null)
 99                     {
                         itemImageList[i].Image = Items[topLeftIndex + i].Icon2;
                     }
                     else
                     {
                         itemImageList[i].Image = Items[topLeftIndex + i].Icon;
                     }
                     itemTextList[i].Text = Items[topLeftIndex + i].Text;
                 }
 
             }
         }
         #endregion
 
 
     }

 

下面是测试的效果截图

 

这个是我觉得比较简单的实现模仿九宫格菜单的一种方式，但是目前有几个缺陷，不能自适应分辨率，不能放到控件工具箱。

还是希望以后有空做一个自己控制绘图的宫格菜单出来，至少还要支持12宫格和PPC系统的。

GridMenuControl源代码

 

本人水平有限，欢迎交流经验和结交有相同爱好的码友。