Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

How to Create a Different Circular Loader using XAML?

, 22 Jul 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
Last Wednesday (July 6th 2011) we explored a way to create a Circular loader using XAML without writing any line in the code behind file. Lot of you gave a good feedback and discussed various findings on the same.   I did some more investigation to create a different type of circular loader whi

Last Wednesday (July 6th 2011) we explored a way to create a Circular loader using XAML without writing any line in the code behind file. Lot of you gave a good feedback and discussed various findings on the same.

I did some more investigation to create a different type of circular loader which you can include in your Silverlight, WPF and Windows Phone 7 applications where you are using XAML code. In this article, I will be guiding to create similar kind of Circular loader as shown above. This will be more simple than the previous one. Let's start our discussion and create one loader like this.

Background

I hope that you read my previous article "How to Create a Circular Loader using XAML?" that I posted last week. If you didn't read that yet, I will suggest you to read that one first because, that will give you more idea while reading this article. This is the 2nd part of the series where I am going to showcase you another type of loader just using the XAML code.

Setting up the Project

First we need to setup our project.  First create your Silverlight project and add one UserControl named "CustomLoader.xaml" in the project. Then we need to create the UI of the UserControl. But before going to that step, we need three assembly references included in the project. the following three DLL references in it:

  1. Microsoft.Expression.Drawing.dll
  2. Microsoft.Expression.Interactions.dll
  3. System.Windows.Interactivity.dll

The first DLL will be useful to create a Circular Arc and the rest of the other two DLLs will be used to create the Triggers. We will discuss more on this later while adding them.

Add Assembly References for Microsoft.Expression.Drawing, Microsoft.Expression.Interactions and System.Windows.Interactivity

Once you added the DLL references, add the respective XMLNS namespaces in the CustomLoader usercontrol as shown below:

Add xmlns Namespace to the UserControl

The first xmlns namespace named "ed" will refer the Microsoft.Expression.Drawing.dll assembly and by using this we will create an Arc in the UI. The rest two namespaces from the System.Windows.Interactivity.dll and Microsoft.Expression.Interactions.dll will be useful to create the EventTrigger. Once you are done with this step, we can jump into the UI design.

Creating the XAML UI for the Circular Loader

In this step, we will just create the UI of the loader, where we will have a circular control in the screen. Let's open the usercontrol that we added into the project and replace the LayoutRoot Grid control with a ViewBox control and add a Canvas panel into it. Confused, why we did this!!! Read my previous article then. That will clarify the same.

Now add proper height and width to the Canvas, so that, we can place a symmetric arc control inside it. We will now add one Arc control from the "ed" namespace as shown below and add RenderTransform to it, so that, we can rotate the control easily using the StoryBoard. We will also add a Gradient fill to the control to create the similar look and feel that we shown earlier.

<Viewbox>
    <Canvas x:Name="LayoutRoot" Background="White" Height="100" Width="100">
       <ed:Arc x:Name="arc" ArcThickness="20" ArcThicknessUnit="Pixel"
                EndAngle="360" Height="100" Stretch="None"
               StartAngle="0" UseLayoutRounding="False" Width="100" 
                RenderTransformOrigin="0.5,0.5">
           <ed:Arc.RenderTransform>
                <CompositeTransform/>
           </ed:Arc.RenderTransform>
            <ed:Arc.Fill>
               <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black"/>
                   <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
           </ed:Arc.Fill>
        </ed:Arc>
   </Canvas>
</Viewbox>

Make sure that, we can create the same without using the Arc control. In that case, you don't have to add the said assembly. So, what to do in that case? You can create two circles using Ellipse control but that step will be little tough and complex.

If you are familiar with Expression Blend, you can add the Arc by following the below steps as shown in the screenshot:

Selecting Ring Control from the Shapes Assets in Expression Blend

  1. Inside the Expression Blend, click the Assets panel.
  2. Click the "Shape" section from the left group.
  3. Now from the "Object and Timeline" Explorer, select the LayoutRoot canvas where we will add the Arc.
  4. Double click on the "Ring" to insert the Arc control inside the LayoutRoot.

These steps will add the control in the UI as shown below:

Ring Control from the Shapes Assets Added to the LayoutRoot Canvas

This actually create the same XAML code mentioned earlier. Add the RenderTransform properly to the control. Remember that, if you didn't already add the reference in the project. This step will do that for you automatically.

Create the Animation using Storyboard

Now time to create the Storyboard for our loader to give proper animation to it. Inside the UserControl.Resources add the Storyboard as shown below:

<UserControl.Resources>
    <Storyboard x:Name="LoaderAnimation">
       <DoubleAnimationUsingKeyFrames Storyboard.TargetName="arc" 
           RepeatBehavior="Forever"
           Storyboard.TargetProperty=
               "(UIElement.RenderTransform).(CompositeTransform.Rotation)">
           <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="365"/>
       </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources> 

This storyboard will be responsible to rotate the control 360 degree for indefinite time. Give a proper name (say "LoaderAnimation" in our case) to the Storyboard.

Adding the Trigger to Start the Animation

Once your Storyboard animation is ready, it's time to fire the Storyboard to play. You can do this from the code behind too. But as we said, we will not use any code behind file, hence we will trigger this from the XAML code itself.

Let's use the below code which will trigger the animation once the view loaded:

<i:Interaction.Triggers>
    <i:EventTrigger>
       <ei:ControlStoryboardAction Storyboard="{StaticResource LoaderAnimation}"/>
    </i:EventTrigger>
</i:Interaction.Triggers>

The ControlStoryboardAction behavior will fire the play call to the animation mentioned using the StaticResource.

Adding the Control to the View

This is simple step. First add the proper XMLNS namespace of the control in the view and then add the control inside the Grid control or whatever is your preferred location. Our code will look like this:

<UserControl x:Class="CircularLoader.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:CircularLoader="clr-namespace:CircularLoader">
   <Grid x:Name="LayoutRoot" Background="White">
        <CircularLoader:CustomLoader Height="50" Width="50"/>
   </Grid>
</UserControl>

Use this code for your reference. This step finishes the complete design of our control and now time to see it in action.

Demo

Build the project and resolve if any error happens. Now run the project and you will see the following UI inside your browser:

That's our control that we created just now. Simple and small steps to create such nice looking circular loader for your application. You can now customize and add other functionalities to it too.

Hope these two articles will help you to create circular loader for your application. You can create many types of circular loader. Once these steps are clear to you, it will be easier for you to implement.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Kunal Chowdhury (@kunal2383)
Team Leader
India India
Kunal Chowdhury is a Microsoft "Windows Platform Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik MVP, Nokia Developer Champion, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.
 
He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows Store (WinRT) app development. He posts his findings, articles, tutorials in his technical blog and CodeProject.
 
Technical Blog: http://www.kunal-chowdhury.com
Facebook: http://facebook.com/blog.kunal
Twitter : http://twitter.com/kunal2383
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 5 PinmvpBrij23-Jul-11 9:54 
GeneralRe: My vote of 5 PinmvpKunal_Chowdhury24-Jul-11 6:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150224.1 | Last Updated 22 Jul 2011
Article Copyright 2011 by Kunal Chowdhury (@kunal2383)
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid