1.
最终效果如下图:
1.1 准备数据 ViewModel
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);});}}); }}
<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>