如何實現一個條形圖

本篇文章為大家展示了如何實現一個條形圖，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

一、先看效果

二、本文背景

有沒有這種場景：開源控件庫或者收費的控件庫，條形圖或者柱狀圖都非常強大，但我的業務就是不符合，就是要自己設計呢？本文通過簡單的實現一個條形圖功能，以后類似的統計圖可以在這上面進行修改，原理是類似的。

三、代碼實現

小編使用.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>

上述內容就是如何實現一個條形圖，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。