WPF實現特殊統計圖_ZenDei技術網路在線

效果圖： ActiveFunItem.xaml代碼： <UserControl x:Class="SunCreate.Vipf.Client.UI.ActiveFunItem" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentat ...

效果圖：

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>

View Code

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

    }
}

View Code

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>

View Code

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.Origi