Skip to content

Commit

Permalink
调整图表控件最低值标注线UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@noberumotto
noberumotto committed Oct 24, 2021
1 parent c13f5ee commit 6e0e7ba
Showing 5 changed files with 229 additions and 16 deletions.
53 changes: 48 additions & 5 deletions src/Local/Project1.UI/Controls/ChartControl/Chart.cs
View file
Original file line number Diff line number Diff line change
@@ -277,6 +277,23 @@ public string AverageText
new PropertyMetadata(""));


#endregion
#region 最低值文本
/// <summary>
/// 最低值文本
/// </summary>
public string MinimumText
{
get { return (string)GetValue(MinimumTextProperty); }
set { SetValue(MinimumTextProperty, value); }
}
public static readonly DependencyProperty MinimumTextProperty =
DependencyProperty.Register("MinimumText",
typeof(string),
typeof(Chart),
new PropertyMetadata(""));


#endregion
private static void OnPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
@@ -341,7 +358,7 @@ private static void OnPropertyChanged(DependencyObject d, DependencyPropertyChan
/// <summary>
/// 底部刻度
/// </summary>
private Rectangle BottomTick;
private Border BottomTick;
/// <summary>
/// 最大值标注
/// </summary>
@@ -403,7 +420,7 @@ private static void OnPropertyChanged(DependencyObject d, DependencyPropertyChan
/// </summary>
private bool isScrollAnimationActive = false;

private Popup Popup;
private Popup Popup, BottomPopup;

/// <summary>
/// 是否已渲染过界面
@@ -507,7 +524,7 @@ public override void OnApplyTemplate()
ItemContainer = GetTemplateChild("Container") as StackPanel;
MainContainer = GetTemplateChild("MainContainer") as Grid;
AverageTick = GetTemplateChild("AverageTick") as Border;
BottomTick = GetTemplateChild("BottomTick") as Rectangle;
BottomTick = GetTemplateChild("BottomTick") as Border;
MaxValueLabel = GetTemplateChild("MaxValueLabel") as TextBlock;
AverageBorder = GetTemplateChild("AverageBorder") as Border;
AverageLabel = GetTemplateChild("AverageLabel") as TextBlock;
@@ -517,6 +534,7 @@ public override void OnApplyTemplate()
ScrollLeftButton = GetTemplateChild("ScrollLeftButton") as Button;
ScrollRightButton = GetTemplateChild("ScrollRightButton") as Button;
Popup = GetTemplateChild("Popup") as Popup;
BottomPopup = GetTemplateChild("BottomPopup") as Popup;


if (ScrollLeftButton != null)
@@ -550,6 +568,22 @@ public override void OnApplyTemplate()
}
};
}
if (BottomTick != null)
{
BottomTick.MouseEnter += (s, c) =>
{
VisualStateManager.GoToElementState(BottomTick, "BottomTickMouseEnter", true);
BottomPopup.IsOpen = true;
};
BottomTick.MouseLeave += (s, c) =>
{
VisualStateManager.GoToElementState(BottomTick, "BottomTickMouseLeave", true);
if (!BottomPopup.IsFocused)
{
BottomPopup.IsOpen = false;
}
};
}
MouseLeave += Chart_MouseLeave;
Loaded += Chart_Loaded;
}
@@ -638,13 +672,20 @@ private void RenderTick()
Average = averageValue;

double bottomTickMargin = (bottomValue / maxValue) * itemTrueHeight + 30;

double bottomTickY = bottomTickMargin - BottomTick.ActualHeight / 2;
TranslateTransform averageTransform = new TranslateTransform()
{
Y = -averageTickY
};
AverageTick.RenderTransform = averageTransform;
//AverageTick.Margin = new Thickness(0, 0, 0, averageTickMargin);
BottomTick.Margin = new Thickness(0, 0, 0, bottomTickMargin);
//BottomTick.Margin = new Thickness(0, 0, 0, bottomTickMargin);
TranslateTransform bottomTickTransform = new TranslateTransform()
{
Y = -bottomTickY
};
BottomTick.RenderTransform = bottomTickTransform;

