Custom Progress Ring For Windows 10 UWP App

Using default control is not always the solution for all Windows 10 UWP Apps. Sometimes, we have to make our own custom control for doing the same thing. Here, we are going to see how to make custom progress ring using image and storyboard, in Windows 10 Universal App.

Here, I use image control and rotate it infinitely, using storyboard, and we can use it like progress ring.

Let’s see the steps.

Create new Windows 10 UWP project and add image control. Also, assign the image source as per your wish. Here, I am using the following image.



Using the storyboard, set the behavior to rotate from 0 to 360 degrees in 2 seconds. You can set your own time and degree as per your wish, and target its effect to the Image control, like the following XAML code.

<Page.Resources>
    <Storyboard x:Name="ProgressStoryBoard" RepeatBehavior="Forever">
        <DoubleAnimation Duration="0:0:2" To="360.000" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="LoaderRing" d:IsOptimized="True" /> </Storyboard>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Image x:Name="LoaderRing" Height="200" Width="200" Source="Assets/LoadingCircle.png" Stretch="Fill" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" HorizontalAlignment="Center" Visibility="Collapsed">
        <Image.RenderTransform>
            <CompositeTransform/> </Image.RenderTransform>
    </Image>
</Grid>

Now, write the following code to set the Image Control Visibility to visible, and start the storyboard.

ProgressStoryBoard.Begin();
LoaderRing.Visibility = Visibility.Visible;

Run the application and check the output, like the following screen.