Time is like water, you can not go back into the flow!
Thumbs up again, a habit, which is that you give me creative power!
This article Dotnet9 https://dotnet9.com already been included, the owners are happy to share dotnet related technologies, such as Winform, WPF, ASP.NET Core, etc., are also related to the desktop C ++ Qt Quick and Qt Widgets, just share their own familiar, own will.
Read Navigation:
- First, look at the effect
- Second, text background
- Third, code implementation
- Fourth, the article reference
- Fifth, the code download
First, look at the effect
Second, text background
There is no such scene: the open source control library control library or charges, bar charts or bar graphs are very strong, but my business is not, is to design it yourself? In this paper, after a similar chart in it can be modified to achieve a simple bar graph functionality through the principle is similar.
Third, code implementation
After small series using WPF .Net Core 3.1 works created, create a solution named "BarChart", add the name "Bar" of WPF user control, this control is a single column in the figure above, the following is the code Bar.xaml
1 <UserControl x:Class="BarChart.Bar" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 5 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 6 mc:Ignorable="d" 7 MinHeight="20" Width="Auto" Loaded="UserControl_Loaded"> 8 <Grid SizeChanged="Grid_SizeChanged"> 9 <Grid Background="{Binding Background,ElementName=border}" Opacity="0.3"/> 10 <Border x:Name="border" Background="{Binding Color}" VerticalAlignment="Bottom" Height="{Binding BarHeight}"/> 11 <TextBlock VerticalAlignment="Center" Margin="3" HorizontalAlignment="Center" Text="{Binding Value}" FontSize="20"> 12 <TextBlock.Effect> 13 <DropShadowEffect BlurRadius="1" ShadowDepth="0" Color="White"/> 14 </TextBlock.Effect> 15 </TextBlock> 16 </Grid> 17 </UserControl>
Bar.xaml.cs the code, mainly to bind the foreground and background color, and the percentage of the value of the column.
1 using System.ComponentModel; 2 using System.Windows; 3 using System.Windows.Controls; 4 using System.Windows.Media; 5 6 namespace BarChart 7 { 8 /// <summary> 9 /// BarChart.xaml 的交互逻辑 10 /// </summary> 11 public partial class Bar : UserControl, INotifyPropertyChanged 12 { 13 public event PropertyChangedEventHandler PropertyChanged; 14 private void NotifyPropertyChanged(string info) 15 { 16 if (PropertyChanged != null) 17 { 18 PropertyChanged(this, new PropertyChangedEventArgs(info)); 19 } 20 } 21 22 private double _value; 23 public double Value 24 { 25 get { return _value; } 26 set 27 { 28 _value = value; 29 UpdateBarHeight(); 30 NotifyPropertyChanged("Value"); 31 } 32 } 33 34 private double maxValue; 35 public double MaxValue 36 { 37 get { return maxValue; } 38 set 39 { 40 maxValue = value; 41 UpdateBarHeight(); 42 NotifyPropertyChanged("MaxValue"); 43 } 44 } 45 46 private double barHeight; 47 public double BarHeight 48 { 49 get { return barHeight; } 50 set 51 { 52 barHeight = value; 53 NotifyPropertyChanged("BarHeight"); 54 } 55 } 56 57 private Brush color; 58 public Brush Color 59 { 60 get { return color; } 61 set 62 { 63 color = value; 64 NotifyPropertyChanged("Color"); 65 } 66 } 67 68 private void UpdateBarHeight() 69 { 70 if (maxValue > 0) 71 { 72 var percent = (_value * 100) / maxValue; 73 BarHeight = (percent * this.ActualHeight) / 100; 74 } 75 } 76 77 public Bar() 78 { 79 InitializeComponent(); 80 81 this.DataContext = this; 82 color = Brushes.Black; 83 } 84 85 86 private void UserControl_Loaded(object sender, RoutedEventArgs e) 87 { 88 UpdateBarHeight(); 89 } 90 91 private void Grid_SizeChanged(object sender, SizeChangedEventArgs e) 92 { 93 UpdateBarHeight(); 94 } 95 } 96 }
The main form MainWindow.xaml, adding business data, now only show the progress of the value, other labels as long as you read the code, well add, such as each column, the name of one sense above color display, shown below other name one sense.
1 <Window x:Class="BarChart.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6 xmlns:local="clr-namespace:BarChart" 7 mc:Ignorable="d" 8 Background="#FF252525" FontFamily="Nontserrrat" 9 Title="MainWindow" Height="600" Width="1080" WindowStyle="None" ResizeMode="NoResize" WindowStartupLocation="CenterScreen"> 10 <Grid> 11 <Grid.RowDefinitions> 12 <RowDefinition Height="70"/> 13 <RowDefinition Height="*"/> 14 </Grid.RowDefinitions> 15 16 <Border BorderBrush="Gray" BorderThickness="0 0 0 1"> 17 <TextBlock Text="Dotnet9.com" VerticalAlignment="Center" Margin="15" 18 Foreground="White" FontSize="24"/> 19 </Border> 20 21 <Border Grid.Row="1" Width="500" Height="300" VerticalAlignment="Top" 22 HorizontalAlignment="Left" Margin="20" Background="White" 23 BorderBrush="Gray" CornerRadius="12"> 24 <Grid> 25 <TextBlock Text="自定义条形图" Margin="10" FontSize="15"/> 26 <StackPanel Orientation="Horizontal" Height="200" VerticalAlignment="Bottom"> 27 <local:Bar Background="#FF4455AA" Color="#FF88AA55" MaxValue="100" Value="80" Margin="5"/> 28 <local:Bar Background="#FF4335AA" Color="#FF883355" MaxValue="100" Value="26" Margin="5"/> 29 <local:Bar Background="#F26455AA" Color="#FF88A355" MaxValue="100" Value="49" Margin="5"/> 30 <local:Bar Background="#FF4423AA" Color="#FF88A115" MaxValue="100" Value="23" Margin="5"/> 31 <local:Bar Background="#FF4415AA" Color="#FF887955" MaxValue="100" Value="97" Margin="5"/> 32 <local:Bar Background="#FF44513A" Color="#FF896A55" MaxValue="100" Value="68" Margin="5"/> 33 </StackPanel> 34 </Grid> 35 </Border> 36 </Grid> 37 </Window>
Fourth, the article reference
Reference:
Design COM WPF : https://www.youtube.com/watch?v=3Rz9YrwrznQ
Fifth, the code download
All articles in the code has been posted, Xiao Bian here is recommended: to use open source or open source control library control library bar, their definition is a bit of trouble.
This is only an example to facilitate custom extensions.
Except where noted, the article by Dotnet9 finishing release, welcome to reprint.
Address reprint this article please specify: https://dotnet9.com/2019/12/it-technology/csharp/wpf/custom-barchart.html
Welcome to scan the next Fanger Wei code concern Dotnet9 of public micro-channel number, this site will promptly push the latest technology (micro-channel public number "dotnet9_com"):
If the harvest, please forward vigorously, to Dotnet9 sponsorship and support , thank you for concern and support for dotnet technology.
This site uses wpcom of JustNews theme