Winfrom+Devexpress 之GridControl ConvertTo TileView 制作精美的卡片式看板

gridcontrol如果以卡片的形式展示，刚开始都会选择转成Cardview，或者layoutview，原本我刚开始也是这么干的，cardview和layoutview,调整起来也很麻烦，界面不好看，有次在参考dev的demo的时候偶然发现gridcontrol(我用的dev18版)支持转tileview,

支持更高级的页面，加载展示动画很酷，支持自绘页面。写这篇文章的原因，发现网上对于这个的titleview的资料还是很少的，所有记录一下。,废话不多说，先上官方demo界面。

看板的形式展示

如上图，都是用titleview做的，

首先将gridcontrol转成tileview,然后在设计里面的tile templat里面就可以直接拖界面的，他是表格形式的，直接把你的数据源拖进你想放的位置，就行了。

至此大部分的操作就已经完成了。可以在layout的里面查看一下，同是也可设置间距注意一下，如果是是动态加载多列图片，如这个需要将图片转成二进制在循环element载加进去，附上代码截图

在tileview_itemCustomize事件中做处理，注意加载图片的时候要指定加载的位置（xxx格子里面）

附上代码

 

List<TileViewItemElement> GetMembersElements()
        {
            var result = new List<TileViewItemElement>();
            foreach (var pat in patlist)
            {
                Bitmap pathimage = (Bitmap)Properties.Resources.ResourceManager.GetObject(strs[i]);
                var image = ImageToByte(pathimage);
                var element = new TileViewItemElement();
                element.Image = ByteImageConverter.FromByteArray(image as byte[]);
                result.Add(element);
                //var photo = pat["PatImage"];
                //string[] strs = photo.ToString().Split(',');
                //for (int i = 0; i < strs.Length; i++)
                //{
                //    if (!string.IsNullOrEmpty(strs[i]))
                //    {

                //    }
                //}
            }
            return result;
        }

 

动态加载图片

 foreach (var element in elements)
                {
                    if (i < 5)
                    {
                        TileViewItemElement item = null;
                        e.Item.Elements.Add(element);
                        element.RowIndex = 3;
                        element.ColumnIndex = i;
                        element.AnchorIndent = 6;
                        element.ImageAlignment = TileItemContentAlignment.MiddleCenter;
                        element.ImageScaleMode = TileItemImageScaleMode.ZoomInside;
                        element.AnchorElement = item;
                        item = element;
                        i++;
                    }
                    else
                    {
                        TileViewItemElement item = null;
                        e.Item.Elements.Add(element);
                        element.RowIndex = 4;
                        element.ColumnIndex = j;
                        element.AnchorIndent = 6;
                        element.ImageAlignment = TileItemContentAlignment.MiddleCenter;
                        element.ImageScaleMode = TileItemImageScaleMode.ZoomInside;
                        element.AnchorElement = item;
                        item = element;
                        j++;
                    }

                }