chfei/HandyControl
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add WaveProgressBar

Browse Source
This commit is contained in:
NaBian committed 2019-03-07 23:37:34 +08:00
1 parent a2d947a389
commit 4c66d0dcf9
9 files changed
+203 -44
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

HandyControl/Controls/Attach/LinkElement.cs
+2 -2
View File
@@ -14,7 +14,7 @@ namespace HandyControl.Controls
{
if (d is UIElement element)
{
CreateTrriger(element, (string) e.NewValue);
CreateTrigger(element, (string) e.NewValue);
}
}
@@ -27,7 +27,7 @@ namespace HandyControl.Controls
private static CommandBinding GetCommandBinding(DependencyObject element)
=> (CommandBinding) element.GetValue(CommandBindingProperty);
private static void CreateTrriger(UIElement element, string link)
private static void CreateTrigger(UIElement element, string link)
{
element.CommandBindings.Remove(GetCommandBinding(element));
element.SetCurrentValue(CommandBindingProperty, DependencyProperty.UnsetValue);
HandyControl/Controls/ProgressBar/WaveProgressBar.cs
+77 -12
View File
@@ -2,19 +2,75 @@
using System.Windows.Controls.Primitives;
using System.Windows.Media;
using HandyControl.Data;
using HandyControl.Expression.Drawing;
namespace HandyControl.Controls
{
/// <summary>
/// 波浪进度条
/// </summary>
[TemplatePart(Name = ElementWave, Type = typeof(FrameworkElement))]
[TemplatePart(Name = ElementClip, Type = typeof(FrameworkElement))]
public class WaveProgressBar : RangeBase
{
private const string ElementWave = "PART_Wave";
private const string ElementClip = "PART_Clip";
private FrameworkElement _waveElement;
private const double TranslateTransformMinY = -20;
private double _translateTransformYRange;
private TranslateTransform _translateTransform;
public WaveProgressBar() => Loaded += (s, e) => UpdateWave(Value);
static WaveProgressBar()
{
FocusableProperty.OverrideMetadata(typeof(CircleProgressBar),
FocusableProperty.OverrideMetadata(typeof(WaveProgressBar),
new FrameworkPropertyMetadata(ValueBoxes.FalseBox));
MaximumProperty.OverrideMetadata(typeof(CircleProgressBar),
MaximumProperty.OverrideMetadata(typeof(WaveProgressBar),
new FrameworkPropertyMetadata(ValueBoxes.Double100Box));
}
protected override void OnValueChanged(double oldValue, double newValue)
{
base.OnValueChanged(oldValue, newValue);
UpdateWave(newValue);
}
private void UpdateWave(double value)
{
if (_translateTransform == null || MathHelper.IsVerySmall(Maximum)) return;
var scale = 1 - value / Maximum;
var y = _translateTransformYRange * scale + TranslateTransformMinY;
_translateTransform.Y = y;
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
_waveElement = GetTemplateChild(ElementWave) as FrameworkElement;
var clipElement = GetTemplateChild(ElementClip) as FrameworkElement;
if (_waveElement != null && clipElement != null)
{
_translateTransform = new TranslateTransform
{
Y = clipElement.Height
};
_translateTransformYRange = clipElement.Height - TranslateTransformMinY;
_waveElement.RenderTransform = new TransformGroup
{
Children = {_translateTransform}
};
}
}
public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
"Text", typeof(string), typeof(WaveProgressBar), new PropertyMetadata(default(string)));
@@ -33,22 +89,31 @@ namespace HandyControl.Controls
set => SetValue(ShowTextProperty, value);
}
public static readonly DependencyProperty WaveBrushProperty = DependencyProperty.Register(
"WaveBrush", typeof(Brush), typeof(WaveProgressBar), new PropertyMetadata(default(Brush)));
public static readonly DependencyProperty WaveFillProperty = DependencyProperty.Register(
"WaveFill", typeof(Brush), typeof(WaveProgressBar), new PropertyMetadata(default(Brush)));
public Brush WaveBrush
public Brush WaveFill
{
get => (Brush)GetValue(WaveBrushProperty);
set => SetValue(WaveBrushProperty, value);
get => (Brush) GetValue(WaveFillProperty);
set => SetValue(WaveFillProperty, value);
}
public static readonly DependencyProperty WaveDiameterProperty = DependencyProperty.Register(
"WaveDiameter", typeof(double), typeof(WaveProgressBar), new PropertyMetadata(default(double)));
public static readonly DependencyProperty WaveThicknessProperty = DependencyProperty.Register(
"WaveThickness", typeof(double), typeof(WaveProgressBar), new PropertyMetadata(ValueBoxes.Double0Box));
public double WaveDiameter
public double WaveThickness
{
get => (double)GetValue(WaveDiameterProperty);
set => SetValue(WaveDiameterProperty, value);
get => (double) GetValue(WaveThicknessProperty);
set => SetValue(WaveThicknessProperty, value);
}
public static readonly DependencyProperty WaveStrokeProperty = DependencyProperty.Register(
"WaveStroke", typeof(Brush), typeof(WaveProgressBar), new PropertyMetadata(default(Brush)));
public Brush WaveStroke
{
get => (Brush) GetValue(WaveStrokeProperty);
set => SetValue(WaveStrokeProperty, value);
}
}
}
HandyControl/Themes/Styles/Base/ProgressBarBaseStyle.xaml
+55 -2
View File
@@ -5,6 +5,7 @@
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../../Basic/Converters.xaml"/>
<ResourceDictionary Source="../Border.xaml"/>
</ResourceDictionary.MergedDictionaries>
<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill" StartPoint="0,0" EndPoint="1,0">
@@ -70,13 +71,12 @@
</Style>
<Style x:Key="ProgressBarCircleBaseStyle" TargetType="controls:CircleProgressBar">
<Setter Property="controls:BorderElement.CornerRadius" Value="4"/>
<Setter Property="Background" Value="{DynamicResource SecondaryRegionBrush}"/>
<Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}"/>
<Setter Property="Height" Value="100"/>
<Setter Property="Width" Value="100"/>
<Setter Property="ArcThickness" Value="4"/>
<Setter Property="Text" Value="{Binding Value,RelativeSource={RelativeSource Self},StringFormat={}{0} %}"/>
<Setter Property="Text" Value="{Binding Value,RelativeSource={RelativeSource Self},StringFormat={}{0:F0} %}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:CircleProgressBar">
@@ -90,4 +90,57 @@
</Setter>
</Style>
<Style x:Key="ProgressBarWaveBaseStyle" TargetType="controls:WaveProgressBar">
<Setter Property="Background" Value="{DynamicResource SecondaryRegionBrush}"/>
<Setter Property="Width" Value="100"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}"/>
<Setter Property="Text" Value="{Binding Value,RelativeSource={RelativeSource Self},StringFormat={}{0:F0} %}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:WaveProgressBar">
<ControlTemplate.Resources>
<Storyboard x:Key="StoryboardOnLoaded" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)" Storyboard.TargetName="PART_Wave">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="-400"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<StackPanel>
<Border Style="{StaticResource BorderCircular}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
<Viewbox>
<Border x:Name="PART_Clip" Style="{StaticResource BorderClip}" CornerRadius="100" Width="200" Height="200">
<Path x:Name="PART_Wave" Stroke="{TemplateBinding WaveStroke}" StrokeThickness="{TemplateBinding WaveThickness}" HorizontalAlignment="Left" VerticalAlignment="Top" Width="600" Height="250" Fill="{TemplateBinding WaveFill}" Stretch="Fill" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" Margin="0,0,-400,-20">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="0,1">
<PathFigure.Segments>
<PolyBezierSegment Points="0.5,1 0.5,0 1,0"/>
<PolyBezierSegment Points="1.5,0 1.5,1 2,1"/>
<PolyBezierSegment Points="2.5,1 2.5,0 3,0"/>
<PolyLineSegment Points="3,0 3,10, 0,10 0,1"/>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Border>
</Viewbox>
</Border>
<TextBlock Margin="0,10,0,0" Visibility="{Binding ShowText,RelativeSource={RelativeSource TemplatedParent},Converter={StaticResource Boolean2VisibilityConverter}}" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Text}"/>
</StackPanel>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource StoryboardOnLoaded}"/>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
HandyControl/Themes/Styles/ProgressBar.xaml
+20
View File
@@ -196,6 +196,26 @@
<Setter Property="Foreground" Value="{DynamicResource DangerBrush}"/>
</Style>
<Style BasedOn="{StaticResource ProgressBarWaveBaseStyle}" TargetType="controls:WaveProgressBar">
<Setter Property="WaveFill" Value="{DynamicResource DarkPrimaryBrush}"/>
</Style>
<Style x:Key="ProgressBarSuccessWave" BasedOn="{StaticResource ProgressBarWaveBaseStyle}" TargetType="controls:WaveProgressBar">
<Setter Property="WaveFill" Value="{DynamicResource DarkSuccessBrush}"/>
</Style>
<Style x:Key="ProgressBarInfoWave" BasedOn="{StaticResource ProgressBarWaveBaseStyle}" TargetType="controls:WaveProgressBar">
<Setter Property="WaveFill" Value="{DynamicResource DarkInfoBrush}"/>
</Style>
<Style x:Key="ProgressBarWarningWave" BasedOn="{StaticResource ProgressBarWaveBaseStyle}" TargetType="controls:WaveProgressBar">
<Setter Property="WaveFill" Value="{DynamicResource DarkWarningBrush}"/>
</Style>
<Style x:Key="ProgressBarDangerWave" BasedOn="{StaticResource ProgressBarWaveBaseStyle}" TargetType="controls:WaveProgressBar">
<Setter Property="WaveFill" Value="{DynamicResource DarkDangerBrush}"/>
</Style>
<Style x:Key="ProgressBarFlat" TargetType="ProgressBar">
<Setter Property="Height" Value="4"/>
<Setter Property="Background" Value="{DynamicResource SecondaryRegionBrush}"/>
HandyControlDemo/UserControl/Controls/BadgeDemoCtl.xaml
+19 -17
View File
@@ -4,21 +4,23 @@
xmlns:controls="clr-namespace:HandyControl.Controls;assembly=HandyControl"
xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs"
Background="{DynamicResource RegionBrush}">
<StackPanel Margin="32" Orientation="Horizontal">
<controls:Badge Text="New" BadgeMargin="0,-14,-20,0" Height="30">
<Button Content="{x:Static langs:Lang.Comment}"/>
</controls:Badge>
<controls:Badge Text="New" BadgeMargin="0,-14,-20,0" Height="30" Margin="32,0,0,0" Style="{StaticResource BadgeDanger}">
<Button Content="{x:Static langs:Lang.Comment}"/>
</controls:Badge>
<controls:Badge Value="1" Height="30" Margin="32,0,0,0" Style="{StaticResource BadgePrimary}">
<Button Content="{x:Static langs:Lang.Comment}"/>
</controls:Badge>
<controls:Badge Value="100" BadgeMargin="0,-14,-20,0" Height="30" Margin="32,0,0,0" Style="{StaticResource BadgeDanger}">
<Button Content="{x:Static langs:Lang.Comment}"/>
</controls:Badge>
<controls:Badge IsDot="True" Height="30" Margin="32,0,0,0" Style="{StaticResource BadgeDanger}">
<Button Content="{x:Static langs:Lang.Reply}"/>
</controls:Badge>
</StackPanel>
<controls:TransitioningContentControl>
<StackPanel Margin="32" Orientation="Horizontal">
<controls:Badge Text="New" BadgeMargin="0,-14,-20,0" Height="30">
<Button Content="{x:Static langs:Lang.Comment}"/>
</controls:Badge>
<controls:Badge Text="New" BadgeMargin="0,-14,-20,0" Height="30" Margin="32,0,0,0" Style="{StaticResource BadgeDanger}">
<Button Content="{x:Static langs:Lang.Comment}"/>
</controls:Badge>
<controls:Badge Value="1" Height="30" Margin="32,0,0,0" Style="{StaticResource BadgePrimary}">
<Button Content="{x:Static langs:Lang.Comment}"/>
</controls:Badge>
<controls:Badge Value="100" BadgeMargin="0,-14,-20,0" Height="30" Margin="32,0,0,0" Style="{StaticResource BadgeDanger}">
<Button Content="{x:Static langs:Lang.Comment}"/>
</controls:Badge>
<controls:Badge IsDot="True" Height="30" Margin="32,0,0,0" Style="{StaticResource BadgeDanger}">
<Button Content="{x:Static langs:Lang.Reply}"/>
</controls:Badge>
</StackPanel>
</controls:TransitioningContentControl>
</UserControl>
HandyControlDemo/UserControl/Controls/ProgressBarDemoCtl.xaml
+22 -7
View File
@@ -4,13 +4,28 @@
xmlns:controls="clr-namespace:HandyControl.Controls;assembly=HandyControl"
Background="{DynamicResource RegionBrush}">
<controls:TransitioningContentControl>
<StackPanel Orientation="Horizontal" Margin="32">
<controls:CircleProgressBar Value="50"/>
<controls:CircleProgressBar Value="80" FontSize="30" Margin="16,0,0,0"/>
<controls:CircleProgressBar Value="10" Margin="16,0,0,0" ShowText="False" Width="20" Height="20" ArcThickness="2" Style="{StaticResource ProgressBarSuccessCircle}"/>
<controls:CircleProgressBar Value="20" Margin="16,0,0,0" ShowText="False" Width="30" Height="30" ArcThickness="6" Style="{StaticResource ProgressBarInfoCircle}"/>
<controls:CircleProgressBar Value="40" Margin="16,0,0,0" ShowText="False" Width="40" Height="40" ArcThickness="10" Style="{StaticResource ProgressBarWarningCircle}"/>
<controls:CircleProgressBar Value="80" Margin="16,0,0,0" Width="50" Height="50" Style="{StaticResource ProgressBarDangerCircle}"/>
<StackPanel Margin="32">
<Slider Value="50" Name="SliderDemo" Maximum="100"/>
<StackPanel Orientation="Horizontal" Margin="0,32,0,0">
<controls:CircleProgressBar Value="{Binding Value,ElementName=SliderDemo}"/>
<controls:CircleProgressBar Value="{Binding Value,ElementName=SliderDemo}" FontSize="30" Margin="16,0,0,0"/>
<controls:CircleProgressBar Value="{Binding Value,ElementName=SliderDemo}" Margin="16,0,0,0" ShowText="False" Width="20" Height="20" ArcThickness="2" Style="{StaticResource ProgressBarSuccessCircle}"/>
<controls:CircleProgressBar Value="{Binding Value,ElementName=SliderDemo}" Margin="16,0,0,0" ShowText="False" Width="30" Height="30" ArcThickness="6" Style="{StaticResource ProgressBarInfoCircle}"/>
<controls:CircleProgressBar Value="{Binding Value,ElementName=SliderDemo}" Margin="16,0,0,0" ShowText="False" Width="40" Height="40" ArcThickness="10" Style="{StaticResource ProgressBarWarningCircle}"/>
<controls:CircleProgressBar Value="{Binding Value,ElementName=SliderDemo}" Margin="16,0,0,0" Width="50" Height="50" Style="{StaticResource ProgressBarDangerCircle}"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,32,0,0">
<controls:WaveProgressBar Value="{Binding Value,ElementName=SliderDemo}"/>
<controls:WaveProgressBar Value="{Binding Value,ElementName=SliderDemo}" FontSize="20" Margin="16,0,0,0" WaveThickness="4" WaveStroke="#FFFF0080" Style="{StaticResource ProgressBarSuccessWave}">
<controls:WaveProgressBar.WaveFill>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#66FF0080" Offset="0"/>
<GradientStop Color="#FFFF0080" Offset="1"/>
</LinearGradientBrush>
</controls:WaveProgressBar.WaveFill>
</controls:WaveProgressBar>
<controls:WaveProgressBar Value="{Binding Value,ElementName=SliderDemo}" Margin="16,0,0,0" ShowText="False" Width="50" Height="50" Style="{StaticResource ProgressBarWarningWave}"/>
</StackPanel>
</StackPanel>
</controls:TransitioningContentControl>
</UserControl>
HandyControlDemo/UserControl/Main/LeftMainContent.xaml
+2 -2
View File
@@ -258,7 +258,7 @@
<Image Source="../../Resources/Img/LeftMainContent/DatePicker_16x.png"/>
</controls:EdgeElement.LeftContent>
</ListBoxItem>
<ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.TransferDemoCtl}" Content="{x:Static langs:Lang.Transfer}">
<ListBoxItem Tag="{x:Static data:MessageToken.TransferDemoCtl}" Content="{x:Static langs:Lang.Transfer}">
<controls:EdgeElement.LeftContent>
<Image Source="../../Resources/Img/LeftMainContent/Transfer_16x.png"/>
</controls:EdgeElement.LeftContent>
@@ -318,7 +318,7 @@
<Image Source="../../Resources/Img/LeftMainContent/LinearCarousel_16x.png"/>
</controls:EdgeElement.LeftContent>
</ListBoxItem>
<ListBoxItem Tag="{x:Static data:MessageToken.ProgressBarDemoCtl}" Content="{x:Static langs:Lang.ProgressBar}">
<ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.ProgressBarDemoCtl}" Content="{x:Static langs:Lang.ProgressBar}">
<controls:EdgeElement.LeftContent>
<Image Source="../../Resources/Img/LeftMainContent/ProgressBar_16x.png"/>
</controls:EdgeElement.LeftContent>
README.md
+6 -2
View File
@@ -39,6 +39,10 @@ Step 3：enjoy coding
## Latest examples
### WaveProgressBar
![WaveProgressBar](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/WaveProgressBar.gif)
### Badge
![Badge](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Badge.png)
@@ -55,12 +59,12 @@ Step 3：enjoy coding
![Transfer](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Transfer.png)
## History publication
### ProgressButton
![ProgressButton](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ProgressButton.png)
## History publication
### CoverFlow
![CoverFlow](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CoverFlow.gif)
Resources/WaveProgressBar.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB