From ea35183f1c869486e443f9e9b56bd8f7f28e20aa Mon Sep 17 00:00:00 2001
From: noberumotto <root@thelittlepandaisbehind.com>
Date: Fri, 17 Jun 2022 08:34:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=9F=B1=E7=8A=B6=E5=9B=BE?=
 =?UTF-8?q?=E6=8E=A7=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 UI/Controls/Charts/Charts.cs |  70 +++++++++++++++++++++++-
 UI/Themes/Charts/Charts.xaml | 101 ++++++++++++++++++++++++++++++++++-
 2 files changed, 167 insertions(+), 4 deletions(-)

diff --git a/UI/Controls/Charts/Charts.cs b/UI/Controls/Charts/Charts.cs
index 941dec2..d4806ed 100644
--- a/UI/Controls/Charts/Charts.cs
+++ b/UI/Controls/Charts/Charts.cs
@@ -295,6 +295,47 @@ namespace UI.Controls.Charts
 
         #endregion
 
+        public bool IsShowValuesPopup
+        {
+            get { return (bool)GetValue(IsShowValuesPopupProperty); }
+            set { SetValue(IsShowValuesPopupProperty, value); }
+        }
+        public static readonly DependencyProperty IsShowValuesPopupProperty =
+            DependencyProperty.Register("IsShowValuesPopup",
+                typeof(bool),
+                typeof(Charts),
+                new PropertyMetadata(false));
+        public FrameworkElement ValuesPopupPlacementTarget
+        {
+            get { return (FrameworkElement)GetValue(ValuesPopupPlacementTargetProperty); }
+            set { SetValue(ValuesPopupPlacementTargetProperty, value); }
+        }
+        public static readonly DependencyProperty ValuesPopupPlacementTargetProperty =
+            DependencyProperty.Register("ValuesPopupPlacementTarget",
+                typeof(FrameworkElement),
+                typeof(Charts));
+
+        public List<ChartColumnInfoModel> ColumnValuesInfoList
+        {
+            get { return (List<ChartColumnInfoModel>)GetValue(ColumnValuesInfoListProperty); }
+            set { SetValue(ColumnValuesInfoListProperty, value); }
+        }
+        public static readonly DependencyProperty ColumnValuesInfoListProperty =
+            DependencyProperty.Register("ColumnValuesInfoList",
+                typeof(List<ChartColumnInfoModel>),
+                typeof(Charts)
+                );
+
+        public double ValuesPopupHorizontalOffset
+        {
+            get { return (double)GetValue(ValuesPopupHorizontalOffsetProperty); }
+            set { SetValue(ValuesPopupHorizontalOffsetProperty, value); }
+        }
+        public static readonly DependencyProperty ValuesPopupHorizontalOffsetProperty =
+            DependencyProperty.Register("ValuesPopupHorizontalOffset",
+                typeof(double),
+                typeof(Charts));
+
         private static void OnPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
         {
             var charts = (d as Charts);
@@ -853,7 +894,13 @@ namespace UI.Controls.Charts
                     Width = new GridLength(1, GridUnitType.Star)
                 });
 
+                var valueContainer = new Grid();
+
+                Grid.SetColumn(valueContainer, i);
+                ColumnContainer.Children.Add(valueContainer);
 
+                var valuesPopupList = new List<ChartColumnInfoModel>();
+                
                 for (int di = 0; di < columnCount; di++)
                 {
                     var item = list[di];
@@ -866,11 +913,30 @@ namespace UI.Controls.Charts
                     column.Color = item.Color;
                     column.ColumnName = item.ColumnNames != null && item.ColumnNames.Length > 0 ? item.ColumnNames[i] : (i + NameIndexStart).ToString();
                     Panel.SetZIndex(column, column.Value > 0 ? -(int)column.Value : 0);
-                    Grid.SetColumn(column, i);
-                    ColumnContainer.Children.Add(column);
+
+                    valueContainer.Children.Add(column);
+
+                    valuesPopupList.Add(new ChartColumnInfoModel()
+                    {
+                        Color = item.Color,
+                        Name = item.Name,
+                        Icon = item.Icon,
+                        Text = Covervalue(column.Value) + Unit
+                    });
                 }
 
+                valueContainer.MouseEnter += (e, c) =>
+                {
+                    ColumnValuesInfoList = valuesPopupList;
+                    ValuesPopupPlacementTarget = valueContainer;
+                    IsShowValuesPopup = true;
 
+                    ValuesPopupHorizontalOffset = -17.5 + (valueContainer.ActualWidth / 2);
+                };
+                valueContainer.MouseLeave += (e, c) =>
+                {
+                    IsShowValuesPopup = false;
+                };
             }
 
             var infoList = new List<ChartColumnInfoModel>();
diff --git a/UI/Themes/Charts/Charts.xaml b/UI/Themes/Charts/Charts.xaml
index 15dcbd1..c36be56 100644
--- a/UI/Themes/Charts/Charts.xaml
+++ b/UI/Themes/Charts/Charts.xaml
@@ -38,12 +38,109 @@
                                     <TextBlock Margin="0,10,0,0" Text="{TemplateBinding Total}" FontSize="20" Foreground="#1a1919"/>
                                 </StackPanel>
                                 <Grid Grid.Row="1" Margin="0,20,0,0">
