WPF中UniformGrid 的使用

在GroupBox中划分列Columns

 <GroupBox Header="环境">
                    <ItemsControl ItemsSource="{Binding Evironment}" VerticalAlignment="Center">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <UniformGrid  Columns="4"/>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,5">
                                    <TextBlock Text="{Binding Value}" HorizontalAlignment="Center" FontSize="16" Foreground="#FF2BEDF1" Margin="0,5"/>
                                    <TextBlock Text="{Binding Header}" Foreground="#AAFFFFFF" FontSize="10"/>
                                </StackPanel>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </GroupBox>

以上绑定详解

ItemsSource="{Binding Evironment}" 中 Evironment是后台中 
public List<MonitorItemModel> Evironment { get; set; }
Evironment = new List<MonitorItemModel>();
Evironment.Add(new MonitorItemModel { Header = "光照(Lux)"  value =0});
Evironment.Add(new MonitorItemModel { Header = "噪音(db)" });
Evironment.Add(new MonitorItemModel { Header = "温度(℃)" });
Evironment.Add(new MonitorItemModel { Header = "湿度(%)" });
Evironment.Add(new MonitorItemModel { Header = "PM2.5(m³)" });
Evironment.Add(new MonitorItemModel { Header = "流化氢(ppm)" });
Evironment.Add(new MonitorItemModel { Header = "氮气(ppm)" });

其中 TextBlock中的Text绑定的就是这个MonitorItemModel类中的字段Header
效果图就像是这样的