Implement loading control with sample. #247

soydachi · 2016-08-26T09:09:42Z

The loading control is for showing an animation with some content when the user should wait in some tasks of the app.

There is a sample on Microsoft.Toolkit.Uwp.SampleApp/SamplePages where we can change all the properties and content to see how easy it is.

An example of how we can build the loading control.

<controls:Loading x:Name="LoadingControl" LoadingHorizontalAlignment="{Binding LoadingContentHorizontalAlignment.Value}" 
                    LoadingVerticalAlignment="{Binding LoadingContentVerticalAlignment.Value}"
                    LoadingBackground="{Binding LoadingBackground.Value}" LoadingOpacity="{Binding OpacityForLoadingControl.Value}">
    <ContentControl x:Name="LoadingContentControl"/>
</controls:Loading>

LoadingHorizontalAlignment and LoadingVerticalAlignment are responsible to align the custom content of the control. It aligns what we create inside as a ContentPresenter.
LoadingBackground and LoadingOpacity are for the panel who appears and disappears behind our custom control.
ContentControl could be everything done with xaml. For example:

<controls:Loading x:Name="LoadingControl" LoadingHorizontalAlignment="{Binding LoadingContentHorizontalAlignment.Value}" 
                    LoadingVerticalAlignment="{Binding LoadingContentVerticalAlignment.Value}"
                    LoadingBackground="{Binding LoadingBackground.Value}" LoadingOpacity="{Binding OpacityForLoadingControl.Value}">
    <StackPanel Orientation="Horizontal" Padding="12">
        <Grid Margin="0,0,8,0">
            <Image Source="../../Assets/ToolkitLogo.png" Height="50" />
            <ProgressRing IsActive="True" Foreground="Blue" />
        </Grid>
        <TextBlock Text="It's ok, we are working on it :)" Foreground="Black" VerticalAlignment="Center" />
    </StackPanel>
</controls:Loading>

Finally that the loading control appears, we must set the IsLoading property to true

LoadingControl.IsLoading = true;

msftclas · 2016-08-26T09:09:46Z

Hi @dachibox, I'm your friendly neighborhood Microsoft Pull Request Bot (You can call me MSBOT). Thanks for your contribution!

In order for us to evaluate and accept your PR, we ask that you sign a contribution license agreement. It's all electronic and will take just minutes. I promise there's no faxing. https://cla.microsoft.com.

TTYL, MSBOT;

msftclas · 2016-08-26T09:15:27Z

@dachibox, Thanks for signing the contribution license agreement so quickly! Actual humans will now validate the agreement and then evaluate the PR.

Thanks, MSBOT;

ScottIsAFool · 2016-08-26T09:25:19Z

Can you provide more information on what this Pull Request is including. You also need to resync with dev and resolve the conflicts.

ScottIsAFool · 2016-08-26T09:27:38Z

Microsoft.Toolkit.Uwp.UI.Controls/Loading/Loading.Properties.cs

+    public sealed partial class Loading
+    {
+        public static readonly DependencyProperty LoadingVerticalAlignmentProperty = DependencyProperty.Register(
+            "LoadingVerticalAlignment", typeof(VerticalAlignment), typeof(Loading), new PropertyMetadata(default(VerticalAlignment)));


Use nameof() instead of strings for property names

soydachi · 2016-08-26T09:46:33Z

Great @ScottIsAFool, let me revise all this and wait for a resync. Thanks'!

deltakosh · 2016-08-26T14:55:05Z

We should think about this control in way that almost all waiting screen can be doable with it.

Can I use it to display a fullscreen semi transparent rectangle with a waiting ring in the middle?
Can I use it to display a minimal bar on top or at the bottom of the screen?

I like the idea of this control but it has to be really versatile (and easy to use of course :))

deltakosh · 2016-08-26T14:55:45Z

Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj

@@ -277,7 +278,9 @@
    <Content Include="Assets\Prettify\prettify.js" />
    <Content Include="Assets\Prettify\run_prettify.js" />
    <Content Include="SamplePages\RangeSelector\RangeSelectorCode.bind" />
-    <Content Include="SamplePages\AdaptiveGridView\AdaptiveGridViewCode.bind" />
+    <Content Include="SamplePages\AdaptiveGridView\AdaptiveGridViewCode.bind">
+      <SubType>Designer</SubType>