+                                    <Popup
+                                    AllowsTransparency="True"
+                                    IsOpen="{TemplateBinding IsShowValuesPopup}"
+                                    Placement="Top"
+                                        PlacementTarget="{TemplateBinding ValuesPopupPlacementTarget}"
+                                        HorizontalOffset="{TemplateBinding ValuesPopupHorizontalOffset}">
+                                        <Border
+                                        Background="White"
+                                        CornerRadius="12"
+                                        Padding="10"
+                                        Margin="10">
+                                            <Border.Effect>
+                                                <DropShadowEffect BlurRadius="10" ShadowDepth="0" Direction="0" Color="Gray" Opacity=".1"/>
+                                            </Border.Effect>
+
+                                            <Grid>
+                                                <Path 
+                      Width="15"
+                      Height="15"
+                      SnapsToDevicePixels="False"
+                      Data="M 0 0 L 7.5 7.5 L 15 0" Fill="White"
+                                        Stroke="White"
+                                        StrokeThickness="1"
+                                        VerticalAlignment="Bottom"
+                                        HorizontalAlignment="Left"
+                                        Margin="0,0,0,-22"
+                                        />
+                                                <!--列数据-->
+                                                <ListView ItemsSource="{TemplateBinding ColumnValuesInfoList}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
+                                                    <ListBox.Resources>
+                                                        <Style TargetType="{x:Type ListView}">
+                                                            <Setter Property="OverridesDefaultStyle" Value="True"/>
+
+                                                            <Setter Property="Template">
+                                                                <Setter.Value>
+                                                                    <ControlTemplate TargetType="{x:Type ListView}">
+                                                                        <Border>
+                                                                            <ItemsPresenter />
+                                                                        </Border>
+                                                                    </ControlTemplate>
+                                                                </Setter.Value>
+                                                            </Setter>
+                                                        </Style>
+                                                        <Style TargetType="{x:Type ListViewItem}">
+                                                            <Setter Property="OverridesDefaultStyle" Value="True"/>
+                                                            <Setter Property="Template">
+                                                                <Setter.Value>
+                                                                    <ControlTemplate TargetType="{x:Type ListViewItem}">
+                                                                        <Border BorderBrush="Transparent" BorderThickness="2" x:Name="Border" Background="White" Margin="0" CornerRadius="10">
+
+                                                                            <ContentPresenter/>
+                                                                        </Border>
+                                                                    </ControlTemplate>
+                                                                </Setter.Value>
+                                                            </Setter>
+
+                                                        </Style>
+                                                    </ListBox.Resources>
+                                                    <ListBox.ItemsPanel>
+                                                        <ItemsPanelTemplate>
+                                                            <VirtualizingStackPanel/>
+                                                        </ItemsPanelTemplate>
+                                                    </ListBox.ItemsPanel>
+                                                    <ListView.ItemTemplate>
+                                                        <DataTemplate>
+
+                                                            <StackPanel>
+                                                                <Grid>
+                                                                    <Grid.ColumnDefinitions>
+                                                                        <ColumnDefinition Width="20"/>
+                                                                        <ColumnDefinition Width="auto"/>
+                                                                        <ColumnDefinition Width="auto"/>
+
+                                                                    </Grid.ColumnDefinitions>
+                                                                    <Border Width="10" CornerRadius="4" Height="10" Background="{Binding Color,Converter={StaticResource HextoColorConverter}}">
+                                                                        <!--颜色-->
+                                                                    </Border>
+                                                                    
+                                                                    <Border Grid.Column="1" Margin="5,0,0,0">
+                                                                        <!--名称-->
+                                                                        <TextBlock Foreground="#5c5c5c" VerticalAlignment="Center" Text="{Binding Name}" FontSize="12"/>
+                                                                    </Border>
+                                                                    <Border Grid.Column="2">
+                                                                        <!--总计和百分比-->
+                                                                        <TextBlock FontSize="12" Margin="5,0,0,0" Foreground="#FF8A8A8A" VerticalAlignment="Center" Text="{Binding Text}"/>
+
+                                                                    </Border>
+
+                                                                </Grid>
+
+                                                            </StackPanel>
+                                                        </DataTemplate>
+                                                    </ListView.ItemTemplate>
+                                                </ListView>
+                                            </Grid>
+                                        </Border>
+                                    </Popup>
                                     <TextBlock Panel.ZIndex="2" Margin="0,-8,0,0" HorizontalAlignment="Right" VerticalAlignment="Top" Text="{TemplateBinding Maximum}" Foreground="#ccc" FontSize="12"/>
 
-                                    <TextBlock Panel.ZIndex="2" HorizontalAlignment="Right" VerticalAlignment="Center" Text="{TemplateBinding Median}" Foreground="#ccc" FontSize="12"/>
+                                    <TextBlock Panel.ZIndex="2" HorizontalAlignment="Right" VerticalAlignment="Center" Text="{TemplateBinding Median}" Foreground="#ccc" FontSize="12" Margin="0,0,0,30"/>
                                     <Line Stroke="#ccc" Opacity="1" HorizontalAlignment="Stretch"
                   X2="{Binding ActualWidth, RelativeSource={RelativeSource Self}}"
-                  StrokeDashArray="2 5" StrokeThickness=".8" VerticalAlignment="Center" Margin="10,0"/>
+                  StrokeDashArray="2 5" StrokeThickness=".8" VerticalAlignment="Center" Margin="10,0,10,30"/>
 
                                     <Line Stroke="#ccc" Opacity="1" HorizontalAlignment="Stretch"
                   X2="{Binding ActualWidth, RelativeSource={RelativeSource Self}}"
-- 
GitLab