本篇文章为大家展示了如何实现一个条形图,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
有没有这种场景:开源控件库或者收费的控件库,条形图或者柱状图都非常强大,但我的业务就是不符合,就是要自己设计呢?本文通过简单的实现一个条形图功能,以后类似的统计图可以在这上面进行修改,原理是类似的。
小编使用.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>
上述内容就是如何实现一个条形图,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。