Saturday, August 9, 2008

ListView And XmlDataBinding in WPF

In this article, I am going to explain how to extract data from xml data and show it on a page using WPF ListView control.


I am using data.xml data file , and the binding properties in XAML code.

Here is the .XAML code

<Window x:Class="WpfApplication2.Window1"

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

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

Title="ListView Demo" Height="280" Width="500" Loaded="Window_Loaded">



<Grid Background="Black" Width="680">

<ListView Name="myListView" ScrollViewer.VerticalScrollBarVisibility="Auto"

ItemTemplate="{DynamicResource dateTimeFormatTemplate}" ItemsSource="{Binding Path=Table}"

ItemContainerStyle="{DynamicResource MyItemContainerStyle}">

<ListView.View>

<GridView ColumnHeaderContainerStyle="{DynamicResource MyColumnHeaderContainerStyle}">


<GridViewColumn Header="Code" Width="100">


<GridViewColumn.CellTemplate>


<DataTemplate>

<TextBlock TextWrapping="Wrap" Text="{Binding Path=Code}"></TextBlock>

<DataTemplate>

</GridViewColumn.CellTemplate>


<GridViewColumn>

<GridViewColumn Header="Employee Name" Width="200">

<GridViewColumn.CellTemplate>

<DataTemplate>

<TextBlock TextWrapping="Wrap" Text="{Binding Path=Name}"></TextBlock>

</DataTemplate>

<GridViewColumn.CellTemplate>


</GridViewColumn>


<GridViewColumn Header="Country Name" Width="200">

<GridViewColumn.CellTemplate>

<DataTemplate>

<TextBlock TextWrapping="Wrap" Text="{Binding Path=Country}"></TextBlock>

</DataTemplate>

</GridViewColumn.CellTemplate>


</GridViewColumn>


</GridView>

</ListView.View>


</ListView>


</Grid>


<Window.Resources>

<XmlDataProvider x:Key="xmlData" Source="D:\Amit\WPFApplication\CustomDateAndTimeFormatStringWindows\CustomDateAndTimeFormatStringWindows\dateTimeFormat.xml">


</XmlDataProvider>

<Style x:Key="MyItemContainerStyle" TargetType="{x:Type ListViewItem}">

<Setter Property="HorizontalContentAlignment" Value="Stretch" />

<Setter Property="VerticalContentAlignment" Value="Stretch" />

<Setter Property="Background">

<Setter.Value>

<LinearGradientBrush StartPoint="0,0.5" EndPoint="0.5,1">




<GradientStop Offset="1.0" Color="#F4F3F3">GradientStop>

</LinearGradientBrush>

</Setter.Value>

<Setter>

<Setter Property="Foreground" Value="#FF0E0101"></Setter>

<Setter Property="FontSize" Value="14"></Setter>

<Style>

<Style x:Key="MyColumnHeaderContainerStyle" TargetType="{x:Type GridViewColumnHeader}">

<Setter Property="FontSize" Value="15"></Setter>

<Setter Property="Foreground" Value="White"></Setter>

<Setter Property="Background">

<Setter.Value>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FF223B84" Offset="1"/>

<GradientStop Color="#FF57A0F4" Offset="0.5"/>

<GradientStop Color="#FF4B94EC" Offset="0.5"/>

</LinearGradientBrush>

Setter.Value>

<Setter>

<Style.Triggers>

<Trigger Property="IsMouseOver" Value="True">

<Setter Property="Foreground" Value="DarkBlue"></Setter>

</Trigger>

</Style.Triggers>

</Style>

</Window.Resources>

</Window>


Now create the data.xml file by selecting add new item option, by right clicking the mouse button on the solution explorer.

Here is the data.xml file


xml version="1.0" encoding="utf-8" ?>


<Customers>

<Customer>

<Code>1234Code>

<Name>Amit KumarName>

<Country>Sesame StreetCountry>

</Customer>

<Customer>

<Code>3234Code>

<Name>Anil SinghName>

<Country>United KingdomCountry>

</Customer>

<Customer>

<Code>3344Code>

<Name>Kimar AlokName>

<Country>SpainCountry>

Customer>

<Customer>

<Code>4321Code>

<Name>Harmeet SinghName>

<Country>MarsCountry>

</Customer>



<Customer>

<Code>4322Code>

<Name>Jhon s.Name>

<Country>MarsCountry>

</Customer>


<Customer>

<Code>4323Code>

<Name>SachinName>

<Country>U.K.Country>

</Customer>


<Customer>

<Code>4324Code>

<Name>RajeshName>

<Country>U.S.A.Country>

</Customer>


<Customer>

<Code>4325Code>

<Name>Govind VermaName>

<Country>MarsCountry>

</Customer>


<Customer>

<Code>4326Code>

<Name>Sachin SharmaName>

<Country>IndiaCountry>

</Customer>

</Customers>

Now add the following code in the windows1.xaml.cs file on the windows load event.

private void Window_Loaded(object sender, RoutedEventArgs e)

{

string file = @"D:\Amit\WPFApplication\ListViewItems\ListViewItems\data.xml";

DataSet ds = new DataSet("Table");

ds.ReadXml(file);

myListView.DataContext = ds.Tables[0].DefaultView;

}


Note:-Use the given Namespace

using System.Data;



No comments:

Is this blog solve your Problem?