//刻度标注
MaxValueLabel.Text = TickText.Replace("{value}", maxValue.ToString());
@@ -655,10 +696,12 @@ private void RenderTick()
Y = -averageLabelY
};
//AverageLabel.Text = TickText.Replace("{value}", Math.Round(averageValue, 1).ToString());
double bottomTickHeight = (BottomTick.Height == double.NaN ? 2 : BottomTick.Height);
double bottomTickHeight = double.IsNaN(BottomTick.Height) ? 2 : BottomTick.Height;
BottomValueBorder.Margin = new Thickness(0, 0, 0, bottomTickMargin - BottomValueBorder.ActualHeight / 2 - bottomTickHeight / 2);
BottomValueLabel.Text = TickText.Replace("{value}", bottomValue.ToString());

MinimumText = bottomValue.ToString();

}
#endregion

93 changes: 90 additions & 3 deletions src/Local/Project1.UI/Themes/Chart/Chart.xaml
View file
Original file line number Diff line number Diff line change
@@ -281,14 +281,101 @@

</Border>

<!--底部刻度-->
<Rectangle
<!--底部刻度-->
<Popup
x:Name="BottomPopup"
Placement="Top"
PlacementTarget="{Binding ElementName=BottomTick}"
AllowsTransparency="True"
HorizontalOffset="-10"
VerticalOffset="-10"
>
<Border
Background="White"
BorderBrush="#ccc"
BorderThickness="1"
Padding="10"
Margin="15"
>
<Border.Effect>
<DropShadowEffect BlurRadius="5" Opacity="0.2" ShadowDepth="1"/>
</Border.Effect>
<Grid>
<TextBlock>
<Run Text="{DynamicResource Lang_Minimum}"/>
<Run Text="{TemplateBinding MinimumText}"/>
</TextBlock>
<Path
Width="15"
Height="15"
SnapsToDevicePixels="False"
Data="M 0 0 L 7.5 7.5 L 15 0" Fill="White"
Stroke="#ccc"
StrokeThickness="1"
VerticalAlignment="Bottom"
HorizontalAlignment="Left"
Margin="-5,0,0,-25"
/>
</Grid>

</Border>
</Popup>
<Border
x:Name="BottomTick"
Background="Transparent"
BorderThickness="2"
Panel.ZIndex="1"
VerticalAlignment="Bottom"
CornerRadius="2"
Cursor="Hand"
>
<Border.BorderBrush>
<SolidColorBrush Color="Transparent" Opacity=".6"/>
</Border.BorderBrush>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="BottomTickMouseEnter">

<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
Storyboard.TargetName="BottomTick">
<EasingColorKeyFrame KeyTime="0"
Value="#4f6bed" />
</ColorAnimationUsingKeyFrames>

</Storyboard>
</VisualState>
<VisualState Name="BottomTickMouseLeave" />
<VisualStateGroup.Transitions>


<VisualTransition To="BottomTickMouseEnter" GeneratedDuration="00:00:00.5">
<VisualTransition.GeneratedEasingFunction>
<ExponentialEase EasingMode="EaseOut" Exponent="10"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>

</VisualStateGroup.Transitions>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Rectangle
Height="2"
Fill="#f3f2f1"
RadiusX="2"
RadiusY="2"
>

</Rectangle>

</Border>
<!--<Rectangle
x:Name="BottomTick"
Height="2"
Fill="#f3f2f1"
VerticalAlignment="Bottom"
Panel.ZIndex="1"
/>
/>-->
<ScrollViewer
x:Name="ItemsScrollViewer"
HorizontalScrollBarVisibility="Auto"
1 change: 1 addition & 0 deletions src/Local/ProjectEye/Resources/Language/en.xaml
View file
Original file line number Diff line number Diff line change
@@ -209,5 +209,6 @@
<sys:String x:Key="Lang_DataWindowSkipImagePath">Skip placeholder image</sys:String>
<sys:String x:Key="Lang_StatisticsWindow">Statistics window</sys:String>
<sys:String x:Key="Lang_ExportMonthData">Export month data</sys:String>
<sys:String x:Key="Lang_Minimum">Minimum</sys:String>

