在系统中有时通过以下界面可以直观的展示信息给用户:
以上图形有几点比较重要:
1, 一个面板显示一组属性(例如物料显示物料编号、物料规格),但要把最主要的属性通过颜色单独处分出来。
2, 通过颜色来区分重要性,例如(红色表示缺物料、黄色表示后面还需要物料等)。
实现起来主要考虑一下几点:
1, 每个面板做成一个用户控件(UserControl);
2, 用一个WrapPannel加载用户控件;
3, 根据属性值设置用户控件的背景;
DEMO中主要说到以下内容:
1, 实体类PartInfo.cs
2, 看板控件KanBanUserControl.xaml
3, 主界面MainWindow.xaml
详细介绍:
1, 实体类PartInfo.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace KanBan
{
public enum KanBanColor
{
Red,
Yellow,
Green
}
public class PartInfo
{
///
/// 物料编号
///
public string PartNO { get; set; }
///
/// 物料编号
///
public string Description { get; set; }
///
/// 需求数量
///
public int Demand { get; set; }
///
/// 已存在数量
///
public int Exist { get; set; }
///
/// 缺乏数量
///
public int Lack { get; set; }
///
/// 货位编号
///
public string Location { get; set; }
///
/// 颜色标识
///
public KanBanColor ColorTag { get; set; }
}
}
3, 看板控件XAML文件见DEMO,代码部分注意显示和处理颜色的函数;
4, 主界面XAML文件注意ScrollViewer 是用来滚动的。
主界面加载数据主要是用以下函数处理的,在实际中这个可能从数据库读取
private void LoadData()
{
List partInfos = new List();
PartInfo model = new PartInfo();
model.PartNO = "000001";
model.Description= "扬声器 0.5W 8Ω 15×11×3.5 弹片";
model.Demand = 100;
model.Exist = 20;
model.Lack = 80;
model.ColorTag = KanBanColor.Red;
model.Location = "A0101";
partInfos.Add(model);
model = new PartInfo();
model.PartNO = "000002";
model.Description = "受话器 10mW 32Ω 弹片";
model.Demand = 100;
model.Exist = 50;
model.Lack = 50;
model.ColorTag = KanBanColor.Yellow;
model.Location = "A0102";
partInfos.Add(model);
model = new PartInfo();
model.PartNO = "000003";
model.Description = "摄像头 IMX105PQH5 800万";
model.Demand = 100;
model.Exist = 100;
model.Lack = 0;
model.ColorTag = KanBanColor.Green;
model.Location = "A0103";
partInfos.Add(model);
//显示看板
foreach (var p in partInfos)
{
PartInfo tmpModel = (PartInfo)p;
KanBanUserControl tempKanBan = new KanBanUserControl();
tempKanBan.ShowMaterialRequirment(tmpModel);
this.mainpanel.Children.Add(tempKanBan);
}
}
看板界面的实现效果: