5.2.1 WPF 通过ItemControl自己做柱状图

最终效果如下图:

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>
相关推荐
水w3 分钟前
【Android Studio】如何卸载干净(详细步骤)
android·开发语言·android studio·activity
weixin_307779133 分钟前
判断HiveQL语句为建表语句的识别函数
开发语言·数据仓库·hive·c#
雷渊5 分钟前
深入分析mybatis中#{}和${}的区别
java·后端·面试
一顿操作猛如虎,啥也不是!8 分钟前
JAVA-Spring Boot多线程
开发语言·python
亦是远方11 分钟前
2025华为软件精英挑战赛2600w思路分享
android·java·华为
v维焓17 分钟前
C++(思维导图更新)
开发语言·c++·算法
jiet_h18 分钟前
深入解析KSP(Kotlin Symbol Processing):现代Android开发的新利器
android·开发语言·kotlin
_未知_开摆19 分钟前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
花月C25 分钟前
Spring IOC:容器管理与依赖注入秘籍
java·开发语言·rpc
ylfhpy32 分钟前
Java面试黄金宝典22
java·开发语言·算法·面试·职场和发展