在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
效果图就像是这样的