從頭實現一個WPF條形圖

時間如流水,只能流去不流回!html

點贊再看,養成習慣,這是您給我創做的動力!web

本文 Dotnet9 https://dotnet9.com 已收錄,站長樂於分享dotnet相關技術,好比Winform、WPF、ASP.NET Core等,亦有C++桌面相關的Qt Quick和Qt Widgets等,只分享本身熟悉的、本身會的。express

閱讀導航:微信

  • 1、先看效果
  • 2、本文背景
  • 3、代碼實現
  • 4、文章參考
  • 5、代碼下載

1、先看效果

從頭實現一個WPF條形圖

2、本文背景

有沒有這種場景:開源控件庫或者收費的控件庫,條形圖或者柱狀圖都很是強大,但個人業務就是不符合,就是要本身設計呢?本文經過簡單的實現一個條形圖功能,之後相似的統計圖能夠在這上面進行修改,原理是相似的。ui

3、代碼實現

小編使用.Net Core 3.1建立的WPF工程,建立名稱爲「BarChart」的解決方案後,添加名稱爲」Bar「的WPF用戶控件,這個控件就是上圖中的單個柱子,下面是Bar.xaml代碼this

 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代碼,主要是綁定前景色及背景色,及柱子百分比值。spa

 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 }

 

主窗體MainWindow.xaml,添加顯示的業務數據,目前只是展現了進度值,其餘標籤只要你看懂了代碼,很好加的,好比每根柱子,上面顏色顯示一種意義名稱、下面顯示另外一種意義名稱。設計

 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>

 

4、文章參考

參考:
Design com WPF :    https://www.youtube.com/watch?v=3Rz9YrwrznQcode

5、代碼下載

文章中代碼已經所有貼出,小編這裏仍是建議:能使用開源的控件庫仍是使用開源控件庫吧,本身定義確實有點麻煩。orm

本文只是給個例子,方便自定義擴展。

 

 

除非註明,文章均由 Dotnet9 整理髮布,歡迎轉載。

轉載請註明本文地址:https://dotnet9.com/2019/12/it-technology/csharp/wpf/custom-barchart.html

歡迎掃描下方二維碼關注 Dotnet9 的微信公衆號,本站會及時推送最新技術文章(微信公衆號「dotnet9_com」):

微信搜索公衆號「dotnet9_com」添加關注

 

若有收穫,請大力轉發,給Dotnet9贊助和支持,謝謝你們對dotnet技術的關注和支持 。

本站使用 wpcom 的 JustNews主題

相關文章
相關標籤/搜索