.Net Micro Framework研究―应用实例

试验平台：.Net Micro Framework 模拟器
在前几篇关于.Net Micro Framework的研究文章中，我对它的绘图功能实不敢恭维，不过微软的MF开发人员很聪明，对位图方面的功能实现的就比较完善，这样做起图形应用来就不至于捉襟见肘了。
前段时间用.Net Compact Framework实现了一个奥运场馆查询（相关文章请参见：http://yfsoft.blog.51cto.com/1635641/322933），现在我们用.Net Micro Framework也实现一个，看看哪一个更炫。

 

（效果是不是比用.Net Compact Framework做的还棒！）
我这个程序脱胎于MF的示例文件NewPresentation，不过我对它进行了大刀阔斧的改进，原程序在实现菜单时至少需要两套大小不同的图片，现在我已经修改成仅需要一套图片了，此外我对tinyfnt中文字库的创建程序又进行了优化，可以更高效、更完美的创建字库了（相关文章请参见：http://yfsoft.blog.51cto.com/1635641/322943）。
如优化前菜单添加代码：
MenuItem menuItem1 = new MenuItem(Resources.BitmapResources.Vertical_Stack_Panel_Icon_Small, Resources.BitmapResources.Vertical_Stack_Panel_Icon, "Vertical Stack Panel", Resources.BitmapResources.Canvas_Panel_Icon);
      MenuItem menuItem2 = new MenuItem(Resources.BitmapResources.Horizontal_Stack_Panel_Icon_Small, Resources.BitmapResources.Horizontal_Stack_Panel_Icon, "Horizontal Stack Panel", Resources.BitmapResources.Canvas_Panel_Icon);
      MenuItem menuItem3 = new MenuItem(Resources.BitmapResources.Canvas_Panel_Icon_Small, Resources.BitmapResources.Canvas_Panel_Icon, "Canvas Panel", Resources.BitmapResources.Canvas_Panel_Icon);
      MenuItem menuItem4 = new MenuItem(Resources.BitmapResources.Diagonal_Panel_Icon_Small, Resources.BitmapResources.Diagonal_Panel_Icon, "Diagonal Panel", Resources.BitmapResources.Canvas_Panel_Icon);
      MenuItem menuItem5 = new MenuItem(Resources.BitmapResources.Scrollable_Panel_Icon_Small, Resources.BitmapResources.Scrollable_Panel_Icon, "Scrollable Panel", Resources.BitmapResources.Canvas_Panel_Icon);
      MenuItem menuItem6 = new MenuItem(Resources.BitmapResources.Free_Drawing_Panel_Icon_Small, Resources.BitmapResources.Free_Drawing_Panel_Icon, "Free Drawing Panel", Resources.BitmapResources.Canvas_Panel_Icon);
 
      // Add each of the menu items to the menu item panel
      m_MenuItemPanel.AddMenuItem(menuItem1);
      m_MenuItemPanel.AddMenuItem(menuItem2);
      m_MenuItemPanel.AddMenuItem(menuItem3);
      m_MenuItemPanel.AddMenuItem(menuItem4);
      m_MenuItemPanel.AddMenuItem(menuItem5);
 m_MenuItemPanel.AddMenuItem(menuItem6);
 
优化后的代码：
   m_MenuItemPanel.AddMenuItem(new MenuItem(Resources.BitmapResources.M1, "国家体育馆"));
   m_MenuItemPanel.AddMenuItem(new MenuItem(Resources.BitmapResources.M2, "北京大学体育馆"));
   m_MenuItemPanel.AddMenuItem(new MenuItem(Resources.BitmapResources.M3, "国家游泳中心-水立方"));
   m_MenuItemPanel.AddMenuItem(new MenuItem(Resources.BitmapResources.M4, "国家体育场-鸟巢"));
   m_MenuItemPanel.AddMenuItem(new MenuItem(Resources.BitmapResources.M5, "北京射击馆"));
   m_MenuItemPanel.AddMenuItem(new MenuItem(Resources.BitmapResources.M6, "顺义奥林匹克水上公园"));
 
实事求是的说，MF示例实现的图形菜单动画比我在北京2008奥运场馆速查中实现的要好，它的更规范，更具有通用性。相关代码如下：
 
 

// 菜单类
internal sealed class MenuItemPanel : Control
{
    private int _currentChild = 0;
    private int _width;
    private int _height;
    private int _animationStep;
    private Color ForeColor;
    public ArrayList MenuItemList;

    public MenuItemPanel(int width, int height, Color ForeColor,Color BackColor)
    {
        //背景色
        Background = new SolidColorBrush(BackColor);
        //前景色
        this.ForeColor = ForeColor;
        //大小
        _width = width;
        _height = height;
        //菜单选项集合
        MenuItemList = new ArrayList();
    }

    //添加菜单选项
    public void AddMenuItem(MenuItem menuItem)
    {
        MenuItemList.Add(menuItem);
    }

   //当前菜单选项索引
    public int CurrentChild
    {
        get { return _currentChild; }
        set
        {
            if (value > _currentChild) _animationStep = maxStep;             // 向右移动
            else if (value < _currentChild) _animationStep = -maxStep;       // 向左移动
            else _animationStep = 0;                                         // 没有移动

            if (value >= MenuItemList.Count) value = 0;                      // 菜单项是一个环状结构
            if (value < 0) value = MenuItemList.Count - 1;

            //开始重绘
            if (_animationStep != 0)
            {
                _currentChild = value;
                Invalidate();                                                //开始移动
            }
        }
    }

    static public int maxStep = 5;      //动画帧数
    const int xOffsetSeparation =2;     //每个菜单项的间距
    const int timerInterval = 20;       //移动每一个帧之间的动画时间ms

    //绘制菜单
    public override void OnRender(DrawingContext dc)
    {
        base.OnRender(dc);

        //获得图片宽度
        int largeX = ((MenuItem)MenuItemList[0]).ImageWidth + xOffsetSeparation;

        //起始坐标
        int x = (_width / 2) - ((largeX * 2) + (largeX / 2));
        int y =22;

        //缩放比例
        int scale = 0;

        //缩放比例的步长
        int scaleOffset = System.Math.Abs(_animationStep);

        //X方向移动
        x += _animationStep * 5;

        //绘背景
        dc.DrawImage(Resources.GetBitmap(Resources.BitmapResources.Main), 0, 0);

        #region //绘菜单图像
        for (int i = _currentChild - 2; i < _currentChild + 3; i++)
        {
            if (i == _currentChild) //中间图像
            {
                scale = maxStep - scaleOffset;
            }
            else //两边图像
            {
                if ((_animationStep < 0 && i == _currentChild + 1) || (_animationStep > 0 && i == _currentChild - 1))
                    scale = scaleOffset;
                else
                    scale = 0;
            }

            //当前菜单项
            MenuItem menuItem = null;
            if (i < 0) menuItem = (MenuItem)MenuItemList[MenuItemList.Count + i];
            else if (i > MenuItemList.Count - 1) menuItem = (MenuItem)MenuItemList[i - MenuItemList.Count];
            else menuItem = (MenuItem)MenuItemList[i];

            menuItem.Render(dc, x, y, scale);
            x += largeX;
        }
        #endregion

        #region //写菜单文本
        if (_width > 0)
        {
            int step = 20;
            int row = 125;
            if (_width < _height) step = 40;

            //写说明
            string text = ((MenuItem)MenuItemList[_currentChild]).Description;
            dc.DrawText(ref text, Resources.GetFont(Resources.FontResources.china2008), ForeColor, 10, row, _width - 20, step, TextAlignment.Center, TextTrimming.None);
        }
        #endregion

        //启动动画时钟
        StartAnimationTimer();
    }

    private DispatcherTimer _animationTimer;
    private void StartAnimationTimer()
    {
        if (_animationStep != 0)
        {
            if (_animationTimer == null)
            {
                _animationTimer = new DispatcherTimer(this.Dispatcher);
                _animationTimer.Interval = new TimeSpan(0, 0, 0, 0, timerInterval);
                //每隔一段时间触发该事件
                _animationTimer.Tick += new EventHandler(OnAnimationTimer);
            }
            _lastTick = DateTime.Now.Ticks;
            _animationTimer.Start();
        }
    }
    long _lastTick = 0;
    private void OnAnimationTimer(object o, EventArgs e)
    {
        _animationTimer.Stop();
        long ms = ((DateTime.Now.Ticks - _lastTick) / 10000);
        _lastTick = DateTime.Now.Ticks;
        int increment = (int)(ms / timerInterval);

        if (increment < 1) increment = 1;
        else if (increment > maxStep) increment = maxStep;

        if (_animationStep < 0) _animationStep += increment;
        else if (_animationStep > 0) _animationStep -= increment;

        //重新触发OnRender函数的执行
        Invalidate();
    }

