将wpf编写的用户控件winform_从头实现一个WPF条形图

时间如流水，只能流去不流回！

点赞再看，养成习惯，这是您给我创作的动力！

本文 Dotnet9 https://dotnet9.com 已收录，站长乐于分享dotnet相关技术，比如Winform、WPF、ASP.NET Core等，亦有C++桌面相关的Qt Quick和Qt Widgets等，只分享自己熟悉的、自己会的。

阅读导航：

• 一、先看效果
• 二、本文背景
• 三、代码实现
• 四、文章参考
• 五、代码下载

一、先看效果

二、本文背景

有没有这种场景：开源控件库或者收费的控件库，条形图或者柱状图都非常强大，但我的业务就是不符合，就是要自己设计呢？本文通过简单的实现一个条形图功能，以后类似的统计图可以在这上面进行修改，原理是类似的。

三、代码实现

小编使用.Net Core 3.1创建的WPF工程，创建名称为“BarChart”的解决方案后，添加名称为”Bar“的WPF用户控件，这个控件就是上图中的单个柱子，下面是Bar.xaml代码

Bar.xaml.cs代码，主要是绑定前景色及背景色，及柱子百分比值。

using System.ComponentModel;using System.Windows;using System.Windows.Controls;using System.Windows.Media;namespace BarChart{    ///     /// BarChart.xaml 的交互逻辑    ///     public partial class Bar  : UserControl, INotifyPropertyChanged    {        public event PropertyChangedEventHandler PropertyChanged;        private void NotifyPropertyChanged(string info)        {            if (PropertyChanged != null)            {                PropertyChanged(this, new PropertyChangedEventArgs(info));            }        }        private double _value;        public double Value        {            get { return _value; }            set            {                _value = value;                UpdateBarHeight();                NotifyPropertyChanged("Value");            }        }        private double maxValue;        public double MaxValue        {            get { return maxValue; }            set            {                maxValue = value;                UpdateBarHeight();                NotifyPropertyChanged("MaxValue");            }        }        private double barHeight;        public double BarHeight        {            get { return barHeight; }            set            {                barHeight = value;                NotifyPropertyChanged("BarHeight");            }        }        private Brush color;        public Brush Color        {            get { return color; }            set            {                color = value;                NotifyPropertyChanged("Color");            }        }        private void UpdateBarHeight()        {            if (maxValue > 0)            {                var percent = (_value * 100) / maxValue;                BarHeight = (percent * this.ActualHeight) / 100;            }        }        public Bar()        {            InitializeComponent();            this.DataContext = this;            color = Brushes.Black;        }        private void UserControl_Loaded(object sender, RoutedEventArgs e)        {            UpdateBarHeight();        }        private void Grid_SizeChanged(object sender, SizeChangedEventArgs e)        {            UpdateBarHeight();        }    }}

主窗体MainWindow.xaml，添加显示的业务数据，目前只是展示了进度值，其他标签只要你看懂了代码，很好加的，比如每根柱子，上面颜色显示一种意义名称、下面显示另一种意义名称。

四、文章参考

参考：
Design com WPF ： https://www.youtube.com/watch?v=3Rz9YrwrznQ

五、代码下载

文章中代码已经全部贴出，小编这里还是建议：能使用开源的控件库还是使用开源控件库吧，自己定义确实有点麻烦。

本文只是给个例子，方便自定义扩展。

除非注明，文章均由 Dotnet9 整理发布，欢迎转载。

转载请注明本文地址：https://dotnet9.com/2019/12/it-technology/csharp/wpf/custom-barchart.html