最终效果如下图:

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>