Powered by Blogger.
🌏World roaming Software Technology Evangelist. Proud Indian, Bought up from Coimbatore, Tamilnadu, INDIA. Pointing towards share of Knowledge. 😎
  • Programming ▼
    • DotNet
      • C# Coding Standards
    • Cloud
    • Microsoft 365/ SharePoint
    • SQL
    • Angular / ReactJS / NodeJS
    • Salesforce
    • Magento
    • Python
    • Mobile App Development
    • Database
    • DevOps
    • Automation Testing
    • User Experience
  • Learning ▼
    • Roadmap
    • Trainings
    • E-Books
    • Quick References
    • Certifications
    • Self Improvement
    • Productivity
    • TED Talks
    • Kids Programming
  • Software Engineering ▼
    • Agile
    • Software Design
    • Architecture Samples
    • Best Practises
    • Technologies and Tools
    • Open Sources
    • Free Softwares
  • Leadership ▼
    • Program Management
    • Product Management
    • Project Management
    • People Management
  • Job Search ▼
    • Interview Tips
    • Career Handbook
    • Resume Templates
    • Sample Profiles
    • Cover Letter Samples
    • HR Interview Questions
    • Job Websites List
    • Coding Site Links
    • TedEx Talks
    • International Jobs
  • Emerging Topics ▼
    • Innovation
    • Machine Learning
    • Artificial Intelligence
    • Generative AI
    • AI Tools
    • Big Data
    • Data Science
    • Data Analytics & Visualization
    • Cyber Security
    • Microsoft Azure
    • Amazon Web Services
    • Cryptography
    • ChatBots
    • Internet of Things (IoT)
    • Mixed Reality /AR/VR
  • Misc. ▼
    • Travel
    • Photography
    • Health Tips
    • Medical Tips
    • Home Designs
    • Gardening
  • Favourite Links ▼
    • Saran Kitchen Hut
    • World of Akshu
    • Saran & Akshu - Other Links

 

You can enjoy this comedy if you know Tamil. :) 

http://soundcloud.com/balajipatturaj

 

Referred URL

http://www.codeproject.com/KB/silverlight/SLListVsOCollections.aspx 

Difference between List<T>, ObservableCollection<T> and INotifyPropertyChanged

List<T>

It represents a strongly typed list of objects that can be accessed by index. It provides methods to search, sort, and manipulate lists. The List<T> class is the generic equivalent of the ArrayList class. It implements the IList<T>generic interface using an array whose size is dynamically increased as required.

Drawbacks

In ASP.NET, we simply use DataSource and DataBind() to bind the data, but in Silverlight it is slightly different. Databinding in ASP.NET is done in a stateless way - once that binding operation is completed, it's a done deal and if you want to change anything, you have to manipulate the underlying controls that were created as a result of the data binding, or else change the underlying data objects and call DataBind() again. That’s what we are used to – but it’s not a good practice.

listgrid.JPG

In the sample application, the values in the list are added, removed and changed during runtime in the code behind. The changes in the list will not be updated to the UI (Datagrid).

ObservableCollection<T>

ObservableCollection is a generic dynamic data collection that provides notifications (using an interface "INotifyCollectionChanged") when items get added, removed, or when the whole collection is refreshed.

Note: WCF service proxy class in Silverlight will use this type of collection by default.

observablecollection.JPG

Drawbacks

It does not provide any notifications when any property in the collection is changed.

observablecollectiongrid.JPG

In the sample application, the values in the observable collection are added, removed and changed during runtime in the code behind. The operations (adding and removing an item) in the observable collection will be updated to the UI (Datagrid). But any change in the existing item will not be updated to the UI.

INotifyPropertyChanged

INotifyPropertyChanged is not a collection, it’s an interface used in the data object classes to providePropertyChanged notification to clients when any property value gets changed. This will allow you to raisePropertyChanged event whenever the state of the object changes (Added, Removed, and Modified) to the point where you want to notify the underlying collection or container that the state has changed.

inotifypropertychanged.JPG

inotifypropertychangedgrid.JPG

INotifyPropertyChanged is compatible on all type of collections like List<T>, ObservableCollection<T>, etc. The code snippet which uses INotifyPropertyChanged is shown below:

Collapse