This is not true (As there are our binding commands inside)

dotMorten · 2016-08-26T17:00:11Z

Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj

@@ -292,6 +295,9 @@
    <Content Include="SamplePages\BladeControl\BladeCode.bind" />
    <Content Include="SamplePages\FadeHeader\FadeHeaderBehaviorCode.bind" />
    <Content Include="SamplePages\FadeHeader\FadeHeaderBehaviorXaml.bind" />
+    <Content Include="SamplePages\Loading\LoadingCode.bind">
+      <SubType>Designer</SubType>


Shouldn't be designer here either

soydachi · 2016-08-29T06:46:20Z

@deltakosh Yes of course, you can try the sample that exist on SampleApp. There you can change some properties and look and feel.

The default template it's a must, so will start to finish this control with that. Thank's for all the help!

soydachi · 2016-08-29T11:14:44Z

@ScottIsAFool @deltakosh @dotMorten @pedrolamas I just updated the description and the project. Maybe now it's a little bit better :)

Thank's!

AuroraDysis · 2016-11-14T08:10:14Z

@skendrot My idea is more similar to #614

Conflicts: Microsoft.Toolkit.Uwp.UI.Controls/Themes/Generic.xaml

Conflicts: Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj Microsoft.Toolkit.Uwp.SampleApp/SamplePages/PrintHelper/PrintHelperPage.xaml.cs Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json

soydachi · 2016-12-07T21:19:24Z

@skendrot I just updated this control with some improvements. Let see it all is in the right way. Thank's!

skendrot · 2016-12-12T20:26:54Z

Still many namespace changes to files not related to this PR. I do not disagree with the changes, but they should not be part of this PR. Can you please revert the files not associated with this PR.

Conflicts: Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj Microsoft.Toolkit.Uwp.UI.Controls/Themes/Generic.xaml

soydachi · 2017-01-22T17:14:38Z

@skendrot happy new year! :) This should almost be done now. Greetings!

skendrot · 2017-01-23T16:31:03Z

docs/controls/Loading.md

+An example of how we can build the loading control.
+
+``` xaml
+<controls:Loading x:Name="LoadingControl" HorizontalAlignment="{Binding HorizontalAlignment.Value}" 


Let's remove the alignment, background and opacity bindings for the documentation. Add in a binding for IsLoading

skendrot · 2017-01-23T16:32:09Z

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ResizeBehavior/ResizeBehaviorPage.xaml.cs

@@ -10,9 +10,9 @@
 // THE CODE OR THE USE OR OTHER DEALINGS IN THE CODE.
 // ******************************************************************

-using Microsoft.Windows.Toolkit.SampleApp.Models;


Revert this change

skendrot · 2017-01-23T16:33:11Z

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json

@@ -118,6 +118,14 @@
        "BadgeUpdateVersionRequired": "/Assets/Badges/windows10_anniversary.png"
      },
      {
+        "Name": "Loading",
+        "Type": "LoadingPage",
+        "About": "Loading control helps to show any xaml content with animation to the user while the app is doing some calculation.",


"LoadingControl helps to show content with animation to the user while the app is doing some calculation."

skendrot · 2017-01-23T16:33:33Z

Microsoft.Toolkit.Uwp.UI.Controls/Loading/Loading.Properties.cs

+            nameof(IsLoading), typeof(bool), typeof(Loading), new PropertyMetadata(default(bool), IsLoadingPropertyChanged));
+
+        /// <summary>
+        /// Gets or sets a value indicating whether isLoading.


"Gets or sets a value indicating whether the control is in the loading state."

skendrot · 2017-01-23T16:34:19Z

Microsoft.Toolkit.Uwp.UI.Controls/Loading/Loading.xaml

+                    <Border x:Name="RootGrid" HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                          VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                            Background="{TemplateBinding Background}"
+                            Opacity="{TemplateBinding Opacity}">


No need to bind opacity

skendrot · 2017-01-23T16:37:20Z

Microsoft.Toolkit.Uwp.UI.Controls/Loading/Loading.xaml

+            <Setter.Value>
+                <ControlTemplate TargetType="controls:Loading">
+                    <Border x:Name="RootGrid" HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                          VerticalAlignment="{TemplateBinding VerticalAlignment}"


No need to bind horizontal and vertical alignment. You should bind border properties like BorderBrush, BorderThinkness

skendrot · 2017-01-23T16:39:12Z

docs/controls/Loading.md

+    <ContentControl x:Name="LoadingContentControl"/>
+</controls:Loading>
+```
+- **HorizontalAlignment** and **VerticalAlignment** are responsible to align the custom content of the control. It aligns what we create inside as a ContentPresenter.


