5.2.1 WPF 通过ItemControl自己做柱状图

qq_340474022025-04-01 10:08

最终效果如下图：

1.1 准备数据 ViewModel

cs 复制代码

  public class PrimaryItemModel
  {
      public double Value { get; set; }
      public string XLabel { get; set; }
  }
 public class MainViewModel
 {
     public ObservableCollection<PrimaryItemModel> PrimaryList { get; set; }

     public MainViewModel()
     {
         Random random = new Random();
         PrimaryList = new ObservableCollection<PrimaryItemModel>();
         for (int i = 0; i < 15; i++)
         {
             PrimaryList.Add(new PrimaryItemModel
             {
                 XLabel = DateTime.Now.ToString("mm:ss"),
                 Value = random.Next(30, 200)
             });
         }
         Task.Run(async () =>
         {
             while (true)
             {
                 await Task.Delay(2000);
                 Application.Current.Dispatcher.Invoke(() =>
                 {
                     PrimaryList.Add(new PrimaryItemModel
                     {
                         XLabel = DateTime.Now.ToString("mm:ss"),
                         Value = random.Next(30, 200)

                     });
                     PrimaryList.RemoveAt(0);

                 });
             }
         });   
     }
 }

XML 复制代码

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="5*"/>
    </Grid.ColumnDefinitions>
    <ItemsControl Grid.Column="1" ItemsSource="{Binding PrimaryList}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Rows="1"></UniformGrid>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid x:Name="grid" Background="Transparent">
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition Height="30"/>
                    </Grid.RowDefinitions>
                    <StackPanel VerticalAlignment="Bottom">
                        <TextBlock Text="{Binding Value}" HorizontalAlignment="Center"/>
                        <Border Width="10" Height="{Binding Value}" Background="Orange" 
                                VerticalAlignment="Bottom" CornerRadius="5,5,0,0"/>
                    </StackPanel>
                    <Border BorderBrush="#DDD" BorderThickness="0,1,0,0" Grid.Row="1"/>
                    <TextBox Text="{Binding XLabel}" Grid.Row="1" VerticalAlignment="Center"
                             HorizontalAlignment="Center"/>
                </Grid>
                <DataTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="grid" Property="Background" Value="#EEE"/>
                    </Trigger>
                </DataTemplate.Triggers>
            </DataTemplate>
           
        </ItemsControl.ItemTemplate>
        
    </ItemsControl>   
</Grid>