wpf 通过绑定实现直方图（柱状图）

1 新建wpf应用

2 新建MainViewModel

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Text;
using System.Threading.Tasks;
using System.Windows;

namespace WpfApp5
{
    public class MainViewModel:INotifyPropertyChanged
    {
       

        public ObservableCollection<double> Values { get; set; } = new ObservableCollection<double>();

        public MainViewModel()
        {
            
            Random random = new Random();
            for (int i = 0; i < 30; i++)
            {
                Values.Add(random.NextDouble() * 100);
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }
}

3 在MainWindow.xaml里面添加ItemsControl，并绑定ItemsSource为Values，

通过修改数据模板和面板模板实现水平直方图和垂直直方图，已经均匀分布的直方图

<Window x:Class="WpfApp5.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp5"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <!--<ItemsControl ItemsSource="{Binding Values}" Height="100">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border Width="{Binding}" Height="10" Background="Orange" HorizontalAlignment="Left" Margin="0,5"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>-->

        <!--<ItemsControl ItemsSource="{Binding Values}" Height="100">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border Height="{Binding}" Width="10" Background="Orange" VerticalAlignment="Bottom" Margin="5,0"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>-->

        <ItemsControl ItemsSource="{Binding Values}" Height="100">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Rows="1" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border Height="{Binding}" Width="10" Background="Orange" VerticalAlignment="Bottom" Margin="5,0"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>