These can be removed. Nothing unique about these properties for this control

skendrot · 2017-01-23T16:40:26Z

docs/controls/Loading.md

+```
+- **HorizontalAlignment** and **VerticalAlignment** are responsible to align the custom content of the control. It aligns what we create inside as a ContentPresenter.
+- **Background** and **Opacity** are for the panel who appears and disappears behind our custom control.
+- **ContentControl** could be everything done with xaml. For example:


Good to still show an example of putting content in the control, but no need to point out ContentControl. Perhaps "Use the LoadingControl to show specialized content"

skendrot · 2017-01-23T16:40:57Z

Almost there!!!

soydachi · 2017-01-25T08:46:01Z

@skendrot so I hope that now is almost done 😅

soydachi · 2017-01-25T08:53:54Z

@skendrot updated to the last upstream/dev

skendrot · 2017-01-25T15:27:02Z

WooHoo! Thanks for sticking with it @dachibox

soydachi · 2017-01-25T15:29:46Z

Hooray!! 😃

Thank you for staying with me all the time @skendrot and UWPCommunityToolkit Team!!

hermitdave · 2017-01-25T16:21:44Z

@dachibox @deltakosh this is a progress overlay that can contain anything including progress bar / indicators / messages right ? Coding4Fun toolkit called it ProgressOverlay and should we stick with that name ?

soydachi · 2017-01-25T16:52:33Z

The control is thought for showing very simple the loading or progress status of the app. But yes, you can put anything you want in the control.

I think that for messages, there is better with an MessageDialog or ContentDialog.
And indicators I think is in the same context as Loading.

What you think guys? @deltakosh @skendrot @hermitdave

skendrot · 2017-01-25T17:40:37Z

I would not rename it. If anything it would be good to merge with #828 to have a generic progress control that could have any content. If it was merged to one control then it would warrant being renamed.

hermitdave · 2017-01-25T17:43:52Z

I agree that would be for the next phase though.. this looks good so I will merge it now

hermitdave · 2017-01-25T17:44:58Z

@dachibox congratulations!! this along with #828 will be cool

soydachi added 5 commits August 25, 2016 11:19

Add loading control on UI.Controls

bcc05a4

Add loading control son samples.json and refactor code adapting style

ebd9cce

Implement sample of loading control

8836f88

Add loading image, implement properties for loading control customizatin

732f0c5

Merged feature/LoadingControl into dev

f689df8

msftclas added the cla-required label Aug 26, 2016

msftclas added cla-signed and removed cla-required labels Aug 26, 2016

ScottIsAFool reviewed Aug 26, 2016
View reviewed changes

soydachi added 2 commits August 26, 2016 12:02

fetch upstream dev branch to forked repository

002dcff

Apply nameof and removing this. Adding Loading.xaml template

fa49e92

deltakosh reviewed Aug 26, 2016
View reviewed changes

deltakosh added controls 🎛️ open discussion ☎️ labels Aug 26, 2016

dotMorten added the need more info 📌 label Aug 26, 2016

dotMorten reviewed Aug 26, 2016
View reviewed changes

soydachi added 4 commits August 29, 2016 12:34

Refactor loading control and add a default template

6148fd1

Merged feature/LoadingControlImprovements into dev

69697dc

Merged branch dev into dev

82a7140

Remove designer in SampleApp.csproj

75db927

soydachi added 6 commits December 6, 2016 18:39

updated loading docs

1f0a6a4

Merge remote-tracking branch 'refs/remotes/upstream/dev'

c45a336

Conflicts: Microsoft.Toolkit.Uwp.UI.Controls/Themes/Generic.xaml

LoadingCode.bin to content

26174a5

update names and undo AdaptiveGridViewPage usings.

dd13fc1

removed LoadingRequired event

ddedd7d

Merge remote-tracking branch 'refs/remotes/upstream/dev'

7585cca

Conflicts: Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj Microsoft.Toolkit.Uwp.SampleApp/SamplePages/PrintHelper/PrintHelperPage.xaml.cs Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json

soydachi added 2 commits January 22, 2017 16:46

Merge remote-tracking branch 'refs/remotes/upstream/dev'

06e9ccb

Conflicts: Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj Microsoft.Toolkit.Uwp.UI.Controls/Themes/Generic.xaml

remove unnecesary code

13aa821

skendrot suggested changes Jan 23, 2017

View reviewed changes

soydachi added 2 commits January 25, 2017 08:38

Update ResizeBehaviorPage.xaml.cs

cf09a0b

fix little typos and bind BorderBrush and BorderThickness

195a3c1

Merged branch dev into dev

f78a6a6

skendrot approved these changes Jan 25, 2017

View reviewed changes

skendrot added the reviewers wanted label Jan 25, 2017

hermitdave merged commit 0012aee into CommunityToolkit:dev Jan 25, 2017

skendrot mentioned this pull request Feb 8, 2017

Added radial progress bar control #828

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement loading control with sample. #247

Implement loading control with sample. #247

soydachi commented Aug 26, 2016 •

edited

Loading

msftclas commented Aug 26, 2016

msftclas commented Aug 26, 2016

ScottIsAFool commented Aug 26, 2016

ScottIsAFool Aug 26, 2016

soydachi commented Aug 26, 2016

deltakosh commented Aug 26, 2016 •

edited

Loading

deltakosh Aug 26, 2016

dotMorten Aug 26, 2016

soydachi commented Aug 29, 2016 •

edited

Loading

soydachi commented Aug 29, 2016

AuroraDysis commented Nov 14, 2016

soydachi commented Dec 7, 2016 •

edited

Loading

skendrot commented Dec 12, 2016

soydachi commented Jan 22, 2017

skendrot Jan 23, 2017

skendrot Jan 23, 2017

skendrot Jan 23, 2017

skendrot Jan 23, 2017

skendrot Jan 23, 2017

skendrot Jan 23, 2017

skendrot Jan 23, 2017

skendrot Jan 23, 2017

skendrot commented Jan 23, 2017

soydachi commented Jan 25, 2017

soydachi commented Jan 25, 2017

skendrot commented Jan 25, 2017

soydachi commented Jan 25, 2017

hermitdave commented Jan 25, 2017

soydachi commented Jan 25, 2017

skendrot commented Jan 25, 2017 •

edited

Loading

hermitdave commented Jan 25, 2017

hermitdave commented Jan 25, 2017

Implement loading control with sample. #247

Implement loading control with sample. #247

Conversation

soydachi commented Aug 26, 2016 • edited Loading

msftclas commented Aug 26, 2016

msftclas commented Aug 26, 2016

ScottIsAFool commented Aug 26, 2016

Choose a reason for hiding this comment

soydachi commented Aug 26, 2016

deltakosh commented Aug 26, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

soydachi commented Aug 29, 2016 • edited Loading

soydachi commented Aug 29, 2016

AuroraDysis commented Nov 14, 2016

soydachi commented Dec 7, 2016 • edited Loading

skendrot commented Dec 12, 2016

soydachi commented Jan 22, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

skendrot commented Jan 23, 2017

soydachi commented Jan 25, 2017

soydachi commented Jan 25, 2017

skendrot commented Jan 25, 2017

soydachi commented Jan 25, 2017

hermitdave commented Jan 25, 2017

soydachi commented Jan 25, 2017

skendrot commented Jan 25, 2017 • edited Loading

hermitdave commented Jan 25, 2017

hermitdave commented Jan 25, 2017

soydachi commented Aug 26, 2016 •

edited

Loading

deltakosh commented Aug 26, 2016 •

edited

Loading

soydachi commented Aug 29, 2016 •

edited

Loading

soydachi commented Dec 7, 2016 •

edited

Loading

skendrot commented Jan 25, 2017 •

edited

Loading