基本概念

GRID   创建行和类，类似table
StackPanel  从上往下 顺序排列，类似后台系统左边菜单
UniformGrid  简化版GRID   ，自动宽高，自动排列。类似网页中自适应

　　

实现数据绑定和通知
MainViewModel : INotifyPropertyChanged
{
    private UserControl _userControl;

    public event PropertyChangedEventHandler? PropertyChanged;
  /// <summary>
  /// 初始化环境数据
  /// </summary>
  public MainViewModel()
  {
      
      #region 初始化车间列表 
      WorkShopList = new List<WorkShopModel>();
      WorkShopList.Add(new WorkShopModel { WorkShopName = "贴片车间", WorkingCount = 32, WaitCount = 8, WrongCount = 4, StopCount = 0 });
      WorkShopList.Add(new WorkShopModel { WorkShopName = "封装车间", WorkingCount = 20, WaitCount = 8, WrongCount = 4, StopCount = 0 });
      WorkShopList.Add(new WorkShopModel { WorkShopName = "焊接车间", WorkingCount = 68, WaitCount = 8, WrongCount = 4, StopCount = 0 });
      WorkShopList.Add(new WorkShopModel { WorkShopName = "贴片车间", WorkingCount = 68, WaitCount = 8, WrongCount = 4, StopCount = 0 });

      #endregion

  }
 private List<WorkShopModel> _WorkShopModels;

 public List<WorkShopModel> WorkShopList
 {
     get { return _WorkShopModels; }
     set
     {
         _WorkShopModels = value;
         if (PropertyChanged != null)
         {
             PropertyChanged(this, new PropertyChangedEventArgs("WorkShopList"));
         }
     }
 }


     <Grid Grid.Row="2">
         <ItemsControl ItemsSource="{Binding WorkShopList}">

             <ItemsControl.ItemsPanel>
                 <ItemsPanelTemplate>
                     <UniformGrid Columns="{Binding WorkShopList.Count}"></UniformGrid>
                 </ItemsPanelTemplate>
             </ItemsControl.ItemsPanel>
             <ItemsControl.ItemTemplate>
                     <DataTemplate>
                     <Grid>
                         <Grid.RowDefinitions>
                             <RowDefinition Height="30"></RowDefinition>
                             <RowDefinition></RowDefinition>
                         </Grid.RowDefinitions>
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="90"></ColumnDefinition>
                             <ColumnDefinition></ColumnDefinition>
                         </Grid.ColumnDefinitions>
                         <!--第一行-->
                         <TextBlock Text="{Binding WorkShopName}" VerticalAlignment="Center" HorizontalAlignment="Left" Foreground="#18aabd"  Margin="10,0"></TextBlock>
                         <TextBlock Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="10,0" > 
                             <Hyperlink Foreground="White" TextDecorations="None">[详情]</Hyperlink>
                             <!-- Command="{Binding ShowDetailCmm,RelativeSource={RelativeSource AncestorType=Window}}"-->
                         </TextBlock>

                         <!--第二行-->
                         <StackPanel Grid.Row="1"  HorizontalAlignment="Center" VerticalAlignment="Center">
                             <TextBlock Text="机台总数" Foreground="White" FontSize="10"></TextBlock>
                             <TextBlock Text="{Binding TotalCount}" HorizontalAlignment="Center" Foreground="#99ffffff" FontSize="30" Margin="0,5"></TextBlock>
                         </StackPanel>

                         <UniformGrid Grid.Row="1" Grid.Column="1">
                             <StackPanel>
                                 <TextBlock Text="{Binding WorkingCount}" HorizontalAlignment="Center" Foreground="LightSeaGreen" FontSize="16"></TextBlock>
                                 <TextBlock Text="作业" HorizontalAlignment="Center" Foreground="#55ffffff" FontSize="10"></TextBlock>
                             </StackPanel>
                             <StackPanel>
                                 <TextBlock Text="{Binding WaitCount}" HorizontalAlignment="Center" Foreground="DarkOrange" FontSize="16"></TextBlock>
                                 <TextBlock Text="等待" HorizontalAlignment="Center" Foreground="#55ffffff" FontSize="10"></TextBlock>
                             </StackPanel>
                             <StackPanel>
                                 <TextBlock Text="{Binding WrongCount}" HorizontalAlignment="Center" Foreground="Red" FontSize="16"></TextBlock>
                                 <TextBlock Text="故障" HorizontalAlignment="Center" Foreground="#55ffffff" FontSize="10"></TextBlock>
                             </StackPanel>
                             <StackPanel>
                                 <TextBlock Text="{Binding StopCount}" HorizontalAlignment="Center" Foreground="Gray" FontSize="16"></TextBlock>
                                 <TextBlock Text="停机" HorizontalAlignment="Center" Foreground="#55ffffff" FontSize="10"></TextBlock>
                             </StackPanel>
                         </UniformGrid>
                     </Grid>
                 </DataTemplate>
                 </ItemsControl.ItemTemplate>

         


         </ItemsControl>
       

     </Grid>