public class UserNPC:INotifyPropertyChanged
{
private string name;
public string Name {
get { return name; }
set { name = value; onPropertyChanged(this, "Name"); }
}
public int grade;
public int Grade {
get { return grade; }
set { grade = value; onPropertyChanged(this, "Grade"); }
}

// Declare the PropertyChanged event
public event PropertyChangedEventHandler PropertyChanged;

// OnPropertyChanged will raise the PropertyChanged event passing the
// source property that is being updated.
private void onPropertyChanged(object sender, string propertyName)
{
if (this.PropertyChanged != null)
{
PropertyChanged(sender, new PropertyChangedEventArgs(propertyName));
}
}
}

In the above code snippet, whenever a value is set to a property, the method “onPropertyChanged” will be called which in turn raises the PropertyChanged event.

 

Referred URL : http://www.kunal-chowdhury.com/2011/07/how-to-create-circular-loader-using.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:+kunal-chowdhury/Silverlight+(Kunal's+Blog+-+Silverlight)

 

Sometime we need to show a circular loader in WPF and/or Silverlight. We may need it in Windows Phone 7 too. In simple statement, we need to show a circular loader in various XAML applications like Silverlight, WP7 and WPF.

In this article, we will learn how to create a Circular Loader as shown in the screenshot. I will not use a single line of C# code to create this loader. Everything will be in the XAML file itself to keep the code behind file clean. Read to know more about it step-by-step and after reading this article, you will be able to create and use a circular loader like this. Source code is also available for download at the end of the page. Feel free to use it.

Setup the Project

First, we need to create a Silverlight project. Here we will create a Silverlight 4 Application project. Once you are done with the project creation, right click on the Silverlight project and add a new UserControl. We will use this as the circular loader. As shown in the below screenshot, select the "Silverlight User Control" template and provide a name "CircularLoader.xaml" and hit "Add" to continue.

Loader Demo - Create a new UserControl called CircularLoader.xaml

This will create a new UserControl in your solution project. Once done with this step, it's time to create the UI of the loader control. Then we will integrate it to the MainPage.xaml and see how it looks.

Create the UI of the Circular Loader

Now time to create the XAML of the loader. Remember that, we will not have a single line of C# code. Everything will be done in the XAML. If you are expert with Expression Blend, you can create it very easily. But here we will use direct XAML code to demonstrate the same. It will be helpful for you to understand properly.

Let's open the usercontrol xaml file and replace the original Grid control with a ViewBox control. You may ask one question here: Why should I use a ViewBox? Yes my friend, a very good question. ViewBox will allow you to resize the content of the panel with respect to parent container. This means if you explicitly increase or decrease the size of the user control, the inner content will proportionally resize as per the container size.

Now we will add a Canvas inside the ViewBox, so that, we can properly place the circles inside it in proper (x, y) coordinates.

After this step, we need to add some Ellipse control inside the Canvas panel to create a Circle. We will fill the color of the Ellipse with the Foreground color of the UserControl. We will use proper binding to do this, as shown below:

 
<Ellipse Fill="{Binding Foreground, ElementName=userControl}" 
         Height="71" Canvas.Left="121" Canvas.Top="21" Width="69" Opacity="0.3"/>

In the above code snippet, you can see that, we added Canvas.Left and Canvas.Top to position the circle. Similarly, we will add some more circles using the Ellipse control and position them properly to create a circular path.

Setting the Opacity of the Circles


We need to set the opacity of the circles to create the similar look as we wanted to develop. Opacity will ensure that, we will use the same color but different transparency to create the UI.

Find the below XAML code for reference:

Loader Demo - Designing the Loader Circles with Proper Opacity Value

Have a look into the above XAML code. You will see there how we placed the circles in proper coordinate positions. Also check the opacity that we set for each individual circles.

Adding RenderTransform to the Canvas


Once you are done with the UI, you need to set the RenderTransform to the canvas. This step is require to keep the circle rotating in the orbit. We will add a composite transform to the canvas as shown below:

Loader Demo - Adding RenderTransform to the Canvas

Our animation that we will create in the next step will use the same transform of the canvas to rotate the circles in the circular orbit.

