Tech Gigs

It is fun experience trying to customize the look and behaviour of the standard listview included in WPF (see the figure below).

In this article, we will learn how to create a Customize ListView as shown in the image above. More Important is to understand the XAML file. Read to know more about it step-by-step and after reading this article, you will be able to create and use a customize listview like this. Source code is also available for download at the end of the page.

Setup the Project

Setting up the project is all done in same way as mentioned in previous blog on Circular Loader.

Creating UI

Creating a UI for the listview must be quite straight forward to most of the developers. So would jump directly into code:

<ListView.View>

GridView>

ListView.View>

ListView>

With the above code following will be the output(shown in figure below).

This was not the output intended; so we need to customize or change some part of the code in XAML file. How do we achieve the output? For this you should be clear with the concept of DataTemplate.

What is DataTemplate and Where it is Used?

DataTemplate is used whenever you want to modify the default template of any WPF control in our case it’s a WPF ListView control. WPF ListView can contain 'N' number of columns and each column can have defined their own datatemplate or in simple terms the representation format (Ultimately it’s all about Presentation!!!).

How to use DataTemplate

DataTemplate can be defined in the resource section of window if the datatemplate isto be used over multiple listview or it can be defined as a part of listview column. To keep code simpler and for easily readable I have made all three datatemplates as a part of window resources ( for our customize ListView).

Structure of DataTemplate

How does the datatemplate looks like? Below is the sample code:

Hyperlink>

TextBlock>

DataTemplate>

DataTemplate if defined as part of window resources will require unique key to identify the resource. Note- Key should be unique within the same window only, can be same across windows. Datatemplate can contain multiple controls but should follow the rules of WPF controls.

DataTemplate Xaml Code

<Window.Resources>

Hyperlink>

TextBlock>

DataTemplate>

StackPanel>

DataTemplate>

StackPanel>

DataTemplate>

Window.Resources>

Here is the code for customising the listview based on the datatemplates we created above for each of the column-

<ListView.View>

GridView>

ListView.View>

ListView>

See it in Action

Run the application to get the desired output:

Download Source Code

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

Customize WPF ListView ( Part1)

Most of the time we need to show some "Loading..." text to the user to make him understand that something is being getting Loaded or to restrict the user from clicking more several times thinking that application is not getting responded. Showing some "Loading..." type of text was used long back before .NET framework 3.0. Now with improved Framework and better configuration users would be more likely to see some sort of animations to quickly identify what it is intended to do. To cut long story short we need to build some smart Loader for the user in various XAML Applications - WPF, Silverlight & even for WP7.

In this article, we will learn how to create a circular Loader as shown in the image above. 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.

Follow below mentioned steps to create your own Circular Loader -

Setup the Project

First we need to create a WPF project. Here we will create a WPF 4 application project.

This will create a new solution project. Once done with this step, it's time to create the UI of the loader control.

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 MainWindow xaml file and replace the original Grid control with a ViewBox control. You may ask one question here: Why should I use a ViewBox? 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 Black. We will use proper binding to do this, as shown below:

<Ellipse Fill="Black"

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:

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

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

<Window x:Class="CircularLoader.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="350" Width="325">

Canvas>

Viewbox>

Window>

Run the application to get the below shown output. Note the output we wanted is still not completed but a step ahead to achieve what we wanted.

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. Below is sample code for part of animation of ellipse.