WPF实现特殊统计图
Posted lonelyxmas
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了WPF实现特殊统计图相关的知识,希望对你有一定的参考价值。
原文:WPF实现特殊统计图效果图:
ActiveFunItem.xaml代码:
<UserControl x:Class="SunCreate.Vipf.Client.UI.ActiveFunItem" 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" d:DesignHeight="74" d:DesignWidth="50"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="{Binding ItemWidth}"></RowDefinition> <RowDefinition Height="24"></RowDefinition> </Grid.RowDefinitions> <Border Width="{Binding ItemWidth}" Height="{Binding ItemWidth}" Background="{Binding FillColor}" BorderBrush="{Binding BorderColor}" BorderThickness="2" CornerRadius="{Binding ItemWidthHalf}" > <Border.ToolTip> <ToolTip> <ToolTip.Template> <ControlTemplate> <Border Background="#88333333" CornerRadius="4"> <TextBlock Margin="5" Foreground="#f2f2f2" Text="{Binding FunName}"></TextBlock> </Border> </ControlTemplate> </ToolTip.Template> </ToolTip> </Border.ToolTip> <Image Width="{Binding IconWidth}" Height="{Binding IconWidth}" Stretch="Fill" Source="{Binding Image}" VerticalAlignment="Center" HorizontalAlignment="Center"></Image> </Border> <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center"> <TextBlock Text="{Binding Count}" Foreground="#008bf1" FontSize="20" VerticalAlignment="Center"></TextBlock> <TextBlock Text="次" Foreground="#008bf1" FontSize="20" VerticalAlignment="Center"></TextBlock> </StackPanel> </Grid> </UserControl>
ActiveFunItem.xaml.cs代码:
using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace SunCreate.Vipf.Client.UI { /// <summary> /// 图标控件 /// </summary> public partial class ActiveFunItem : UserControl, INotifyPropertyChanged { private Thickness _OriginalMargin; /// <summary> /// 初始Margin /// </summary> public Thickness OriginalMargin { get { return _OriginalMargin; } set { _OriginalMargin = value; OnPropertyChanged("OriginalMargin"); } } private int _ItemWidth = 50; /// <summary> /// 圆宽度 /// </summary> public int ItemWidth { get { return _ItemWidth; } set { _ItemWidth = value; OnPropertyChanged("ItemWidth"); ItemWidthHalf = ItemWidth / 2; IconWidth = (int)(ItemWidth * 0.65); } } private int _ItemWidthHalf = 25; /// <summary> /// 圆宽度一半 /// </summary> public int ItemWidthHalf { get { return _ItemWidthHalf; } set { _ItemWidthHalf = value; OnPropertyChanged("ItemWidthHalf"); } } private int _IconWidth = 30; /// <summary> /// 图标宽度 /// </summary> public int IconWidth { get { return _IconWidth; } set { _IconWidth = value; OnPropertyChanged("IconWidth"); } } private SolidColorBrush _FillColor = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#ff9848")); /// <summary> /// 填充颜色 /// </summary> public SolidColorBrush FillColor { get { return _FillColor; } set { _FillColor = value; OnPropertyChanged("FillColor"); } } private SolidColorBrush _BorderColor = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#ed6900")); /// <summary> /// 边框颜色 /// </summary> public SolidColorBrush BorderColor { get { return _BorderColor; } set { _BorderColor = value; OnPropertyChanged("BorderColor"); } } private ImageSource _Image = new BitmapImage(new Uri("/SunCreate.Vipf.Client.Resources;component/Image/_ZZ/ManagerMainPage/活跃功能-人脸分析.png", UriKind.RelativeOrAbsolute)); /// <summary> /// 图标的图片 /// </summary> public ImageSource Image { get { return _Image; } set { _Image = value; OnPropertyChanged("Image"); } } private int _Count = 3600; /// <summary> /// 活跃次数 /// </summary> public int Count { get { return _Count; } set { _Count = value; OnPropertyChanged("Count"); } } private string _FunName; /// <summary> /// 功能名称 /// </summary> public string FunName { get { return _FunName; } set { _FunName = value; OnPropertyChanged("FunName"); } } public ActiveFunItem() { InitializeComponent(); this.DataContext = this; } #region INotifyPropertyChanged接口 public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged(string name) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(name)); } } #endregion } }
ActiveFunction.xaml代码:
<UserControl x:Class="SunCreate.Vipf.Client.UI.ActiveFunction" 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" xmlns:local="clr-namespace:SunCreate.Vipf.Client.UI" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300" Loaded="UserControl_Loaded"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="1*"></RowDefinition> </Grid.RowDefinitions> <Border CornerRadius="5 5 0 0" Background="#368bf0"> <StackPanel Orientation="Horizontal" Margin="10 0 0 0"> <Image Width="14" Source="/SunCreate.Vipf.Client.Resources;component/Image/_ZZ/ManagerMainPage/面板-活跃功能.png"></Image> <TextBlock Margin="10 0 0 0" Text="活跃功能" FontSize="14" Foreground="#fff" VerticalAlignment="Center"></TextBlock> </StackPanel> </Border> <Border Grid.Row="1" CornerRadius="0 0 5 5" Background="#ffffff" BorderThickness="1 0 1 1" BorderBrush="#dddddd" SnapsToDevicePixels="True"> <Grid> <Viewbox x:Name="viewbox" Stretch="Fill" Height="260" Width="260"> <Canvas Width="320" Height="320"> <Grid> <Grid Width="300" Height="300"> <Grid.Background> <ImageBrush Stretch="Fill" ImageSource="/SunCreate.Vipf.Client.Resources;component/Image/_ZZ/ManagerMainPage/活跃总量.png"/> </Grid.Background> </Grid> <Grid x:Name="container" Width="320" Height="320"> <local:ActiveFunItem VerticalAlignment="Top" HorizontalAlignment="Left" Margin="76,20,0,0"></local:ActiveFunItem> <local:ActiveFunItem VerticalAlignment="Top" HorizontalAlignment="Left" Margin="173,20,0,0"></local:ActiveFunItem> <local:ActiveFunItem VerticalAlignment="Top" HorizontalAlignment="Left" Margin="240,79,0,0"></local:ActiveFunItem> <local:ActiveFunItem VerticalAlignment="Top" HorizontalAlignment="Left" Margin="241,182,0,0"></local:ActiveFunItem> <local:ActiveFunItem VerticalAlignment="Top" HorizontalAlignment="Left" Margin="171,247,0,0"></local:ActiveFunItem> <local:ActiveFunItem VerticalAlignment="Top" HorizontalAlignment="Left" Margin="75,247,0,0"></local:ActiveFunItem> <local:ActiveFunItem VerticalAlignment="Top" HorizontalAlignment="Left" Margin="11,178,0,0"></local:ActiveFunItem> <local:ActiveFunItem VerticalAlignment="Top" HorizontalAlignment="Left" Margin="12,82,0,0"></local:ActiveFunItem> </Grid> <TextBlock Text="{Binding Count}" FontSize="30" FontWeight="Bold" Foreground="#ff2121" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock> </Grid> </Canvas> </Viewbox> </Grid> </Border> </Grid> </UserControl>
ActiveFunction.xaml.cs代码:
using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace SunCreate.Vipf.Client.UI { /// <summary> /// 活跃功能 /// </summary> public partial class ActiveFunction : UserControl, INotifyPropertyChanged { #region 字段属性 /// <summary> /// 图标控件集合 /// </summary> private List<ActiveFunItem> _list = new List<ActiveFunItem>(); /// <summary> /// 图标背景颜色 /// </summary> private SolidColorBrush[] _fillColorArr = new SolidColorBrush[8] { new SolidColorBrush((Color)ColorConverter.ConvertFromString("#ff9848")), new SolidColorBrush((Color)ColorConverter.ConvertFromString("#009df0")), new SolidColorBrush((Color)ColorConverter.ConvertFromString("#009df0")), new SolidColorBrush((Color)ColorConverter.ConvertFromString("#ff211b")), new SolidColorBrush((Color)ColorConverter.ConvertFromString("#009df0")), new SolidColorBrush((Color)ColorConverter.ConvertFromString("#009df0")), new SolidColorBrush((Color)ColorConverter.ConvertFromString("#00d235")), new SolidColorBrush((Color)ColorConverter.ConvertFromString("#009df0")) }; /// <summary> /// 图标背景边框颜色 /// </summary> private SolidColorBrush[] _borderColorArr = new SolidColorBrush[8] { new SolidColorBrush((Color)ColorConverter.ConvertFromString("#ed6900")), new SolidColorBrush((Color)ColorConverter.ConvertFromString("#0065d1")), new SolidColorBrush((Color)ColorConverter.ConvertFromString("#0065d1")), new SolidColorBrush((Color)ColorConverter.ConvertFromString("#b40000")), new SolidColorBrush((Color)ColorConverter.ConvertFromString("#0065d1")), new SolidColorBrush((Color)ColorConverter.ConvertFromString("#0065d1")), new SolidColorBrush((Color)ColorConverter.ConvertFromString("#00912b")), new SolidColorBrush((Color)ColorConverter.ConvertFromString("#0065d1")) }; /// <summary> /// 图标大小 /// </summary> private int[] _widthArr = new int[8] { 90, 80, 70, 60, 55, 50, 45, 40 }; /// <summary> /// 位置数组 /// </summary> private int[] _posArr = new int[8] { 3, 0, 6, 2, 7, 4, 1, 5 }; /// <summary> /// 功能名称图标集合 /// </summary> private Dictionary<string, ImageSource> _dictNameIcon = new Dictionary<string, ImageSource>(); private int _Count; /// <summary> /// 活跃总量 /// </summary> public int Count { get { return _Count; } set { _Count = value; OnPropertyChanged("Count"); } } #endregion public ActiveFunction() { InitializeComponent(); this.DataContext = this; this.Count = 21834; //活跃总量 #region 功能名称图标集合(后期补充更多功能名称图标) _dictNameIcon.Add("车辆分析", new BitmapImage(new Uri("/SunCreate.Vipf.Client.Resources;component/Image/_ZZ/ManagerMainPage/活跃功能-车辆分析.png", UriKind.RelativeOrAbsolute))); _dictNameIcon.Add("行为分析", new BitmapImage(new Uri("/SunCreate.Vipf.Client.Resources;component/Image/_ZZ/ManagerMainPage/活跃功能-行为分析.png", UriKind.RelativeOrAbsolute))); _dictNameIcon.Add("结构化分析", new BitmapImage(new Uri("/SunCreate.Vipf.Client.Resources;component/Image/_ZZ/ManagerMainPage/活跃功能-结构化分析.png", UriKind.RelativeOrAbsolute))); _dictNameIcon.Add("历史视频", new BitmapImage(new Uri("/SunCreate.Vipf.Client.Resources;component/Image/_ZZ/ManagerMainPage/活跃功能-历史视频.png", UriKind.RelativeOrAbsolute))); _dictNameIcon.Add("人脸分析", new BitmapImage(new Uri("/SunCreate.Vipf.Client.Resources;component/Image/_ZZ/ManagerMainPage/活跃功能-人脸分析.png", UriKind.RelativeOrAbsolute))); _dictNameIcon.Add("实时视频", new BitmapImage(new Uri("/SunCreate.Vipf.Client.Resources;component/Image/_ZZ/ManagerMainPage/活跃功能-实时视频.png", UriKind.RelativeOrAbsolute))); _dictNameIcon.Add("视频巡查", new BitmapImage(new Uri("/SunCreate.Vipf.Client.Resources;component/Image/_ZZ/ManagerMainPage/活跃功能-视频巡查.png", UriKind.RelativeOrAbsolute))); _dictNameIcon.Add("资源申请", new BitmapImage(new Uri("/SunCreate.Vipf.Client.Resources;component/Image/_ZZ/ManagerMainPage/活跃功能-资源申请.png", UriKind.RelativeOrAbsolute))); #endregion #region 初始化控件 int i = 0; foreach (ActiveFunItem item in container.Children) { item.OriginalMargin = new Thickness(item.Margin.Left + 25, item.Margin.Top + 25, 0, 0); item.FillColor = _fillColorArr[i]; item.BorderColor = _borderColorArr[i]; _list.Add(item); i++; } #endregion Statistic(); } #region 统计 /// <summary> /// 统计 /// </summary> public void Statistic() { #region 活跃功能活跃次数测试数据 Dictionary<string, int> dict = new Dictionary<string, int>(); dict.Add("人脸分析", 1223); dict.Add("行为分析", 239); dict.Add("结构化分析", 621); dict.Add("历史视频", 1520); dict.Add("实时视频", 523); dict.Add("车辆分析", 805); dict.Add("视频巡查", 89); dict.Add("资源申请", 363); #endregion #region 重新计算ActiveFunItem属性 List<KeyValuePair<string, int>> _sortedList = dict.ToList(); _sortedList.Sort((a, b) => b.Value - a.Value); //对统计数据排序 for (int k = 0; k < _sortedList.Count; k++) { KeyValuePair<string, int> keyValuePair = _sortedList[k]; int index = _posArr[k]; ActiveFunItem funItem = _list[index]; funItem.ItemWidth = _widthArr[k]; funItem.Margin = new Thickness(funItem.OriginalMargin.Left - funItem.ItemWidthHalf, funItem.OriginalMargin.Top - funItem.ItemWidthHalf, 0, 0); funItem.Count = keyValuePair.Value; funItem.FunName = keyValuePair.Key; if (_dictNameIcon.Keys.Contains(keyValuePair.Key)) { funItem.Image = _dictNameIcon[keyValuePair.Key]; } else { funItem.Image = null; } } #endregion } #endregion #region INotifyPropertyChanged接口 public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged(string name) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(name)); } } #endregion #region UserControl_Loaded private void UserControl_Loaded(object sender, RoutedEventArgs e) { double h = this.ActualHeight - 32; double w = this.ActualHeight - 2; if (h < w) { viewbox.Height = h; viewbox.Width = h; } else { viewbox.Height = w; viewbox.Width = w; } } #endregion } }
以上是关于WPF实现特殊统计图的主要内容,如果未能解决你的问题,请参考以下文章