Skip to content

Commit 051168c

Browse files
Merge pull request #301 from Syncfusion-Content/development
DOCINFRA-2341_merged_using_automation
2 parents 8183995 + 4c007ba commit 051168c

File tree

297 files changed

+10138
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

297 files changed

+10138
-0
lines changed

maui-toolkit-toc.html

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,52 @@
208208
<li><a href="/maui-toolkit/circular-charts/exporting">Exporting</a></li>
209209
</ul>
210210
</li>
211+
<li>
212+
SfCircularProgressBar
213+
<ul>
214+
<li><a href="/maui-toolkit/CircularProgressBar/overview">Overview</a></li>
215+
<li><a href="/maui-toolkit/CircularProgressBar/getting-started">Getting Started</a></li>
216+
<li><a href="/maui-toolkit/CircularProgressBar/states">States</a></li>
217+
<li><a href="/maui-toolkit/CircularProgressBar/range">Define Range</a></li>
218+
<li><a href="/maui-toolkit/CircularProgressBar/custom-content">Custom Content</a></li>
219+
<li><a href="/maui-toolkit/CircularProgressBar/segments">Segments</a></li>
220+
<li><a href="/maui-toolkit/CircularProgressBar/appearance">Appearance</a></li>
221+
<li><a href="/maui-toolkit/CircularProgressBar/animation">Animation</a></li>
222+
<li><a href="/maui-toolkit/CircularProgressBar/events">Events</a></li>
223+
</ul>
224+
</li>
225+
<li>
226+
SfDatePicker
227+
<ul>
228+
<li><a href="/maui-toolkit/DatePicker/overview">Overview</a></li>
229+
<li><a href="/maui-toolkit/DatePicker/getting-started">Getting Started</a></li>
230+
<li><a href="/maui-toolkit/DatePicker/formatting">Formatting</a></li>
231+
<li><a href="/maui-toolkit/DatePicker/date-picker-mode">DatePicker Mode</a></li>
232+
<li><a href="/maui-toolkit/DatePicker/date-picker-text-display-mode">Text Display Mode</a></li>
233+
<li><a href="/maui-toolkit/DatePicker/date-restriction">Date Restriction</a></li>
234+
<li><a href="/maui-toolkit/DatePicker/date-interval">Date Interval</a></li>
235+
<li><a href="/maui-toolkit/DatePicker/customizations">Customizations</a></li>
236+
<li><a href="/maui-toolkit/DatePicker/events">Events and Commands</a></li>
237+
<li><a href="/maui-toolkit/DatePicker/localization">Localization</a></li>
238+
<li><a href="/maui-toolkit/DatePicker/accessibility">Accessibility</a></li>
239+
</ul>
240+
</li>
241+
<li>
242+
SfDateTimePicker
243+
<ul>
244+
<li><a href="/maui-toolkit/DateTimePicker/overview">Overview</a></li>
245+
<li><a href="/maui-toolkit/DateTimePicker/getting-started">Getting Started</a></li>
246+
<li><a href="/maui-toolkit/DateTimePicker/formatting">Formatting</a></li>
247+
<li><a href="/maui-toolkit/DateTimePicker/date-time-picker-text-display-mode">Text Display Mode</a></li>
248+
<li><a href="/maui-toolkit/DateTimePicker/date-time-picker-mode">Picker Modes</a></li>
249+
<li><a href="/maui-toolkit/DateTimePicker/date-restriction">Date Restriction</a></li>
250+
<li><a href="/maui-toolkit/DateTimePicker/intervals">Intervals</a></li>
251+
<li><a href="/maui-toolkit/DateTimePicker/customizations">Customizations</a></li>
252+
<li><a href="/maui-toolkit/DateTimePicker/events">Events and Commands</a></li>
253+
<li><a href="/maui-toolkit/DateTimePicker/localization">Localization</a></li>
254+
<li><a href="/maui-toolkit/DateTimePicker/accessibility">Accessibility</a></li>
255+
</ul>
256+
</li>
211257
<li>
212258
SfEffectsView
213259
<ul>
@@ -252,6 +298,19 @@
252298
<li><a href="/maui-toolkit/funnel-charts/exporting">Exporting</a></li>
253299
</ul>
254300
</li>
301+
<li>
302+
SfLinearProgressBar
303+
<ul>
304+
<li><a href="/maui-toolkit/LinearProgressBar/overview">Overview</a></li>
305+
<li><a href="/maui-toolkit/LinearProgressBar/getting-started">Getting Started</a></li>
306+
<li><a href="/maui-toolkit/LinearProgressBar/states">States</a></li>
307+
<li><a href="/maui-toolkit/LinearProgressBar/range">Define Range</a></li>
308+
<li><a href="/maui-toolkit/LinearProgressBar/segments">Segments</a></li>
309+
<li><a href="/maui-toolkit/LinearProgressBar/appearance">Appearance</a></li>
310+
<li><a href="/maui-toolkit/LinearProgressBar/animation">Animation</a></li>
311+
<li><a href="/maui-toolkit/LinearProgressBar/events">Events</a></li>
312+
</ul>
313+
</li>
255314
<li>
256315
SfNavigationDrawer
257316
<ul>
@@ -303,6 +362,23 @@
303362
<li><a href="/maui-toolkit/Otp-Input/Accessibility">Accessibility</a></li>
304363
</ul>
305364
</li>
365+
<li>
366+
SfPicker
367+
<ul>
368+
<li><a href="/maui-toolkit/Picker/overview">Overview</a></li>
369+
<li><a href="/maui-toolkit/Picker/getting-started">Getting Started</a></li>
370+
<li><a href="/maui-toolkit/Picker/populating-items">PopulatingItems</a></li>
371+
<li><a href="/maui-toolkit/Picker/data-template-selector">DataTemplateSelector</a></li>
372+
<li><a href="/maui-toolkit/Picker/events">Events and Commands</a></li>
373+
<li><a href="/maui-toolkit/Picker/picker-mode">Picker Mode</a></li>
374+
<li><a href="/maui-toolkit/Picker/picker-text-display-mode">Text Display Mode</a></li>
375+
<li><a href="/maui-toolkit/Picker/dealing-with-header-footer-and-selection-view">Dealing with Header, Footer and Selection view</a></li>
376+
<li><a href="/maui-toolkit/Picker/dealing-with-column-header">Dealing with ColumnHeader</a></li>
377+
<li><a href="/maui-toolkit/Picker/dealing-with-columns">Dealing with Columns</a></li>
378+
<li><a href="/maui-toolkit/Picker/localization">Localization</a></li>
379+
<li><a href="/maui-toolkit/Picker/accessibility">Accessibility</a></li>
380+
</ul>
381+
</li>
306382
<li>
307383
SfPolarChart
308384
<ul>
@@ -432,6 +508,22 @@
432508
<li><a href="/maui-toolkit/TextInputLayout/How-To">How to</a></li>
433509
</ul>
434510
</li>
511+
<li>
512+
SfTimePicker
513+
<ul>
514+
<li><a href="/maui-toolkit/TimePicker/overview">Overview</a></li>
515+
<li><a href="/maui-toolkit/TimePicker/getting-started">Getting Started</a></li>
516+
<li><a href="/maui-toolkit/TimePicker/formatting">Formatting</a></li>
517+
<li><a href="/maui-toolkit/TimePicker/time-picker-text-display-mode">Text Display Mode</a></li>
518+
<li><a href="/maui-toolkit/TimePicker/time-restriction">Time Restriction</a></li>
519+
<li><a href="/maui-toolkit/TimePicker/time-picker-mode">TimePicker Mode</a></li>
520+
<li><a href="/maui-toolkit/TimePicker/time-interval">Time Interval</a></li>
521+
<li><a href="/maui-toolkit/TimePicker/customizations">Customizations</a></li>
522+
<li><a href="/maui-toolkit/TimePicker/events">Events and Commands</a></li>
523+
<li><a href="/maui-toolkit/TimePicker/localization">Localization</a></li>
524+
<li><a href="/maui-toolkit/TimePicker/accessibility">Accessibility</a></li>
525+
</ul>
526+
</li>
435527
<li>
436528
Release Notes
437529
<ul>
Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
layout: post
3+
title: Animation in .NET MAUI Circular ProgressBar control | Syncfusion<sup>&reg;</sup>
4+
description: Learn here all about animation support in Syncfusion<sup>&reg;</sup> .NET MAUI Circular ProgressBar control, its elements and more.
5+
platform: MAUI
6+
control: SfCircularProgressBar
7+
documentation: ug
8+
---
9+
10+
# Animation in .NET MAUI Circular ProgressBar (SfCircularProgressBar)
11+
12+
The circular progress bar provides animation support to visualize the progress value changes in an interactive way.
13+
14+
The following properties are used to define the duration of animation for the specific states.
15+
16+
* [`AnimationDuration:`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ProgressBar.ProgressBarBase.html#Syncfusion_Maui_Toolkit_ProgressBar_ProgressBarBase_AnimationDuration) Represents animation duration of the determinate state’s progress indicator.
17+
* [`IndeterminateAnimationDuration:`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ProgressBar.ProgressBarBase.html#Syncfusion_Maui_Toolkit_ProgressBar_ProgressBarBase_IndeterminateAnimationDuration) Represents animation duration of the indeterminate state’s indicator.
18+
19+
## Easing effects
20+
21+
The [`AnimationEasing`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ProgressBar.ProgressBarBase.html#Syncfusion_Maui_Toolkit_ProgressBar_ProgressBarBase_AnimationEasing) property allows you specify the transfer function that controls animation speed when they run.
22+
23+
The following code sample demonstrates the `CubicInOut` easing function of the circular progress bar.
24+
25+
{% tabs %}
26+
27+
{% highlight xaml %}
28+
29+
<progressBar:SfCircularProgressBar Progress="75"
30+
AnimationEasing="{x:Static Easing.CubicInOut}"/>
31+
32+
{% endhighlight %}
33+
34+
{% highlight c# %}
35+
36+
SfCircularProgressBar circularProgressBar = new SfCircularProgressBar();
37+
circularProgressBar.Progress = 75;
38+
circularProgressBar.AnimationEasing = Easing.CubicInOut;
39+
this.Content = circularProgressBar;
40+
41+
42+
{% endhighlight %}
43+
44+
{% endtabs %}
45+
46+
![.NET MAUI Circular ProgressBar with CubicInOut animation](images/animation/easing-animation.gif)
47+
48+
The [`SetProgress()`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ProgressBar.ProgressBarBase.html#Syncfusion_Maui_Toolkit_ProgressBar_ProgressBarBase_SetProgress_System_Double_System_Nullable_System_Double__Microsoft_Maui_Easing_) method in the progress bar is used to set progress value along with animation duration and easing effect applicable for the specific method call.
49+
50+
{% highlight c# %}
51+
52+
void SetProgress(double progress, double? animationDuration = null, Easing? easing = null)
53+
54+
{% endhighlight %}
55+
56+
N> The animation duration and easing effect parameters will not affect the configuration of the [`AnimationDuration`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ProgressBar.ProgressBarBase.html#Syncfusion_Maui_Toolkit_ProgressBar_ProgressBarBase_AnimationDuration) and [`AnimationEasing`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ProgressBar.ProgressBarBase.html#Syncfusion_Maui_Toolkit_ProgressBar_ProgressBarBase_AnimationEasing) properties.
57+
58+
## Indeterminate Easing Effects
59+
60+
The [`IndeterminateAnimationEasing`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ProgressBar.ProgressBarBase.html#Syncfusion_Maui_Toolkit_ProgressBar_ProgressBarBase_IndeterminateAnimationEasing) property allows you to specify a transfer function for indeterminate state, which controls animation speed when they run.
61+
62+
The following code sample demonstrates the `BounceIn` easing function of the circular progress bar.
63+
64+
{% tabs %}
65+
66+
{% highlight xaml %}
67+
68+
<progressBar:SfCircularProgressBar IsIndeterminate="True"
69+
IndeterminateAnimationEasing="{x:Static Easing.BounceIn}" />
70+
71+
{% endhighlight %}
72+
73+
{% highlight c# %}
74+
75+
SfCircularProgressBar circularProgressBar = new SfCircularProgressBar();
76+
circularProgressBar.IsIndeterminate = true;
77+
circularProgressBar.IndeterminateAnimationEasing = Easing.BounceIn;
78+
this.Content = circularProgressBar;
79+
80+
{% endhighlight %}
81+
82+
{% endtabs %}
83+
84+
![.NET MAUI Circular ProgressBar with indeterminate animation](images/animation/indeterminate.gif)

0 commit comments

Comments
 (0)