DevExpress GridControl 关于使用CardView的一点小结

标签：地方   void   bsp   web   自适应   技术   cep   new   pre   

最近项目里需要显示商品的一系列图片，打算用CardView来显示，由于第一次使用，遇到许多问题，发现网上这方面的资源很少，所以把自己的一点点实际经验小结一下，供自己和大家以后参考。

1、选择CardView，将原来的GirView转换为CardView，如下图

效果如下：

2、控件默认是纵向排列，如果要改成横向排列，改变属性MaximumCardColumns（允许横向排列的卡片数量）和MaximumCardRows（允许纵向排列的卡片行数）。

我这里设置为：MaximumCardColumns：-1、MaximumCardRows：1，效果如下图；

3、要用到卡片，大多数情况是要展示图片用的。如何展示呢？添加一个存储图片的对象（我这里是直接在数据源中添加Image类型的字段），然后更改该字段的ColumnEdit的类型为PictureEdit，并命名为rowPicture，如下图

4、又发现图片的大小被限制了，改变CardView（卡片高度自适应，以适应图片的高度）和rowPicture（设置图片的高度）两个地方的属性即可，如图

CardView：

rowPicture：

效果如下图：

5、布局问题解决了，其他需要调整的，其实属性里都有，这里只是演示。如何根据URL将图片下载下来显示，这里贴出主要代码：

                var client = new WebClient();
                client.DownloadDataCompleted += client_DownloadDataCompleted;
                client.DownloadDataAsync(new Uri(img.Url));

        private void client_DownloadDataCompleted(object sender, DownloadDataCompletedEventArgs e)
        {
            try
            {

                Image img = Image.FromStream(new MemoryStream(e.Result));

······                
            }
            catch (Exception ex)
            {

······
            }
        }

到这就差不多解决问题了，提示下，注意将图片缓存，以提高性能。

--------------------- 本文来自 程序猿成长日记 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/yang472024191/article/details/40536327?utm_source=copy 

DevExpress GridControl 关于使用CardView的一点小结

标签：地方   void   bsp   web   自适应   技术   cep   new   pre   

原文地址：https://www.cnblogs.com/westsoft/p/9733947.html