Mobile开发(九宫格控件)

      Mobile开发个人感觉使用九宫格的时候并不多，但有时候又不得不使用，有点类似于手机开发标志性的控件了，客户指明要用，咱们还能说啥。

      老规矩，先上控件，控件竖屏时显示为九格，横屏时显示为八格，具体需求大家可以在控件代码中自行更改，同样支持键盘和触摸操作。大家读着代码再往下看。九宫格控件

      其实，控件和代码就是自己的助手，根据自己开发的实际情况来使用，不是我有什么我都给你加上。猜测客户的真实意图，满足客户实际需求你的程序就能交工了。废话不多说了，首先介绍控件的一些要点：

      在FlexStartMenu文件中，下面这行代码取消注释将显示九宫格边框，看个人喜好

 

//绘制九宫格边框
                if (viewableItemCount == 9)
                {
                    //横向
                    gOffScreen.DrawLine(new Pen(SystemColors.InactiveCaption), 0, 0, this.Width, 0);
                    gOffScreen.DrawLine(new Pen(SystemColors.InactiveCaption), 0, this.Height / 3, this.Width, this.Height / 3);
                    gOffScreen.DrawLine(new Pen(SystemColors.InactiveCaption), 0, this.Height * 2 / 3, this.Width, this.Height * 2 / 3);

                    //纵向
                    gOffScreen.DrawLine(new Pen(SystemColors.InactiveCaption), this.Width / 3, 0, this.Width / 3, this.Height);
                    gOffScreen.DrawLine(new Pen(SystemColors.InactiveCaption), this.Width * 2 / 3, 0, this.Width * 2 / 3, this.Height);

                }
                else if (viewableItemCount == 8)
                {
                    //横向
                    gOffScreen.DrawLine(new Pen(SystemColors.InactiveCaption), 0, 0, this.Width, 0);
                    gOffScreen.DrawLine(new Pen(SystemColors.InactiveCaption), 0, this.Height / 2, this.Width, this.Height / 2);
                    //纵向
                    gOffScreen.DrawLine(new Pen(SystemColors.InactiveCaption), this.Width / 4, 0, this.Width / 4, this.Height);
                    gOffScreen.DrawLine(new Pen(SystemColors.InactiveCaption), this.Width / 2, 0, this.Width / 2, this.Height);
                    gOffScreen.DrawLine(new Pen(SystemColors.InactiveCaption), this.Width * 3 / 4, 0, this.Width * 3 / 4, this.Height);
                }

      控件中可显示图片，文字，图片还分为选中前图片和选中后图片，控制代码如下：

//选中时的图片
            if (m_item.Press && m_item.PressIcon != null)
            {
                bmp = m_item.PressIcon;
                selFont = new Font("宋体", 9, FontStyle.Bold);
            }
            else
            {
                //初始化图片
                bmp = m_item.Icon;
                selFont = new Font("宋体", 9, FontStyle.Regular);
            }

            //imgRect默认位置范围(绘制图片范围)
            Rectangle imgRect = new Rectangle((m_item.Left), (m_item.Top+this.Height / rowsCount * 2 / 5-30), this.Width/cellsCount, this.Height / rowsCount);

            //imgRect
            if (bmp != null)
            {
                bmp.Draw(gOffScreen, imgRect);
            }
            //绘制文字
            //gOffScreen.DrawString(m_item.ItemText, selFont, new SolidBrush(Color.White), (m_item.Left + 40 - gOffScreen.MeasureString(m_item.ItemText, selFont).Width / 2), (m_item.Top + this.Height / rowsCount * 2 / 5));
            

      加载控件，首先设置全局变量：

//纵横屏幕标志 动态更换图片用 默认纵向por 横向lan
string formSign = "por";
//屏幕显示标志 默认为9个单位图片
int viewCount = 9;
//九宫格控件
FlexStartMenu FlexMenu = new FlexStartMenu();

      给九宫格加载数据和事件，同时添加到窗体中：

private void Form1_Load(object sender, EventArgs e)
        {
            FlexStartItem item = new FlexStartItem();
            item.ItemText = "test1";
            item.Icon = AlphaImage.CreateFromFile(path + @"\Resources\index_11.png");
            item.PressIcon = AlphaImage.CreateFromFile(path + @"\Resources\buy.png");
            FlexMenu.Items.Add(item);
            FlexMenu.Selected += new PicItemInfo(FlexMenu_Selected);
            this.Controls.Add(FlexMenu);
        }

       响应事件：

/// <summary>
        /// 点击响应事件
        /// </summary>
        /// <param name="myControl"></param>
        void FlexMenu_Selected(FlexStartItem myControl)
        {
            //点击后
            MessageBox.Show(myControl.ItemText);
        }

      控件属性设置，绘制控件：

protected override void OnPaint(PaintEventArgs e)
        {
            if (offBitmap != null)
            {
                AdjustFormLayout();
                gxBuffer = Graphics.FromImage(offBitmap);
                gxBuffer.Clear(this.BackColor);
                this.BackColor = SystemColors.MenuText;
                //
                FlexMenu.SysColor = this.BackColor;
                //
                FlexMenu.ViewCount = viewCount;
                //
                FlexMenu.Location = new System.Drawing.Point(0, 0);
                FlexMenu.TabIndex = 0;
                //防止开启自动滚动条时屏幕超出报错
                FlexMenu.Height = formSize.Height - 50;
                FlexMenu.Width = formSize.Width;

                e.Graphics.DrawImage(offBitmap, 0, 0);
            }
            else
            {
                e.Graphics.Clear(this.BackColor);
            }
        }

        protected override void OnResize(EventArgs e)
        {
            base.OnResize(e);
            if (offBitmap != null)
                offBitmap.Dispose();

            offBitmap = new Bitmap(this.Width, this.Height, PixelFormat.Format32bppRgb);
        }

        public void AdjustFormLayout()
        {
            Rectangle screenBounds = Screen.PrimaryScreen.Bounds;
            float widthRatio = 0.0F;
            float heightRatio = 0.0F;

            DisplayManager.GetDisplayRatiosByDpi(this, ref widthRatio, ref heightRatio);


            控件按比例缩放#region 控件按比例缩放

            if (DisplayManager.GetDisplayMode() == DisplayMode.Portrait)
            {
                // 纵向
                formSize = new Size(screenBounds.Width, screenBounds.Height);
                formSign = "por";
                viewCount = 9;
            }
            else if (DisplayManager.GetDisplayMode() == DisplayMode.Landscape)
            {
                // 横向
                formSize = new Size(screenBounds.Width, screenBounds.Height);
                formSign = "lan";
                viewCount = 8;
            }
            else
            {
                // 正方
                formSize = new Size(screenBounds.Width, screenBounds.Height);
                formSign = "por";
                viewCount = 9;
            }
            #endregion

        }

      完成控件绘制后，运行效果图：

 

      最后，控件并不算完整，还有不少问题，如加载图片或文字超出9个时，因为禁了滚动条，所以是显示不出来的，就算加上，也只有增加九宫格控件的高度才有可能显示，推荐大家在页面图标不多时使用，最好不超过8个图片，考虑宽屏的时候。欢迎大家探讨控件修改的方案！