Find the complete code of the UI here, in case you need proper visibility on the code that we created just now:

 
<Viewbox x:Name="LayoutRoot" HorizontalAlignment="Left" VerticalAlignment="Top">
    <Canvas x:Name="canvas" Height="323" Width="308" RenderTransformOrigin="0.5,0.5">
        <Canvas.RenderTransform>
            <CompositeTransform/>
        </Canvas.RenderTransform>
        <Ellipse Fill="{Binding Foreground, ElementName=userControl}" 
                 Height="71" Canvas.Left="121" Canvas.Top="21" Width="69" Opacity="0.3"/>
        <Ellipse Fill="{Binding Foreground, ElementName=userControl}" 
                 Height="71" Width="69" Canvas.Left="194" Canvas.Top="52" Opacity="0.4"/>
        <Ellipse Fill="{Binding Foreground, ElementName=userControl}" 
                 Width="69" Height="71" Canvas.Left="221" Canvas.Top="123" Opacity="0.5"/>
        <Ellipse Fill="{Binding Foreground, ElementName=userControl}" 
                 Width="69" Height="71" Canvas.Left="190" Canvas.Top="198" Opacity="0.6"/>
        <Ellipse Fill="{Binding Foreground, ElementName=userControl}" 
                 Height="71" Canvas.Left="121" Canvas.Top="226" Width="69" Opacity="0.7"/>
        <Ellipse Fill="{Binding Foreground, ElementName=userControl}" 
                 Width="69" Height="71" Canvas.Left="48" Canvas.Top="194" Opacity="0.8"/>
        <Ellipse Fill="{Binding Foreground, ElementName=userControl}" 
                 Height="71" Width="69" Canvas.Left="17" Canvas.Top="123" Opacity="0.9"/>
        <Ellipse Fill="{Binding Foreground, ElementName=userControl}" 
                 Height="71" Width="69" Canvas.Left="48" Canvas.Top="52" Opacity="1.0"/>
    </Canvas>
</Viewbox>

Create the Storyboard


Now what we need in this step? We need to create a smooth animation which we can achieve using the StoryBoard. We will create a Storyboard now to rotate the circles in the orbit. You can use the Expression Blend to create the animation easily. As this is a simpler code, I am just sharing the code for you here:

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

The storyboard will rotate the canvas to 360 degree to give a circular motion to the circles. Also we will set the RepeatBehavior to indefinite by setting the value "Forever". Here the storyboard will be available as a Resource to the UserControl. Hence we can easily access it whenever require.

Once the storyboard has been created, we need to run it on load. The simplest approach here will be calling the Begin() method of the storyboard from code behind class. As I told, we will not write a single line in the code behind, we need to do something from the XAML which will cause the storyboard to run.

We can achieve this functionality be using the Microsoft.Expression.Interactions and System.Windows.Interactivity dll assemblies. They provides interfaces to call a storyboard on some event. To do this, we need to add the assembly references of those dlls. Add them from the "Add Reference" dialog as shown below:

Loader Demo - Adding External Libraries (Microsoft.Expression.Interactions and System.Windows.Interactivity)

Once you added the assembly references, we will add the following xmlns namespaces in the xaml file. Those two namespace will help us to call the storyboard easily from the xaml without writing any code behind file.

Loader Demo - Adding xmlns Namespaces in the XAML

Just after the resource declaration, add the below code:

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

This will run the storyboard from the loaded event. That means, once the usercontrol has been loaded in the UI, it will call the Storyboard to start executing the animation.

See it in Action


Upto this, our code is ready. Now, add the said CurcularLoader.xaml UserControl in the MainPage.xaml file. We will place it inside the LayoutRoot. Make sure to set a Foreground color for the circles. Build the solution and check if there are any error. If so, fix them and run the project. You will see the following UI inside the browser window:

Loader Demo - Showing Demo of the Loader Control

If you resize the browser, it will change the size of the circular loader in proportion to the parent panel. Now we will do a little change here. While adding the user control in the main page, we will specify it's height and width. For our example, we will use 50 x 50 as the dimension of the loader control.

Find the complete source code of the MainPage.xaml where we added the loader control:

 
<UserControl x:Class="LoaderDemo.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:LoaderDemo="clr-namespace:LoaderDemo">
    <Grid>
        <LoaderDemo:CircularLoader Foreground="Black" 
                                   HorizontalAlignment="Center" 
                                   VerticalAlignment="Center"
                                   Height="50" Width="50"/>
    </Grid>
</UserControl>

Now once you run the application again, you will see the following UI where the loader control has a fixed size:

Loader Demo - Showing Demo of the Loader Control after Resize

In this case, if you resize the browser, it will not change it's size because now it has a proper dimension. Hope, you enjoyed reading the article. This helped you to understand the same in depth. Now you will be able to modify the same code and implement additional behavior. You can also expose some APIs on need basis.

Download Source Code


