在系统中有时通过以下界面可以直观的展示信息给用户:

以上图形有几点比较重要：

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);

}

}

看板界面的实现效果：