.Net Micro Framework研究—應用執行個體

試驗平台：.Net Micro Framework 模拟器

在前幾篇關于.Net Micro Framework的研究文章中，我對它的繪圖功能實不敢恭維，不過微軟的MF開發人員很聰明，對位圖方面的功能實作的就比較完善，這樣做起圖形應用來就不至于捉襟見肘了。

前段時間用.Net Compact Framework實作了一個奧運場館查詢（相關文章請參見：http://blog.csdn.net/yefanqiu/archive/2007/11/13/1882835.aspx），現在我們用.Net Micro Framework也實作一個，看看哪一個更炫。

（效果是不是比用.Net Compact Framework做的還棒！）

如優化前菜單添加代碼：

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);

        //啟動動畫時鐘

        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);

                 }

                {

                    int wDiff = ImageWidth - SmallWidth;

                    int hDiff = SmallHeight - SmallHeight;

                    Width = SmallWidth + _widthSteps[scale];

                    Height = SmallHeight + _heightSteps[scale];

                    y += ((ImageHeight - Height) / 2);

                }

有條件的網友可以和微軟提供的示例NewPresentation對比一下看看，也許更能看出它們的異同。有時間我在把這個類封裝成一個控件（基于.Net CF），這樣在windows和wince平台就都能使用了。