How to format date,currency and phoneno in ListView in WPF

No.of Views: 6256
Bookmarked: 0 times
Downloads:  
Votes: 1
By  RRaveen   On  15 Feb 2010 22:02:47
Tag : WCF , Data Binding
Skill Level: Intermediate
How to format date,currency and phoneno in ListView in WPF
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 Introduction

Now the days Windows Presentation Foundation most popular, specifically List view is most popular and using all WPF developer present data in WPF as like Windows Form Grid View.

In this article I'm going to explorer currency, date, and phone formatting with list view in WPF.


Implementation

To this we need create new WPF application using Visual studio 2008 , Open Visual studio 2008 and go to the file menu and then select new Project , it's bring new window with  collection project template, from collection select the WPF application under the Visual C# mode with Windows as like following figure showing.

Image loading..


Here just specify the project name as "WPFListViewFormat" and then Click ok button to start make spirit. When you are click OK button it's come up look like following figure.

Image loading..

It's look like ASP.Net web page design and source look and feel. But this is design and XAML source spilt window.

Here first we need write XAML code to bring some cool design to window with List view then we need write code to bind. To get more detail about bind data to list view dynamically in WPF read this article. Let's compose few XAML Lines code to bring list view with columns.


XAML

{codecitation class="brush: xml; gutter: true;" width="650px"}

<Window x:Class="WPFListViewFormat.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="450" Loaded="Window_Loaded">
<Grid>
<ListView Name="lstvieMain" ItemsSource="{Binding}">
<ListView.View>
<GridView>
<GridViewColumn Header="Employee Code" Width="80" DisplayMemberBinding="{Binding Path=EmpID}" />
<GridViewColumn Header="First Name" Width="80" DisplayMemberBinding="{Binding Path=FName}" />
<GridViewColumn Header="Last Name" Width="80" DisplayMemberBinding="{Binding Path=LName}"/>

<GridViewColumn Header="Date of Birth" Width="80"  >
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=DateOfBirth, StringFormat={}{0:MM/dd/yyyy}}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Salary" Width="80">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Salary, StringFormat={}{0:C}}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Phone" Width="80">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Phone, StringFormat={}{0:(###) ###-####}}" />

</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</Grid>
</Window>


{/codecitation}

Above I have add list view  within the grid and then add six colums to display, first three columns are just dispolay empoloyeeid, first name and last name. In last three columns are display date of birth, Salary and Phone no, here we need format those three columns based on display format.


When are  apply the format in gridview column, we can't add the stringFormat propery there in .NET 3.5 Framework , for that we can  do with another way, that Data template and add Binding object to the Text property to  textblock control. It's look like followings.


{codecitation class="brush: xml; gutter: true;" width="650px"}


<GridViewColumn Header="Phone" Width="80">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Name="txtnumber" >
<TextBlock.Text >
<Binding Path="Phone"  StringFormat="{}{0:(###)###-####}" />
</TextBlock.Text>
</TextBlock>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>

{/codecitation}

In Above code snippets try to format phone no with data template using with Text block control inside the cell template.

Note: Here we can use the IValueConvertor also, in the next article I will explain about that. And if you are using .NET 3.5 with SP1 you could write above XAML lines are like following.


{codecitation class="brush: xml; gutter: true;" width="650px"}


<GridViewColumn Header="Date of Birth" Width="80"  >
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=DateOfBirth, StringFormat={}{0:MM/dd/yyyy}}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>

{/codecitation}

Now have to bind the data to List view. To this we need write code in code behind file. Here I have two methods one is get data from the data base and second is for bind to list view.

Retrieve data from the database and fill to data set using Adapter.

CSahrp

{codecitation class="brush: csharp; gutter: true;" width="650px"}


private DataSet GetEmployeesData()
{
try
{
DataSet employeeDS = null;
using (SqlConnection connection = new SqlConnection(@"Data Source=server;Initial Catalog=dbname;User ID=username;pwd=pwd;"))
{
using (SqlCommand cmd=connection.CreateCommand())
{
cmd.CommandText = "spEmployeeSelectAll";
cmd.CommandType = CommandType.StoredProcedure;
using (SqlDataAdapter adapter=new SqlDataAdapter(cmd))
{
employeeDS = new DataSet();
adapter.Fill(employeeDS);
}
}
}
return employeeDS;
}
catch (Exception ex)
{
throw ex;
}
}


{/codecitation}


Now we have data within the dataset, now bind to list view in window loaded event.


{codecitation class="brush: csharp; gutter: true;" width="650px"}

private void Window_Loaded(object sender, RoutedEventArgs e)
{
lstvieMain.ItemsSource = this.GetEmployeesData().Tables[0].DefaultView;
}


{/codecitation}


Now build application and look any compliation error, let it correct and the Press F5 to run the application. It's bring window with result look like followings.

Image Loading..


Conclusion

This article explains about format the phone number, date of birth and salary then display in list view. Here we have used to StringFormat property to implement formatting inside the list view.


Download Complete Solution


Thank you		 
Sign Up to vote for this article
 
About Author
 
RRaveen
Occupation-Software Engineer
Company-TGS
Member Type-Gold
Location-Singapore
Joined date-03 Jun 2009
Home Page-codegain.com
Blog Page-www.codegain.com
- B.Sc. degree in Computer Science. - 4+ years experience in Visual C#.net and VB.net - Obsessed in OOP style design and programming. - Designing and developing Network security tools. - Designing and developing a client/server application for sharing files among users in a way other than FTP protocol. - Designing and implementing GSM gateway applications and bulk messaging. - Windows Mobile and Symbian Programming - Having knowledge with ERP solutions
 
 
Other popularSectionarticles
Comments
There is no comments for this articles.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top