Do you need the source code of the project for your reference? Yes, you can download it from here:




      • Circular Loader Demo (Source Code - 23KB)
Newer Posts
Older Posts

Search this Site

Translate Articles

Total Posts

Total Pageviews


Contributors

My photo
Jay Srinivasan
Professional: I'm a Software Techie, Specialized in Microsoft technologies. Worked in CMM Level 5 organizations like EPAM, KPMG, Bosch, Honeywell, ValueLabs, Capgemini and HCL. I have done freelancing. My interests are Software Development, Graphics design and Photography.
Certifications: I hold PMP, SAFe 6, CSPO, CSM, Six Sigma Green Belt, Microsoft and CCNA Certifications.
Academic: All my schooling life was spent in Coimbatore and I have good friends for life. I completed my post graduate in computers(MCA). Plus a lot of self learning, inspirations and perspiration are the ingredients of the person what i am now.
Personal Life: I am a simple person and proud son of Coimbatore. I studied and grew up there. I lost my father at young age. My mom and wife are proud home-makers and greatest cook on earth. My kiddo in her junior school.
Finally: I am a film buff and like to travel a lot. I visited 3 countries - United States of America, Norway and United Kingdom. I believe in honesty after learning a lot of lessons the hard way around. I love to read books & articles, Definitely not journals. :)
View my complete profile

Certifications

Certifications

My Favorite Links

  • Saran & Akshu Links
  • Saran Kitchen Hut
  • World of Akshu
  • Ashok Raja Blog

Subscribe To

Posts
Atom
Posts
All Comments
Atom
All Comments

Contact Form

Name

Email *

Message *

Connect with Me

Blog Archive

  • ►  2025 (48)
    • ►  June (7)
    • ►  May (26)
    • ►  April (1)
    • ►  March (3)
    • ►  February (1)
    • ►  January (10)
  • ►  2024 (134)
    • ►  December (3)
    • ►  November (8)
    • ►  October (11)
    • ►  September (2)
    • ►  August (1)
    • ►  July (39)
    • ►  June (8)
    • ►  May (4)
    • ►  April (9)
    • ►  March (6)
    • ►  February (33)
    • ►  January (10)
  • ►  2023 (16)
    • ►  December (12)
    • ►  August (2)
    • ►  March (1)
    • ►  January (1)
  • ►  2022 (14)
    • ►  December (1)
    • ►  August (6)
    • ►  July (3)
    • ►  June (2)
    • ►  February (1)
    • ►  January (1)
  • ►  2021 (16)
    • ►  December (1)
    • ►  November (2)
    • ►  October (2)
    • ►  August (1)
    • ►  July (2)
    • ►  June (2)
    • ►  May (2)
    • ►  March (2)
    • ►  February (1)
    • ►  January (1)
  • ►  2020 (36)
    • ►  December (1)
    • ►  November (15)
    • ►  October (2)
    • ►  September (1)
    • ►  July (1)
    • ►  June (2)
    • ►  May (4)
    • ►  March (2)
    • ►  February (6)
    • ►  January (2)
  • ►  2019 (14)
    • ►  December (3)
    • ►  November (1)
    • ►  September (2)
    • ►  August (1)
    • ►  June (1)
    • ►  May (3)
    • ►  March (2)
    • ►  January (1)
  • ►  2018 (61)
    • ►  November (3)
    • ►  October (4)
    • ►  September (4)
    • ►  August (5)
    • ►  July (4)
    • ►  June (4)
    • ►  May (7)
    • ►  April (7)
    • ►  March (5)
    • ►  February (1)
    • ►  January (17)
  • ►  2017 (55)
    • ►  December (1)
    • ►  November (7)
    • ►  October (7)
    • ►  September (8)
    • ►  July (4)
    • ►  June (7)
    • ►  May (4)
    • ►  April (4)
    • ►  March (1)
    • ►  February (2)
    • ►  January (10)
  • ►  2016 (45)
    • ►  December (1)
    • ►  November (5)
    • ►  October (2)
    • ►  September (7)
    • ►  August (3)
    • ►  July (3)
    • ►  June (1)
    • ►  May (3)
    • ►  April (5)
    • ►  March (3)
    • ►  February (3)
    • ►  January (9)
  • ►  2015 (88)
    • ►  December (5)
    • ►  November (2)
    • ►  October (6)
    • ►  September (6)
    • ►  August (3)
    • ►  July (6)
    • ►  June (7)
    • ►  May (12)
    • ►  April (6)
    • ►  March (11)
    • ►  February (10)
    • ►  January (14)
  • ►  2014 (159)
    • ►  December (16)
    • ►  November (13)
    • ►  October (42)
    • ►  September (12)
    • ►  August (19)
    • ►  July (3)
    • ►  June (17)
    • ►  May (10)
    • ►  April (12)
    • ►  March (7)
    • ►  February (4)
    • ►  January (4)
  • ►  2013 (192)
    • ►  December (7)
    • ►  November (2)
    • ►  October (3)
    • ►  September (10)
    • ►  August (25)
    • ►  July (17)
    • ►  June (22)
    • ►  May (22)
    • ►  April (24)
    • ►  March (17)
    • ►  February (22)
    • ►  January (21)
  • ►  2012 (204)
    • ►  December (21)
    • ►  November (35)
    • ►  October (47)
    • ►  September (27)
    • ►  August (6)
    • ►  July (21)
    • ►  June (16)
    • ►  May (7)
    • ►  April (9)
    • ►  March (4)
    • ►  February (3)
    • ►  January (8)
  • ▼  2011 (70)
    • ►  December (8)
    • ►  November (5)
    • ►  October (3)
    • ►  September (2)
    • ►  August (7)
    • ▼  July (3)
      • Best of Big FM - Cross-Talk Program
      • List vs ObservableCollection vs INotifyPropertyCha...
      • How to Create a Circular Loader using XAML?
    • ►  June (30)
    • ►  May (3)
    • ►  April (3)
    • ►  March (1)
    • ►  February (3)
    • ►  January (2)
  • ►  2010 (30)
    • ►  December (1)
    • ►  September (4)
    • ►  August (1)
    • ►  July (1)
    • ►  June (1)
    • ►  May (4)
    • ►  April (6)
    • ►  March (5)
    • ►  February (2)
    • ►  January (5)
  • ►  2009 (40)
    • ►  December (4)
    • ►  November (6)
    • ►  October (4)
    • ►  September (5)
    • ►  August (4)
    • ►  July (3)
    • ►  June (4)
    • ►  May (8)
    • ►  March (1)
    • ►  February (1)
  • ►  2008 (6)
    • ►  December (1)
    • ►  September (1)
    • ►  May (1)
    • ►  April (2)
    • ►  February (1)
  • ►  2007 (7)
    • ►  December (1)
    • ►  November (2)
    • ►  October (1)
    • ►  July (1)
    • ►  May (2)

Recent Posts

Followers

Report Abuse

FOLLOW ME @INSTAGRAM

Popular Posts

  • Stay Wow - Health Tips from Sapna Vyas Patel
    Referred URL https://www.facebook.com/sapnavyaspatel WATCH WEIGHT LOSS VIDEO: http://www.youtube.com/ watch?v=S_dlkjwVItA ...
  • Calorie Count chart For food and drinks
    Referred URL http://deepthidigvijay.blogspot.co.uk/p/health-diet-calorie-charts.html http://www.nidokidos.org/threads/37834-Food-Calorie-...
  • SharePoint 2010 Interview Questions and Answers
    Referred URL http://www.enjoysharepoint.com/Articles/Details/sharepoint-2010-interview-questions-and-answers-148.aspx 1.What is SharePoint...
  • 150 Best Windows Applications Of Year 2010
    Referred URL : http://www.addictivetips.com/windows-tips/150-best-windows-applications-of-year-2010-editors-pick/?utm_source=feedburner...
  • Web Developer Checklist by Mads Kristensen
    Referred Link -  http://webdevchecklist.com/ Web Developer Checklist Get the extension  Chrome  |  Firefox  |  Edge Menu Bes...
  • WCF and REST Interview Questions
    What is WPF? The Windows Presentation Foundation (WPF) is a next generation graphics platform that is part of...
  • Remove double tap to unlock feature on samsung galaxy core2
    Double tap to unlock is a feature of Talkback, so if your will disable Talkback, double tap to unlock will also be disabled. To disable doub...
  • Difference Between Content Editor and Script Editor webpart
    Referred Link -  http://jeffas.com/content-editor-vs-script-editor-webpart/ Content editor web part is a place holder for creating rich ...
  • SPFolder related operations in SharePoint
      1) Get SPListItem(s) of a particular SPFolder SPList splist; SPFolder spfolder; //Get the required folder instance SPQuery spquery = new ...

Comments

Created with by BeautyTemplates | Distributed by blogger templates