    //窗体可用尺寸
    protected override void MeasureOverride(int availableWidth, int availableHeight, out int desiredWidth, out int desiredHeight)
    {
        desiredWidth = _width;
        desiredHeight = _height;
    }
}

// 菜单选项类
internal sealed class MenuItem : Control
{
    private Bitmap _image;         // 菜单图标
    private string _description;   // 菜单说明
    private int[] _widthSteps;     // 宽度步长数组
    private int[] _heightSteps;    // 高度步长数组
    public int ImageWidth;         // 图像宽度
    public int ImageHeight;        // 图像高度
    private float fScale = (float)0.8;   // 缩小因子
    public int SmallWidth;         // 缩小后的宽度
    public int SmallHeight;        // 缩小后的高度

    public MenuItem()
    {
    }
    public MenuItem(Resources.BitmapResources rBitmap, string description)
    {
        //菜单图像
        _image = Resources.GetBitmap(rBitmap);

        //图像尺寸
        ImageWidth = _image.Width;
        ImageHeight = _image.Height;
        SmallWidth = (int)(fScale * ImageWidth);
        SmallHeight = (int)(fScale * ImageHeight);

        //菜单说明
        _description = description;

        //创建中间动画帧尺寸数组
        _widthSteps = new int[MenuItemPanel.maxStep];
        _heightSteps = new int[MenuItemPanel.maxStep];

        //动画变化总大小
        int wDiff = ImageWidth - SmallWidth;
        int hDiff = SmallHeight - SmallHeight;

        //保存每次变化的大小
        for (int i = 1; i < MenuItemPanel.maxStep; i++)
        {
            _widthSteps[i] = (wDiff / MenuItemPanel.maxStep) * i;
            _heightSteps[i] = (hDiff / MenuItemPanel.maxStep) * i;
        }

    }
    //菜单说明
    public string Description
    {
        get { return _description; }
        set { _description = value; }
    }
    //菜单绘制
    public void Render(DrawingContext dc, int x, int y, int scale)
    {
        // 图像必须存在
        if (_image != null)
        {
            if (scale == MenuItemPanel.maxStep)
            {
                Width = ImageWidth;
                Height = ImageHeight;
                dc.DrawRectangle(new SolidColorBrush(Color.Black), new Pen(Color.Black), x+2, y+2, Width, Height);
                dc.DrawImage(_image, x, y);
            }
            else
            {
                if (scale == 0)
                {
                    Width = SmallWidth;
                    Height = SmallHeight;
                    x += ((ImageWidth - Width) / 2);
                    y += ((ImageHeight - Height) / 2);
                    dc.DrawRectangle(new SolidColorBrush(Color.Black), new Pen(Color.Black), x + 2, y + 2, Width, Height);
                    dc.Bitmap.StretchImage(x, y, _image, Width, Height, 255);
                 }
                else
                {
                    int wDiff = ImageWidth - SmallWidth;
                    int hDiff = SmallHeight - SmallHeight;
                    Width = SmallWidth + _widthSteps[scale];
                    Height = SmallHeight + _heightSteps[scale];
                    x += ((ImageWidth - Width) / 2);
                    y += ((ImageHeight - Height) / 2);
                    dc.DrawRectangle(new SolidColorBrush(Color.Black), new Pen(Color.Black), x + 2, y + 2, Width, Height);
                    dc.Bitmap.StretchImage(x, y, _image, Width, Height, 255);
                }
            }
        }
    }
}

本程序的源代码下载链接：http://www.sky-walker.com.cn/yefan/SourceCode/YFPresentation.rar
有条件的网友可以和微软提供的示例NewPresentation对比一下看看，也许更能看出它们的异同。有时间我在把这个类封装成一个控件（基于.Net CF），这样在windows和wince平台就都能使用了。

 

本文出自 “叶帆工作室” 博客，转载请与作者联系！