</ResourceDictionary>
1 change: 1 addition & 0 deletions src/Local/ProjectEye/Resources/Language/zh.xaml
View file
Original file line number Diff line number Diff line change
@@ -215,5 +215,6 @@
<sys:String x:Key="Lang_DataWindowSkipImagePath">跳过次数占位图片</sys:String>
<sys:String x:Key="Lang_StatisticsWindow">数据统计窗口</sys:String>
<sys:String x:Key="Lang_ExportMonthData">导出本月数据</sys:String>
<sys:String x:Key="Lang_Minimum">最低</sys:String>

</ResourceDictionary>
97 changes: 89 additions & 8 deletions src/Local/ProjectEye/Resources/Themes/Dark/Chart/Chart.xaml
View file
Original file line number Diff line number Diff line change
@@ -208,7 +208,7 @@
</Border.Effect>
<Grid>
<TextBlock>
<Run Text="平均 "/>
<Run Text="{DynamicResource Lang_Average}"/>
<Run Text="{TemplateBinding AverageText}"/>
</TextBlock>
<Path
@@ -230,13 +230,14 @@
x:Name="AverageTick"
Background="Transparent"
BorderThickness="2"
Visibility="{TemplateBinding AverageVisibility}"
Panel.ZIndex="3"
VerticalAlignment="Bottom"
CornerRadius="2"
Cursor="Hand"
>
<Border.BorderBrush>
<SolidColorBrush Color="Transparent" Opacity=".2"/>
<SolidColorBrush Color="Transparent" Opacity=".6"/>
</Border.BorderBrush>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
@@ -278,14 +279,94 @@
</Border>

<!--底部刻度-->
<Rectangle
x:Name="BottomTick"
<Popup
x:Name="BottomPopup"
Placement="Top"
PlacementTarget="{Binding ElementName=BottomTick}"
AllowsTransparency="True"
HorizontalOffset="-10"
VerticalOffset="-10"
>
<Border
Background="{DynamicResource WindowBackground}"
BorderBrush="{DynamicResource WindowBorderBrush}"
BorderThickness="1"
Padding="10"
Margin="15"
>
<Border.Effect>
<DropShadowEffect BlurRadius="5" Opacity="0.2" ShadowDepth="1"/>
</Border.Effect>
<Grid>
<TextBlock>
<Run Text="{DynamicResource Lang_Minimum}"/>
<Run Text="{TemplateBinding MinimumText}"/>
</TextBlock>
<Path
Width="15"
Height="15"
SnapsToDevicePixels="False"
Data="M 0 0 L 7.5 7.5 L 15 0" Fill="{DynamicResource WindowBackground}"
Stroke="{DynamicResource WindowBorderBrush}"
StrokeThickness="1"
VerticalAlignment="Bottom"
HorizontalAlignment="Left"
Margin="-5,0,0,-25"
/>
</Grid>

</Border>
</Popup>
<Border
x:Name="BottomTick"
Background="Transparent"
BorderThickness="2"
Panel.ZIndex="1"
VerticalAlignment="Bottom"
CornerRadius="2"
Cursor="Hand"
>
<Border.BorderBrush>
<SolidColorBrush Color="Transparent" Opacity=".6"/>
</Border.BorderBrush>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="BottomTickMouseEnter">

<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
Storyboard.TargetName="BottomTick">
<EasingColorKeyFrame KeyTime="0"
Value="#4f6bed" />
</ColorAnimationUsingKeyFrames>

</Storyboard>
</VisualState>
<VisualState Name="BottomTickMouseLeave" />
<VisualStateGroup.Transitions>


<VisualTransition To="BottomTickMouseEnter" GeneratedDuration="00:00:00.5">
<VisualTransition.GeneratedEasingFunction>
<ExponentialEase EasingMode="EaseOut" Exponent="10"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>

</VisualStateGroup.Transitions>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Rectangle
Height="2"
Fill="#f3f2f1"
VerticalAlignment="Bottom"
Panel.ZIndex="1"
/>
<ScrollViewer
RadiusX="2"
RadiusY="2"
>

</Rectangle>

</Border>
<ScrollViewer
x:Name="ItemsScrollViewer"
HorizontalScrollBarVisibility="Auto"
OverridesDefaultStyle="True"

0 comments on commit 6e0e7ba

Please sign in to comment.