Silverlight / WPF - How to bind data from web service to datagrid of wpf

WINDOWS.XAML

<Window x:Class="IssueAddinOutlook.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:dg="http://schemas.microsoft.com/wpf/2008/toolkit"
  Title="Issue List" Height="424" Width="696">
 
<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="102*" />
    <ColumnDefinition Width="590*" />
  </Grid.ColumnDefinitions>
  <Label Height="41" Margin="172,0,265,0" Name="label1" VerticalAlignment="Top" FontSize="22" Grid.Column="1">Issue List</Label>
 
  <dg:DataGrid x:Name="dataGrid" AutoGenerateColumns="True"
     AlternationCount="2"
 
     HeadersVisibility="All"
     HorizontalGridLinesBrush="#DDDDDD"
     VerticalGridLinesBrush="#DDDDDD" Grid.ColumnSpan="2" Margin="0,0,28,26">
 
    <dg:DataGrid.Columns>
      <dg:DataGridTextColumn Header="ID Issue" Binding="{Binding Path=Id}" />
      <dg:DataGridTextColumn Header="Order Id" Binding="{Binding Path=OrderId}" />
      <dg:DataGridTextColumn Header="Is Done" Binding="{Binding Path=IsDone}" />
      <dg:DataGridTextColumn Header="Final Comment" Binding="{Binding Path=FinalComment}" />
      <dg:DataGridTextColumn Header="Actual Hours" Binding="{Binding Path=ActualHours}" />
      <dg:DataGridTextColumn Header="Group Id" Binding="{Binding Path=GroupId}" />
    </dg:DataGrid.Columns>
  </dg:DataGrid>
</Grid>
<Window.Resources>
  <Style x:Key="columnHeaderStyle" TargetType="{x:Type dg:DataGridColumnHeader}">
    <Setter Property="Background">
      <Setter.Value>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
          <LinearGradientBrush.GradientStops>
            <GradientStop Color="Navy" Offset="0" />
            <GradientStop Color="LightBlue" Offset="1" />
          </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
      </Setter.Value>
    </Setter>
    <Setter Property="Foreground" Value="White" />
  </Style>
  <Style x:Key="rowStyle" TargetType="dg:DataGridRow">
    <Setter Property="FontFamily" Value="Verdana" />
    <Setter Property="FontSize" Value="10" />
    <Style.Triggers>
      <Trigger Property="AlternationIndex" Value="0">
        <Setter Property="Background" Value="White" />
      </Trigger>
      <Trigger Property="AlternationIndex" Value="1">
        <Setter Property="Background" Value="#DDDDDD" />
      </Trigger>
      <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background" Value="#BBBBBB" />
      </Trigger>
    </Style.Triggers>
  </Style>
</Window.Resources>

And the WINDOWS.XAML.CS

Issuereference.Tasks issueRef = new Issuereference.Tasks();
Issuereference.TASK[] tasksList = issueRef.GetTasks(39);
dataGrid.ItemsSource = tasksList.ToList();

Follow these steps=

Step 1: Click Start All Program à Microsoft Visual Studio 2010 à Microsoft Visual Studio 2010

Step 2: Click “New Project”

Step 3: Under “Visual C#” à Windows à WPF Application

Give application name for your new WPF applications, mention the location and solution name.

Start Designing and Programming using WPF

Designing windows or web application is quite easy and interesting also. Let’s start designing our first application using WPF.

WPF will generate XAML tags similar to HTML. Here I have used the below mentioned tools for design:

• fName_lbl -> “First Name” Label
• fName_Txt -> Textbox
• lName_lbl -> “Last Name” Label
• lName_Txt -> Textbox
• DOB_lbl -> “Date of Birth” Label
• DOB_Txt -> Date Picker
• City_lbl -> “City” Label
• City_Txt -> Combo Box
• New_Btn -> “New” Button
• Add_Btn -> “Add” Button
• Del_Btn -> “Delete” Button
• Update_Btn -> “Update” Button

Datagrid1

Databinding to “Datagrid1” in WPF is simple, in this example, I have used ADO.NET for binding.

<datagrid width="481" height="199" name="dataGrid1" 
selectedcellschanged="dataGrid1_SelectedCellsChanged" 
canuserresizerows="False" loaded="dataGrid1_Loaded" 
itemssource="{Binding Path=MyDataBinding}" verticalalignment="Top" 
margin="14,65,0,0" horizontalalignment="Left" grid.row="4" autogeneratecolumns="False">
            <datagrid.columns>
                <datagridtextcolumn width="120" isreadonly="True" 
                header="First Name" binding="{Binding Path=fName}">
                <datagridtextcolumn width="110" isreadonly="True" 
                header="Last Name" binding="{Binding Path=lName}">
                <datagridtextcolumn width="150" isreadonly="True" 
                header="Date Of Birth" binding="{Binding Path=DOB}">
                <datagridtextcolumn width="90" isreadonly="True" 
                header="City" binding="{Binding Path=City}">
</datagridtextcolumn></datagridtextcolumn><
/datagridtextcolumn></datagridtextcolumn></datagrid.columns>           
</datagrid>

We can bind the data to datagrid by assigning it to datagrid’s “ItemsSource” and mention the data path which will connect to database to get the data. This is an add on feature in WPF.

App.config is a configuration file which will have the setting and other stuff for an application. Here, I have used this to store the database connectionstring and it is as follows:

<configuration>
     <connectionstrings>
         <add name="ConnectionString1" 
         connectionstring="Data Source=(Database file location goes here) 
         \DatabindusingWPF.sdf; Password=test@123; Persist Security Info=False;">
        </add></connectionstrings>
</configuration>

Here, I have used SQL Server Compact 3.5 sp1 as my data source so we have to give the exact path of the database file where it is stored. (Note: You need to give exact path of the database file to make this code work).

Whenever we add, delete, update datagrid has to be changed accordingly, so I created a public method named “BindGrid()”.

// Establishing Connection String from Configuration File
string _ConnectionString = ConfigurationManager.ConnectionStrings
			["ConnectionString1"].ConnectionString;
public void BindGrid()
 {            
    SqlCeConnection _Conn = new SqlCeConnection(_ConnectionString);
    // Open the Database Connection
    _Conn.Open();
    SqlCeDataAdapter _Adapter = new SqlCeDataAdapter("Select * from Details", _Conn);
    DataSet _Bind = new DataSet();
    _Adapter.Fill(_Bind, "MyDataBinding");                   
    dataGrid1.DataContext = _Bind;
    // Close the Database Connection
    _Conn.Close();
   }

In the above, I have shown a very simple way to get the SQL connection string which will connect to database and used dataset to bind the data to datagrid. The below code will add new record using the values from the textbox.

Follow this link-

http://www.codeproject.com/KB/cs/DatagridonWPF.aspx


Hope this will help you.

You could add the reference to your web service in your WPF application through Visual Studio at first. (You might follow the steps of the following link: Binding to Web Services )

Then, just call your method to retrive the DataTable from the returned dataset, convert the DataTable to DataView through the AsDataView method, and set the dataview to your datagrid's ItemsSource property.

For example:

myDataGrid.ItemsSource = myDataSet.Tables[ myIndex ].AsDataView();