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>
相关推荐
海绵宝宝的月光宝盒4 分钟前
[STM32] 4-1 UART与串口通信
c语言·开发语言·笔记·stm32·单片机
矢志航天的阿洪4 分钟前
伪谱法求解最优控制问题(附Python代码)
开发语言·python
码熔burning18 分钟前
【MQ篇】初识MQ!
java·微服务·mq
十步杀一人_千里不留行37 分钟前
面向 C# 初学者的完整教程
开发语言·c#
C_V_Better1 小时前
数据结构-链表
java·开发语言·数据结构·后端·链表
大阔1 小时前
详解Intent —— 移动应用开发(安卓)
java
CodeWithMe1 小时前
【C++】vector扩容缩容
开发语言·c++
想不明白的过度思考者1 小时前
Java从入门到“放弃”(精通)之旅——String类⑩
java·开发语言
敖云岚1 小时前
【LangChain4j】AI 第一弹:LangChain4j 的理解
java·人工智能·spring boot·后端·spring
xrkhy2 小时前
Collection集合,List集合,set集合,Map集合
java·数据结构·list