From fcb4271080843cb494cf30d06bfd563f62498b71 Mon Sep 17 00:00:00 2001 From: Alberto Fustinoni Date: Tue, 24 Jan 2017 19:52:34 +0900 Subject: [PATCH 01/18] Added radial progress bar --- .../Microsoft.Toolkit.Uwp.UI.Controls.csproj | 5 + .../RadialProgressBar/RadialProgressBar.cs | 176 ++++++++++++++++++ .../RadialProgressBar/RadialProgressBar.xaml | 52 ++++++ .../Themes/Generic.xaml | 1 + 4 files changed, 234 insertions(+) create mode 100644 Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs create mode 100644 Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.xaml diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj b/Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj index 42330df2108..9b47e64de8a 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj +++ b/Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj @@ -74,6 +74,7 @@ + @@ -145,6 +146,10 @@ MSBuild:Compile Designer + + MSBuild:Compile + Designer + Designer MSBuild:Compile diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs b/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs new file mode 100644 index 00000000000..8c00475e512 --- /dev/null +++ b/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs @@ -0,0 +1,176 @@ +// ****************************************************************** +// Copyright (c) Microsoft. All rights reserved. +// This code is licensed under the MIT License (MIT). +// THE CODE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, +// INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. +// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, +// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, +// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH +// THE CODE OR THE USE OR OTHER DEALINGS IN THE CODE. +// ***************************************************************** + +using System; +using Windows.Foundation; +using Windows.UI.Xaml; +using Windows.UI.Xaml.Controls.Primitives; +using Windows.UI.Xaml.Media; + +namespace Microsoft.Toolkit.Uwp.UI.Controls +{ + /// + /// An alternative impementation of a progress bar. + /// Progression is represented by a loop filling up in a clockwise fashion. + /// Like the traditional progress bar, it inherits from RangeBase, so Minimum, Maximum and Value properties work the same way. + /// + [TemplatePart(Name = OutlineFigurePartName, Type = typeof(PathFigure))] + [TemplatePart(Name = OutlineArcPartName, Type = typeof(ArcSegment))] + [TemplatePart(Name = BarFigurePartName, Type = typeof(PathFigure))] + [TemplatePart(Name = BarArcPartName, Type = typeof(ArcSegment))] + public sealed class RadialProgressBar : RangeBase + { + private const string OutlineFigurePartName = "OutlineFigurePart"; + private const string OutlineArcPartName = "OutlineArcPart"; + private const string BarFigurePartName = "BarFigurePart"; + private const string BarArcPartName = "BarArcPart"; + + private const string DefaultForegroundColorBrushName = "SystemControlHighlightAccentBrush"; + private const string DefaultBackgroundColorBrushName = "SystemControlBackgroundBaseLowBrush"; + + private PathFigure OutlineFigure { get; set; } + + private PathFigure BarFigure { get; set; } + + private ArcSegment OutlineArc { get; set; } + + private ArcSegment BarArc { get; set; } + + /// + /// Called when the Minimum property changes. + /// + /// Old value of the Minimum property. + /// New value of the Minimum property. + protected override void OnMinimumChanged(double oldMinimum, double newMinimum) + { + base.OnMinimumChanged(oldMinimum, newMinimum); + RenderSegment(); + } + + /// + /// Called when the Maximum property changes. + /// + /// Old value of the Maximum property. + /// New value of the Maximum property. + protected override void OnMaximumChanged(double oldMaximum, double newMaximum) + { + base.OnMaximumChanged(oldMaximum, newMaximum); + RenderSegment(); + } + + /// + /// Called when the Value property changes. + /// + /// Old value of the Value property. + /// New value of the Value property. + protected override void OnValueChanged(double oldValue, double newValue) + { + base.OnValueChanged(oldValue, newValue); + RenderSegment(); + } + + /// + /// Update the visual state of the control when its template is changed. + /// + protected override void OnApplyTemplate() + { + base.OnApplyTemplate(); + + OutlineFigure = GetTemplateChild(OutlineFigurePartName) as PathFigure; + OutlineArc = GetTemplateChild(OutlineArcPartName) as ArcSegment; + BarFigure = GetTemplateChild(BarFigurePartName) as PathFigure; + BarArc = GetTemplateChild(BarArcPartName) as ArcSegment; + + RenderAll(); + } + + /// + /// Gets or sets the thickness of the circular ouline and segment + /// + public double Thickness + { + get { return (double)GetValue(ThicknessProperty); } + set { SetValue(ThicknessProperty, value); } + } + + /// + /// Identifies the Thickness dependency property + /// + public static readonly DependencyProperty ThicknessProperty = DependencyProperty.Register("Thickness", typeof(double), typeof(RadialProgressBar), new PropertyMetadata(4.0)); + + /// + /// Initializes a new instance of the class. + /// Create a default circular progress bar + /// + public RadialProgressBar() + { + this.DefaultStyleKey = typeof(RadialProgressBar); + + Foreground = Application.Current.Resources[DefaultForegroundColorBrushName] as SolidColorBrush; + Background = Application.Current.Resources[DefaultBackgroundColorBrushName] as SolidColorBrush; + + SizeChanged += SizeChangedHandler; + } + + // Render outline and progress segment when control is resized. + private void SizeChangedHandler(object sender, SizeChangedEventArgs e) + { + var self = sender as RadialProgressBar; + self.RenderAll(); + } + + private double ComputeNormalizedRange() + { + var range = Maximum - Minimum; + var delta = Value - Minimum; + var output = range == 0.0 ? 0.0 : delta / range; + output = Math.Min(Math.Max(0.0, output), 0.9999); + return output; + } + + // Compute size of ellipse so that the outer edge touches the bounding rectangle + private Size ComputeEllipseSize() + { + var width = Math.Max((ActualWidth - Thickness) / 2.0, 0.0); + var height = Math.Max((ActualHeight - Thickness) / 2.0, 0.0); + return new Size(width, height); + } + + // Render the segment representing progress ratio. + private void RenderSegment() + { + var normalizedRange = ComputeNormalizedRange(); + + var angle = 2 * Math.PI * normalizedRange; + var size = ComputeEllipseSize(); + + double x = (Math.Sin(angle) * size.Width) + size.Width; + double y = ((Math.Cos(angle) * size.Height) - size.Height) * -1; + + BarArc.IsLargeArc = angle >= Math.PI; + BarArc.Point = new Point(x, y); + } + + // Render the progress segment and the loop outline. Needs to run when control is resized or retemplated + private void RenderAll() + { + var size = ComputeEllipseSize(); + var segmentWidth = size.Width; + + OutlineFigure.StartPoint = BarFigure.StartPoint = new Point(segmentWidth, 0); + OutlineArc.Size = BarArc.Size = new Size(segmentWidth, size.Height); + OutlineArc.Point = new Point(segmentWidth - 0.05, 0); + + RenderSegment(); + } + } +} diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.xaml b/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.xaml new file mode 100644 index 00000000000..8d7f7fa2261 --- /dev/null +++ b/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.xaml @@ -0,0 +1,52 @@ + + + + diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/Themes/Generic.xaml b/Microsoft.Toolkit.Uwp.UI.Controls/Themes/Generic.xaml index ecaabfab9b3..a47178c9e57 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/Themes/Generic.xaml +++ b/Microsoft.Toolkit.Uwp.UI.Controls/Themes/Generic.xaml @@ -7,6 +7,7 @@ + From d6037a0ba16c4107e155f01c30b8f1894e69b1b1 Mon Sep 17 00:00:00 2001 From: Alberto Fustinoni Date: Tue, 24 Jan 2017 20:46:17 +0900 Subject: [PATCH 02/18] Setting dependency properties to literal values crashes app --- .../RadialProgressBar/RadialProgressBar.cs | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs b/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs index 8c00475e512..4dcea9c60db 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs +++ b/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs @@ -45,6 +45,11 @@ public sealed class RadialProgressBar : RangeBase private ArcSegment BarArc { get; set; } + private bool AllTemplatePartsDefined + { + get { return OutlineFigure != null && OutlineArc != null && BarFigure != null && BarArc != null; } + } + /// /// Called when the Minimum property changes. /// @@ -148,6 +153,11 @@ private Size ComputeEllipseSize() // Render the segment representing progress ratio. private void RenderSegment() { + if (!AllTemplatePartsDefined) + { + return; + } + var normalizedRange = ComputeNormalizedRange(); var angle = 2 * Math.PI * normalizedRange; @@ -163,6 +173,11 @@ private void RenderSegment() // Render the progress segment and the loop outline. Needs to run when control is resized or retemplated private void RenderAll() { + if (!AllTemplatePartsDefined) + { + return; + } + var size = ComputeEllipseSize(); var segmentWidth = size.Width; From 54eeeac92bd9d66fcdfb34fec2214dfa8cbd2350 Mon Sep 17 00:00:00 2001 From: Alberto Fustinoni Date: Wed, 25 Jan 2017 01:08:23 +0900 Subject: [PATCH 03/18] Added sample to app --- .../Microsoft.Toolkit.Uwp.SampleApp.csproj | 9 ++++ .../RadialProgressBar/RadialProgressBar.png | Bin 0 -> 6064 bytes .../RadialProgressBarCode.bind | 28 +++++++++++++ .../RadialProgressBarPage.xaml | 27 ++++++++++++ .../RadialProgressBarPage.xaml.cs | 39 ++++++++++++++++++ .../SamplePages/samples.json | 8 ++++ .../RadialProgressBar/RadialProgressBar.cs | 9 +++- 7 files changed, 119 insertions(+), 1 deletion(-) create mode 100644 Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RadialProgressBar/RadialProgressBar.png create mode 100644 Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RadialProgressBar/RadialProgressBarCode.bind create mode 100644 Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RadialProgressBar/RadialProgressBarPage.xaml create mode 100644 Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RadialProgressBar/RadialProgressBarPage.xaml.cs diff --git a/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj b/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj index 1795d7f5610..8fe09fec75e 100644 --- a/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj +++ b/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj @@ -267,6 +267,7 @@ + @@ -358,6 +359,7 @@ + @@ -419,6 +421,9 @@ MosaicControlPage.xaml + + RadialProgressBarPage.xaml + ScrollHeaderPage.xaml @@ -604,6 +609,10 @@ MSBuild:Compile Designer + + MSBuild:Compile + Designer + MSBuild:Compile Designer diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RadialProgressBar/RadialProgressBar.png b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RadialProgressBar/RadialProgressBar.png new file mode 100644 index 0000000000000000000000000000000000000000..9f8e1facc52e5b55e9f544988b5e94c81d9f2d92 GIT binary patch literal 6064 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 literal 0 HcmV?d00001 diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RadialProgressBar/RadialProgressBarCode.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RadialProgressBar/RadialProgressBarCode.bind new file mode 100644 index 00000000000..f531a3abadf --- /dev/null +++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RadialProgressBar/RadialProgressBarCode.bind @@ -0,0 +1,28 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RadialProgressBar/RadialProgressBarPage.xaml b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RadialProgressBar/RadialProgressBarPage.xaml new file mode 100644 index 00000000000..6caa3bacf67 --- /dev/null +++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RadialProgressBar/RadialProgressBarPage.xaml @@ -0,0 +1,27 @@ + + + + + + + + + + + + + diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RadialProgressBar/RadialProgressBarPage.xaml.cs b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RadialProgressBar/RadialProgressBarPage.xaml.cs new file mode 100644 index 00000000000..996749425f9 --- /dev/null +++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RadialProgressBar/RadialProgressBarPage.xaml.cs @@ -0,0 +1,39 @@ +// ****************************************************************** +// Copyright (c) Microsoft. All rights reserved. +// This code is licensed under the MIT License (MIT). +// THE CODE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, +// INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. +// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, +// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, +// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH +// THE CODE OR THE USE OR OTHER DEALINGS IN THE CODE. +// ****************************************************************** + +using Microsoft.Toolkit.Uwp.SampleApp.Models; + +using Windows.UI.Xaml.Controls; +using Windows.UI.Xaml.Navigation; + +namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages +{ + public sealed partial class RadialProgressBarPage : Page + { + public RadialProgressBarPage() + { + InitializeComponent(); + } + + protected override void OnNavigatedTo(NavigationEventArgs e) + { + base.OnNavigatedTo(e); + + var propertyDesc = e.Parameter as PropertyDescriptor; + + if (propertyDesc != null) + { + DataContext = propertyDesc.Expando; + } + } + } +} diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json index e993c25641f..d72bbd12389 100644 --- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json +++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json @@ -60,6 +60,14 @@ "XamlCodeFile": "RadialGaugeCode.bind", "Icon": "/SamplePages/RadialGauge/RadialGauge.png" }, + { + "Name": "RadialProgressBar", + "Type": "RadialProgressBarPage", + "About": "The radial progress bar displays progress as a circle gettin filled.", + "CodeUrl": "https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar", + "XamlCodeFile": "RadialProgressBarCode.bind", + "Icon": "/SamplePages/RadialProgressBar/RadialProgressBar.png" + }, { "Name": "SlidableListItem", "Type": "SlidableListItemPage", diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs b/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs index 4dcea9c60db..736e7592b7a 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs +++ b/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs @@ -110,7 +110,7 @@ public double Thickness /// /// Identifies the Thickness dependency property /// - public static readonly DependencyProperty ThicknessProperty = DependencyProperty.Register("Thickness", typeof(double), typeof(RadialProgressBar), new PropertyMetadata(4.0)); + public static readonly DependencyProperty ThicknessProperty = DependencyProperty.Register("Thickness", typeof(double), typeof(RadialProgressBar), new PropertyMetadata(4.0, ThicknessChangedHandler)); /// /// Initializes a new instance of the class. @@ -126,6 +126,13 @@ public RadialProgressBar() SizeChanged += SizeChangedHandler; } + // Render outline and progress segment when thickness is changed + private static void ThicknessChangedHandler(DependencyObject d, DependencyPropertyChangedEventArgs e) + { + var sender = d as RadialProgressBar; + sender.RenderAll(); + } + // Render outline and progress segment when control is resized. private void SizeChangedHandler(object sender, SizeChangedEventArgs e) { From d6bcb3a757c495160da480d5a760ae954ad16d57 Mon Sep 17 00:00:00 2001 From: Alberto Fustinoni Date: Wed, 25 Jan 2017 01:17:27 +0900 Subject: [PATCH 04/18] Fix --- .../RadialProgressBar/RadialProgressBar.cs | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs b/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs index 736e7592b7a..bdff14c6c1d 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs +++ b/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs @@ -152,8 +152,9 @@ private double ComputeNormalizedRange() // Compute size of ellipse so that the outer edge touches the bounding rectangle private Size ComputeEllipseSize() { - var width = Math.Max((ActualWidth - Thickness) / 2.0, 0.0); - var height = Math.Max((ActualHeight - Thickness) / 2.0, 0.0); + var thickness = Math.Max(Thickness, 0.0); + var width = Math.Max((ActualWidth - thickness) / 2.0, 0.0); + var height = Math.Max((ActualHeight - thickness) / 2.0, 0.0); return new Size(width, height); } From ef1384b837d936a5af180ab9d8982494a1572204 Mon Sep 17 00:00:00 2001 From: Alberto Fustinoni Date: Wed, 25 Jan 2017 01:30:01 +0900 Subject: [PATCH 05/18] Fix --- .../RadialProgressBar/RadialProgressBar.cs | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs b/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs index bdff14c6c1d..4633e7f7641 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs +++ b/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs @@ -107,6 +107,14 @@ public double Thickness set { SetValue(ThicknessProperty, value); } } + /// + /// Gets the safe thickness, guaranteed to never be negative + /// + private double SafeThickness + { + get { return Math.Max(Thickness, 0.0); } + } + /// /// Identifies the Thickness dependency property /// @@ -152,9 +160,8 @@ private double ComputeNormalizedRange() // Compute size of ellipse so that the outer edge touches the bounding rectangle private Size ComputeEllipseSize() { - var thickness = Math.Max(Thickness, 0.0); - var width = Math.Max((ActualWidth - thickness) / 2.0, 0.0); - var height = Math.Max((ActualHeight - thickness) / 2.0, 0.0); + var width = Math.Max((ActualWidth - SafeThickness) / 2.0, 0.0); + var height = Math.Max((ActualHeight - SafeThickness) / 2.0, 0.0); return new Size(width, height); } From 51b63de96ba2aa3df710fd6320b82bc0ecf672d4 Mon Sep 17 00:00:00 2001 From: Alberto Fustinoni Date: Wed, 25 Jan 2017 01:48:29 +0900 Subject: [PATCH 06/18] Rendering fix --- .../RadialProgressBar/RadialProgressBar.cs | 23 ++++++++----------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs b/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs index 4633e7f7641..1b5777ada03 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs +++ b/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs @@ -107,14 +107,6 @@ public double Thickness set { SetValue(ThicknessProperty, value); } } - /// - /// Gets the safe thickness, guaranteed to never be negative - /// - private double SafeThickness - { - get { return Math.Max(Thickness, 0.0); } - } - /// /// Identifies the Thickness dependency property /// @@ -160,8 +152,9 @@ private double ComputeNormalizedRange() // Compute size of ellipse so that the outer edge touches the bounding rectangle private Size ComputeEllipseSize() { - var width = Math.Max((ActualWidth - SafeThickness) / 2.0, 0.0); - var height = Math.Max((ActualHeight - SafeThickness) / 2.0, 0.0); + var safeThickness = Math.Max(Thickness, 0.0); + var width = Math.Max((ActualWidth - safeThickness) / 2.0, 0.0); + var height = Math.Max((ActualHeight - safeThickness) / 2.0, 0.0); return new Size(width, height); } @@ -177,9 +170,10 @@ private void RenderSegment() var angle = 2 * Math.PI * normalizedRange; var size = ComputeEllipseSize(); + var translationFactor = Math.Max(Thickness / 2.0, 0.0); - double x = (Math.Sin(angle) * size.Width) + size.Width; - double y = ((Math.Cos(angle) * size.Height) - size.Height) * -1; + double x = (Math.Sin(angle) * size.Width) + size.Width + translationFactor; + double y = (((Math.Cos(angle) * size.Height) - size.Height) * -1) + translationFactor; BarArc.IsLargeArc = angle >= Math.PI; BarArc.Point = new Point(x, y); @@ -195,10 +189,11 @@ private void RenderAll() var size = ComputeEllipseSize(); var segmentWidth = size.Width; + var translationFactor = Math.Max(Thickness / 2.0, 0.0); - OutlineFigure.StartPoint = BarFigure.StartPoint = new Point(segmentWidth, 0); + OutlineFigure.StartPoint = BarFigure.StartPoint = new Point(segmentWidth + translationFactor, translationFactor); OutlineArc.Size = BarArc.Size = new Size(segmentWidth, size.Height); - OutlineArc.Point = new Point(segmentWidth - 0.05, 0); + OutlineArc.Point = new Point(segmentWidth + translationFactor - 0.05, translationFactor); RenderSegment(); } From c0a37b802ec9d237158958d9aedd3a4179766f9c Mon Sep 17 00:00:00 2001 From: Alberto Fustinoni Date: Wed, 25 Jan 2017 01:54:26 +0900 Subject: [PATCH 07/18] Added documentation, better image --- .../RadialProgressBar/RadialProgressBar.png | Bin 6064 -> 6080 bytes docs/controls/RadialProgressBar.md | 44 ++++++++++++++++++ 2 files changed, 44 insertions(+) create mode 100644 docs/controls/RadialProgressBar.md diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RadialProgressBar/RadialProgressBar.png b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RadialProgressBar/RadialProgressBar.png index 9f8e1facc52e5b55e9f544988b5e94c81d9f2d92..17a3a710a5b62bc3868b8dd581dfc8a91c03e0f8 100644 GIT binary patch literal 6080 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 OR0u6Y%`(`Nu>S+h?Z90C delta 5322 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 diff --git a/docs/controls/RadialProgressBar.md b/docs/controls/RadialProgressBar.md new file mode 100644 index 00000000000..92da4b51f78 --- /dev/null +++ b/docs/controls/RadialProgressBar.md @@ -0,0 +1,44 @@ +# RadialProgressBar XAML Control + +The **Radial Gauge Control** displays a value in a certain range using a needle on a circular face. This control will make data visualizations and dashboards more engaging with rich style and interactivity. +The round gauges are powerful, easy to use, and highly configurable to present dashboards capable of displaying clocks, industrial panels, automotive dashboards, and even aircraft cockpits. + +## How it works + +The Radial Gauge supports animated transitions between configuration states. The control gradually animates as it redraws changes to the needle, needle position, scale range, color range, and more. + +## Syntax + +```xaml + + + + +``` + +## Example Image + +![RadialProgressBar animation](../resources/images/Controls-RadialProgressBar.gif "RadialProgressBar") + +## Example Code + +[RadialProgressBar Sample Page](https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RadialProgressBar) + +## Default Template + +[RadialProgressBar XAML File](https://github.com/Microsoft/UWPCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.xaml) is the XAML template used in the toolkit for the default styling. + +## Requirements (Windows 10 Device Family) + +| [Device family](http://go.microsoft.com/fwlink/p/?LinkID=526370) | Universal, 10.0.10586.0 or higher | +| --- | --- | +| Namespace | Microsoft.Toolkit.Uwp.UI.Controls | + +## API + +* [RadialProgressBar source code](https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar) + From 42713ef64c24fc84fa08d87c3e96c99ef6a78d29 Mon Sep 17 00:00:00 2001 From: Alberto Fustinoni Date: Wed, 25 Jan 2017 02:00:23 +0900 Subject: [PATCH 08/18] Documentation --- docs/controls/RadialProgressBar.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/docs/controls/RadialProgressBar.md b/docs/controls/RadialProgressBar.md index 92da4b51f78..41d94260013 100644 --- a/docs/controls/RadialProgressBar.md +++ b/docs/controls/RadialProgressBar.md @@ -1,11 +1,10 @@ # RadialProgressBar XAML Control -The **Radial Gauge Control** displays a value in a certain range using a needle on a circular face. This control will make data visualizations and dashboards more engaging with rich style and interactivity. -The round gauges are powerful, easy to use, and highly configurable to present dashboards capable of displaying clocks, industrial panels, automotive dashboards, and even aircraft cockpits. +The **Radial Progress Bar Control** displays a value in a certain range using a cicular sector that grows clockwise until it becomes a full ring. ## How it works -The Radial Gauge supports animated transitions between configuration states. The control gradually animates as it redraws changes to the needle, needle position, scale range, color range, and more. +The control uses the same dependency properties as the standard Progress Bar, with the addition of a configurable Thickness parameter, which sets the hickness of the circular sector and the outline it's drawn on. ## Syntax @@ -22,7 +21,7 @@ The Radial Gauge supports animated transitions between configuration states. The ## Example Image -![RadialProgressBar animation](../resources/images/Controls-RadialProgressBar.gif "RadialProgressBar") +![RadialProgressBar image](../resources/images/Controls-RadialProgressBar.gif "RadialProgressBar") ## Example Code From 0f5e5c34e67938985206b08a2e5bb6f6749c4f11 Mon Sep 17 00:00:00 2001 From: Alberto Fustinoni Date: Wed, 25 Jan 2017 02:05:19 +0900 Subject: [PATCH 09/18] Documentation --- docs/controls/RadialProgressBar.md | 2 +- .../images/Controls-RadialProgressBar.png | Bin 0 -> 13659 bytes 2 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 docs/resources/images/Controls-RadialProgressBar.png diff --git a/docs/controls/RadialProgressBar.md b/docs/controls/RadialProgressBar.md index 41d94260013..a75549c67fe 100644 --- a/docs/controls/RadialProgressBar.md +++ b/docs/controls/RadialProgressBar.md @@ -21,7 +21,7 @@ The control uses the same dependency properties as the standard Progress Bar, wi ## Example Image -![RadialProgressBar image](../resources/images/Controls-RadialProgressBar.gif "RadialProgressBar") +![RadialProgressBar image](../resources/images/Controls-RadialProgressBar.png "RadialProgressBar") ## Example Code diff --git a/docs/resources/images/Controls-RadialProgressBar.png b/docs/resources/images/Controls-RadialProgressBar.png new file mode 100644 index 0000000000000000000000000000000000000000..3e08d3482f88bcf36008a2ec62fe63dad22de329 GIT binary patch literal 13659 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 Date: Wed, 25 Jan 2017 02:07:42 +0900 Subject: [PATCH 10/18] Typo --- docs/controls/RadialProgressBar.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/controls/RadialProgressBar.md b/docs/controls/RadialProgressBar.md index a75549c67fe..d4e8d544c74 100644 --- a/docs/controls/RadialProgressBar.md +++ b/docs/controls/RadialProgressBar.md @@ -4,7 +4,7 @@ The **Radial Progress Bar Control** displays a value in a certain range using a ## How it works -The control uses the same dependency properties as the standard Progress Bar, with the addition of a configurable Thickness parameter, which sets the hickness of the circular sector and the outline it's drawn on. +The control uses the same dependency properties as the standard Progress Bar, with the addition of a configurable Thickness parameter, which sets the thickness of the circular sector and the outline it's drawn on. ## Syntax From d48ddfac692dbfa9ce1faaed3cf1deaa5b0ca9c4 Mon Sep 17 00:00:00 2001 From: Alberto Fustinoni Date: Wed, 25 Jan 2017 21:05:05 +0900 Subject: [PATCH 11/18] PR comment fixes --- .../SamplePages/samples.json | 2 +- .../RadialProgressBar/RadialProgressBar.cs | 51 ++++++++----------- .../RadialProgressBar/RadialProgressBar.xaml | 2 + 3 files changed, 23 insertions(+), 32 deletions(-) diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json index d72bbd12389..f2bcf800eb7 100644 --- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json +++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json @@ -63,7 +63,7 @@ { "Name": "RadialProgressBar", "Type": "RadialProgressBarPage", - "About": "The radial progress bar displays progress as a circle gettin filled.", + "About": "The radial progress bar displays progress as a circle getting filled.", "CodeUrl": "https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar", "XamlCodeFile": "RadialProgressBarCode.bind", "Icon": "/SamplePages/RadialProgressBar/RadialProgressBar.png" diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs b/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs index 1b5777ada03..30317b6007f 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs +++ b/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.cs @@ -34,21 +34,12 @@ public sealed class RadialProgressBar : RangeBase private const string BarFigurePartName = "BarFigurePart"; private const string BarArcPartName = "BarArcPart"; - private const string DefaultForegroundColorBrushName = "SystemControlHighlightAccentBrush"; - private const string DefaultBackgroundColorBrushName = "SystemControlBackgroundBaseLowBrush"; + private PathFigure outlineFigure; + private PathFigure barFigure; + private ArcSegment outlineArc; + private ArcSegment barArc; - private PathFigure OutlineFigure { get; set; } - - private PathFigure BarFigure { get; set; } - - private ArcSegment OutlineArc { get; set; } - - private ArcSegment BarArc { get; set; } - - private bool AllTemplatePartsDefined - { - get { return OutlineFigure != null && OutlineArc != null && BarFigure != null && BarArc != null; } - } + private bool allTemplatePartsDefined = false; /// /// Called when the Minimum property changes. @@ -90,10 +81,12 @@ protected override void OnApplyTemplate() { base.OnApplyTemplate(); - OutlineFigure = GetTemplateChild(OutlineFigurePartName) as PathFigure; - OutlineArc = GetTemplateChild(OutlineArcPartName) as ArcSegment; - BarFigure = GetTemplateChild(BarFigurePartName) as PathFigure; - BarArc = GetTemplateChild(BarArcPartName) as ArcSegment; + outlineFigure = GetTemplateChild(OutlineFigurePartName) as PathFigure; + outlineArc = GetTemplateChild(OutlineArcPartName) as ArcSegment; + barFigure = GetTemplateChild(BarFigurePartName) as PathFigure; + barArc = GetTemplateChild(BarArcPartName) as ArcSegment; + + allTemplatePartsDefined = outlineFigure != null && outlineArc != null && barFigure != null && barArc != null; RenderAll(); } @@ -110,7 +103,7 @@ public double Thickness /// /// Identifies the Thickness dependency property /// - public static readonly DependencyProperty ThicknessProperty = DependencyProperty.Register("Thickness", typeof(double), typeof(RadialProgressBar), new PropertyMetadata(4.0, ThicknessChangedHandler)); + public static readonly DependencyProperty ThicknessProperty = DependencyProperty.Register(nameof(Thickness), typeof(double), typeof(RadialProgressBar), new PropertyMetadata(4.0, ThicknessChangedHandler)); /// /// Initializes a new instance of the class. @@ -118,11 +111,7 @@ public double Thickness /// public RadialProgressBar() { - this.DefaultStyleKey = typeof(RadialProgressBar); - - Foreground = Application.Current.Resources[DefaultForegroundColorBrushName] as SolidColorBrush; - Background = Application.Current.Resources[DefaultBackgroundColorBrushName] as SolidColorBrush; - + DefaultStyleKey = typeof(RadialProgressBar); SizeChanged += SizeChangedHandler; } @@ -161,7 +150,7 @@ private Size ComputeEllipseSize() // Render the segment representing progress ratio. private void RenderSegment() { - if (!AllTemplatePartsDefined) + if (!allTemplatePartsDefined) { return; } @@ -175,14 +164,14 @@ private void RenderSegment() double x = (Math.Sin(angle) * size.Width) + size.Width + translationFactor; double y = (((Math.Cos(angle) * size.Height) - size.Height) * -1) + translationFactor; - BarArc.IsLargeArc = angle >= Math.PI; - BarArc.Point = new Point(x, y); + barArc.IsLargeArc = angle >= Math.PI; + barArc.Point = new Point(x, y); } // Render the progress segment and the loop outline. Needs to run when control is resized or retemplated private void RenderAll() { - if (!AllTemplatePartsDefined) + if (!allTemplatePartsDefined) { return; } @@ -191,9 +180,9 @@ private void RenderAll() var segmentWidth = size.Width; var translationFactor = Math.Max(Thickness / 2.0, 0.0); - OutlineFigure.StartPoint = BarFigure.StartPoint = new Point(segmentWidth + translationFactor, translationFactor); - OutlineArc.Size = BarArc.Size = new Size(segmentWidth, size.Height); - OutlineArc.Point = new Point(segmentWidth + translationFactor - 0.05, translationFactor); + outlineFigure.StartPoint = barFigure.StartPoint = new Point(segmentWidth + translationFactor, translationFactor); + outlineArc.Size = barArc.Size = new Size(segmentWidth, size.Height); + outlineArc.Point = new Point(segmentWidth + translationFactor - 0.05, translationFactor); RenderSegment(); } diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.xaml b/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.xaml index 8d7f7fa2261..9b0504ea23e 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.xaml +++ b/Microsoft.Toolkit.Uwp.UI.Controls/RadialProgressBar/RadialProgressBar.xaml @@ -4,6 +4,8 @@ xmlns:local="using:Microsoft.Toolkit.Uwp.UI.Controls">