2021-09-03 WPF上位机通用框架平台实战-Dashboard

不念不忘少年蓝@ 2022-09-10 01:19 52阅读 0赞

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b6u6L2vTVZQIEVsZXZlbg_size_20_color_FFFFFF_t_70_g_se_x_16]

## 一：Dashboard窗口布局和功能实现 ##

/// <summary>
    /// MonitorView.xaml 的交互逻辑
    /// </summary>
    public partial class MonitorView : UserControl
    { 
        public MonitorView()
        { 
            InitializeComponent();
    
            this.DataContext = new MonitorViewModel();
        }
    }

public class MonitorViewModel
    { 
        public ObservableCollection<DataGridItemModel> DataList {  get; set; } = new ObservableCollection<DataGridItemModel>();
    
        public MonitorViewModel()
        { 
            Random random = new Random();
            for (int i = 0; i < 20; i++)
            { 
                DataList.Add(new DataGridItemModel {  Name = "测试-" + i.ToString("00"), Age = random.Next(18, 90), Value = random.Next(30, 120).ToString() });
            }
        }
    }

数据绑定样式

public class DataGridItemModel
    { 
        public string Name
        { 
            get;
            set;
        }
    
        public int Age
        { 
            get;
            set;
        }
    
        public string Value
        { 
            get;
            set;
        }
    }

补充：集合绑定用法  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oSa5YWs5pCs5Luj56CB_size_20_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oSa5YWs5pCs5Luj56CB_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
补充：滚动条用法  
![在这里插入图片描述][73941717a23144c88c0797415f71ed2f.png]

补充：详情事件用法  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oSa5YWs5pCs5Luj56CB_size_20_color_FFFFFF_t_70_g_se_x_16 2]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oSa5YWs5pCs5Luj56CB_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
最终界面效果图  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oSa5YWs5pCs5Luj56CB_size_20_color_FFFFFF_t_70_g_se_x_16 4]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b6u6L2vTVZQIEVsZXZlbg_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/d591413af9724b679e06f2a3fa3201f2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oSa5YWs5pCs5Luj56CB_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/cc7aac565c9b4e42897832cf24015dc6.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oSa5YWs5pCs5Luj56CB_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/6058fe8dffc1429e8e3321a5e26a6fa6.png
[73941717a23144c88c0797415f71ed2f.png]: /images/20220829/f52ee882ad29401fb57dfa66b9431456.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oSa5YWs5pCs5Luj56CB_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/b6d2e2ce2f2d430db9b896e9bd854805.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oSa5YWs5pCs5Luj56CB_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/621d2795e91445e78e9d22c3ed056769.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oSa5YWs5pCs5Luj56CB_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220829/68413376cbed411c9cc825bd17e45f00.png