本篇文章为大家展示了如何实现一个条形图，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
有没有这种场景：开源控件库或者收费的控件库，条形图或者柱状图都非常强大，但我的业务就是不符合，就是要自己设计呢？本文通过简单的实现一个条形图功能，以后类似的统计图可以在这上面进行修改，原理是类似的。
小编使用.Net Core 3.1创建的WPF工程，创建名称为“BarChart”的解决方案后，添加名称为”Bar“的WPF用户控件，这个控件就是上图中的单个柱子，下面是Bar.xaml代码
计算
安全
数据库
网络和加速
企业服务
<UserControl x:Class="BarChart.Bar" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" MinHeight="20" Width="Auto" Loaded="UserControl_Loaded"> <Grid SizeChanged="Grid_SizeChanged"> <Grid Background="{Binding Background,ElementName=border}" Opacity="0.3"/> <Border x:Name="border" Background="{Binding Color}" VerticalAlignment="Bottom" Height="{Binding BarHeight}"/> <TextBlock VerticalAlignment="Center" Margin="3" HorizontalAlignment="Center" Text="{Binding Value}" FontSize="20"> <TextBlock.Effect> <DropShadowEffect BlurRadius="1" ShadowDepth="0" Color="White"/> </TextBlock.Effect> </TextBlock> </Grid></UserControl>Bar.xaml.cs代码，主要是绑定前景色及背景色，及柱子百分比值。
using System.ComponentModel;using System.Windows;using System.Windows.Controls;using System.Windows.Media;namespace BarChart{ /// <summary> /// BarChart.xaml 的交互逻辑 /// </summary> 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，添加显示的业务数据，目前只是展示了进度值，其他标签只要你看懂了代码，很好加的，比如每根柱子，上面颜色显示一种意义名称、下面显示另一种意义名称。
<Window x:Class="BarChart.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:BarChart" mc:Ignorable="d" Background="#FF252525" FontFamily="Nontserrrat" Title="MainWindow" Height="600" Width="1080" WindowStyle="None" ResizeMode="NoResize" WindowStartupLocation="CenterScreen"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="70"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Border BorderBrush="Gray" BorderThickness="0 0 0 1"> <TextBlock Text="Dotnet9.com" VerticalAlignment="Center" Margin="15" Foreground="White" FontSize="24"/> </Border> <Border Grid.Row="1" Width="500" Height="300" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="20" Background="White" BorderBrush="Gray" CornerRadius="12"> <Grid> <TextBlock Text="自定义条形图" Margin="10" FontSize="15"/> <StackPanel Orientation="Horizontal" Height="200" VerticalAlignment="Bottom"> <local:Bar Background="#FF4455AA" Color="#FF88AA55" MaxValue="100" Value="80" Margin="5"/> <local:Bar Background="#FF4335AA" Color="#FF883355" MaxValue="100" Value="26" Margin="5"/> <local:Bar Background="#F26455AA" Color="#FF88A355" MaxValue="100" Value="49" Margin="5"/> <local:Bar Background="#FF4423AA" Color="#FF88A115" MaxValue="100" Value="23" Margin="5"/> <local:Bar Background="#FF4415AA" Color="#FF887955" MaxValue="100" Value="97" Margin="5"/> <local:Bar Background="#FF44513A" Color="#FF896A55" MaxValue="100" Value="68" Margin="5"/> </StackPanel> </Grid> </Border> </Grid></Window>上述内容就是如何实现一个条形图，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://my.oschina.net/dotnet9/blog/4442830
