Xin chào các bạn, bài viết hôm nay mình tiếp tục hướng dẫn các bạn cách sử dụng WinExplorer trên Devexpress sử dụng HTML và CSS để thiết kế template cho giao diện ứng dụng Shopping Fashion.

[DEVEXPRESS] Thiết kế giao diện mua sắm Shopping Fashion sử dụng WinExplorer Template HTML và CSS

Dưới đây là hình ảnh demo giao diện:

Ở hình trên, các bạn thấy ứng dụng mình đang bán áo lập trình viên Developer.

Bao gồm các thông tin cơ bản: Name, Price, Category, Photo...

Khi các bạn bấm vào nút chi tiết thì sẽ show thông tin chi tiết của sản phẩm đó lên sử dụng HTLMControlPopup của Devexpress.

Video demo ứng dụng:

Full soure code C#:

using DevExpress.Utils.Html;
using DevExpress.XtraEditors;
using DevExpress.XtraExport.Helpers;
using DevExpress.XtraGrid.Views.Grid;
using DevExpress.XtraGrid.Views.WinExplorer;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace WinExplorerHTMLCSS
{
    public partial class Form1 : DevExpress.XtraEditors.DirectXForm
    {
        public Form1()
        {
            InitializeComponent();
           
        }
        private void Form1_Load(object sender, EventArgs e)
        {
            gridControl1.BackColor = Color.Red;           
            var listProduct = new Product().GetProducts();
            gridControl1.DataSource = listProduct;
           
        }

        void onDetailButtonClick(object sender, DxHtmlElementMouseEventArgs args)
        {
           
            // htmlContentPopup1.Show(this, Bounds);
            var data = (sender as WinExplorerView).DataSource as List<Product>;
            var item = winExplorerView1.FocusedValue;
            var product = data.Where(x => x.Id.ToString() == item.ToString()).FirstOrDefault();
            product.Info = @"Người xem trên kênh này chủ yếu là những người đã thích, theo dõi trang fanpage của bạn và quan tâm đến các sản phẩm quần áo của shop bạn. Cách này sẽ thích hợp nếu Fanpage của bạn uy tín, vững mạnh, thích hợp với những bạn đã kinh doanh lâu. ";
            htmlContentPopup1.DataContext = product;
            htmlContentPopup1.Show(this, this.ClientRectangle);
            
        }

        void popupCloseClick(object sender, DxHtmlElementMouseEventArgs args)
        {
            htmlContentPopup1.Close();
        }



    }

    public class Product {

        public List<Product> GetProducts() {
            var products = new List<Product>();
            products.Add(new Product()
            {
                Name = "Áo thun Coder Developer",
                Price = 280000,
                Description = "Phong cách Hàn Quốc, Retro, Đường phố",
                Code = "LAPTRINHVB000125",
                Category = "Áo thun",
                urlImage = "images/1.jfif"
            });

            products.Add(new Product()
            {
                Name = "Áo thun Nodejs Coder",
                Price = 162000,
                Description = "Phong cách Bụi bặm",
                Code = "LAPTRINHVB000126",
                Category = "Áo thun",
                urlImage = "images/2.jfif"
            });

            products.Add(new Product()
            {
                Name = "Áo thun Google Cloud",
                Price = 99000,
                Description = "Phong cách Hoa Kỳ",
                Code = "LAPTRINHVB000523",
                Category = "Áo thun",
                urlImage = "images/3.jfif"
            });
            products.Add(new Product()
            {
                Name = "Áo thun Dev Web Angular",
                Price = 189000,
                Description = "Size XL, M, S, Màu xanh, đỏ",
                Code = "LAPTRINHVB001223",
                Category = "Áo thun",
                urlImage = "images/4.jfif"
            });
          

            products.Add(new Product()
            {
                Name = "Áo thun IT No coder",
                Price = 89000,
                Description = "Size XL, M, S, Màu xanh, đỏ",
                Code = "LAPTRINHVB002223",
                Category = "Áo IT",
                urlImage = "images/5.jfif"
            });
            products.Add(new Product()
            {
                Name = "Áo thun Flutter Mobile",
                Price = 389000,
                Description = "Size XL, M, S, Màu xanh, đỏ",
                Code = "CODE002223",
                Category = "Áo IT",
                urlImage = "images/6.jfif"
            });
            products.Add(new Product()
            {
                Name = "Áo thun Web PHP",
                Price = 325000,
                Description = "Size XL, M, S, Màu xanh, đỏ",
                Code = "CODEVB002223",
                Category = "Áo tay ngắn",
                urlImage = "images/7.jfif"
            });
            products.Add(new Product()
            {
                Name = "Áo thun JAVA Dev",
                Price = 50000,
                Description = "Size XL, M, S, Màu xanh, đỏ",
                Code = "CODEVB002248",
                Category = "Áo Mobile",
                urlImage = "images/8.jfif"
            });
            products.Add(new Product()
            {
                Name = "Áo Dev ReactJS",
                Price = 240000,
                Description = "Size XL, M, S, Màu xanh, đỏ",
                Code = "CODEVB002224",
                Category = "Áo Mobile",
                urlImage = "images/9.jfif"
            });

            products.Add(new Product()
            {
                Name = "Áo Thể Thao",
                Price = 140000,
                Description = "Size XL, M, S, Màu xanh, đỏ",
                Code = "CODEVB002224",
                Category = "Áo Mobile",
                urlImage = "images/10.jfif"
            });

            products.Add(new Product()
            {
                Name = "Áo Codeigniter Framework",
                Price = 140000,
                Description = "Size XL, M, S, Màu xanh, đỏ",
                Code = "CODEVB001229",
                Category = "Áo Web",
                urlImage = "images/11.jfif"
            });
            return products; 
        }

        public Guid Id { get; set; } = Guid.NewGuid();
        public string Name { get; set; }
        public string Description { get; set; }
        public string Info { get; set; }
        public int Price { get; set; }
        public string Code { get; set; }
        public string Category { get; set; }

        public string urlImage { get; set; }    
        public string PriceString {
            get {
                return Price.ToString("#,###") + " đ";
            }
        }

        public Image Photo
        {
            get {
                var pic = new PictureBox();
                pic.Load(urlImage);
                return pic.Image;
            }

        }
    }
}

DOWNLOAD SOURCE

Thanks for watching!