Daniel Isaacs Diaz Technology Blog

In this post I am going to answer some questions concerning my previous WPF post on:ListViewItem in a ListView

In my previous post, I had a WPF ListView that displayed two items, and each item occupied one row and one column.

But what if I would like to add an item to a WPF ListView but this time that one row contains more than one column. In this way we can answer questions such as: “How to add a ListView item in two columns using c# code”. If this is the question you are looking to answer, you have found just what you were looking for. I will show you how to do the following in Visual Studio 2008:

Window1.xaml

<Window x:Class=”ListViewProj.Window1″
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Title=”Window1″ Height=”220″ Width=”285″>
<Grid>
<ListView Margin=”11,16,35,17″ Name=”listView1″ />
</Grid>
</Window>

Window1.xaml.cs

public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
// The constructor accepts a first name, last name, major
Student student = new Student("Daniel","Isaacs","Computer Science");
ObservableCollection <studentObj> = new ObservableCollection();
// add a student
studentObj.Add(student);
// displays data items in columns for a ListView
GridView gView = new GridView();
// set the first gridview column
GridViewColumn firstCol = new GridViewColumn();
// set the data item to bind to for this column
firstCol.DisplayMemberBinding = new Binding("FirstName");
firstCol.Header = "First Name";
// set the second gridview column
GridViewColumn secondCol = new GridViewColumn();
secondCol.DisplayMemberBinding = new Binding("LastName");
secondCol.Header = "Last Name";
// set the third gridview column
GridViewColumn thirdCol = new GridViewColumn();
thirdCol.DisplayMemberBinding = new Binding("Major");
thirdCol.Header = "Major";
// add gridview columns
gView.Columns.Add(firstCol);
gView.Columns.Add(secondCol);
gView.Columns.Add(thirdCol);
// set the collection that is going to be used to generate content
listView1.ItemsSource = studentObj;
// sets how data is organized and styled
listView1.View = gView;
}
}


In the XAML code I only added a ListView. In the code behind I created an instance of the Student class (a class I created for this example). Then I add the instance of the student class to the collection that is going to be used to generate content.

I also created an instance of the GridView class, because the gridview is how we are going to organized the data. After this I create three instances of the GridViewColumn class(you can created as many instances of the GridViewColumn as you need). Each GridViewColumn needs a binding (DisplayMemberBinding) which sets the data item to bind to for this column.

Don’t forget to add the GridViewColumn to the GridView. At the end assign to the listView ItemSource Property the collection with the content, and assign to the listview View Property the Gridview instance.

Here’s a copy of my files.

If you have any comments or questions just let me know.

A friend of mine asked me How to add an item to a ListView using a WPF ListViewItem.

First of all, you can add items to a <ListView> either in the XAML, or in the .cs file of your project using the following line:
listView1.Items.Add("Daniel");

But if for some reason you want to use a ListViewItem you can do something like this:
Window1.xaml

<Window x:Class=”WPFListView.Window1″
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Title=”Window1″ Height=”300″ Width=”300″>
<Grid>
<ListView Margin=”65,85,107,86″ Name=”listView1″ />
</Grid>
</Window>

Window1.xaml.cs

public Window1()
{
InitializeComponent();
ListViewItem item;
List < string > items = new List< string >();
items.Add(”Hello”);
items.Add(”Daniel”);
foreach (string names in items)
{
item = new ListViewItem();
item.Content = names;
listView1.Items.Add(item);
}
}


The important part of this code, which is what my friend couldn’t find is that to add a text to a ListViewItem you use the Content property.

I have been using Orcas Express Edition to start playing around with the WPF (Windows Presentation Foundation ) windows.

I was trying to build a menu which has several report options, and when the user clicks on a menu you can see the report in the datagrid. In this post I’m only going to write about building the menu.

Here’s an example of a menu in WPF:

<Menu Width=”100″ Margin=”0, 0, 0, 0″ HorizontalAlignment=”left” Background=”White”>
<MenuItem Header=”_File”>
<MenuItem Header=”_New” Click=”DisplayNew”/>
<MenuItem Header=”_Open” />
</MenuItem></Menu>

When you create a WPF Window, it creates two files, e.g: Window.xaml,Window.xaml.cs.The XML this example uses is called XAML ( which is inside my Window.xaml ), which is used in the .NET Framework 3.0 technologies, specially in WPF. The interesting thing about this WPF concept is that if you are interested for a control to have certain event you need to specify it in the XAML. As you can see when the user clicks “New” in my menu, I’m going to call a method called “DisplayNew” which is inside my Window.xaml.cs.

The Window.xaml.cs will look like this:

private void DisplayNew(object sender, System.Windows.RoutedEventArgs e)
{
// In here you can decide what to do when the menu item is clicked
}


In the Window.xaml.cs you actually need to type this method manually.  It will not be created for you by Orcas. So this is how the example should look:

The purpose of this post is to show you how to display a WPF Window with a datagrid that contains data from a SQL Server Database.

The version of Orcas I’m using doesn’t have a Datagrid between their tools. Consequently, I’m using Xceed’s Datagrid which according to them is “the world’s first data grid control for Microsoft’s Windows Presentation Foundation”. Very interesting!

I installed this datagrid, and at first I thought it would appear under my tools in Orcas. I thought this because i’m used to drag and drop my controls to the form. However, I later found out that to be able to display the grid in my WPF window, I needed to add the grid in the XAML file. This is an example:

Window1.xaml

<Window x:Class=”WPFTrading.Window1″
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:xcdg=”http://schemas.xceed.com/wpf/xaml/datagrid”
Title=”Window1″ Height=”250″ Width=”800″ WindowStyle=”ThreeDBorderWindow”>
<Grid Name=”dataGrid1″>
<xcdg:DataGridControl x:Name=”ordersGrid”
ItemsSource=”{Binding Source={x:Static Application.Current},Path=Orders}”>
</xcdg:DataGridControl>
</Grid>
</Window>

Now I’m going to explain the parts in bold:

xmlns:xcdg=”http://schemas.xceed.com/wpf/xaml/datagrid”

This is xceed’s namespace. If you don’t have this line you will get a compiler error saying “”xcdg’ is an undeclared namespace.”

<xcdg:DataGridControl x:Name=”ordersGrid”
ItemsSource=”{Binding Source={x:Static Application.Current},Path=Orders}”>
</xcdg:DataGridControl>

This is xceed’s Datagrid. The name of my Datagrid is ordersGrid. In ItemsSource I’m basically binding the grid to the Orders table.

This is all the XAML you need for the Datagrid to appear in your window. However, at this point your datagrid has no data at all.

When you create a WPF Window project an App.xaml and App.xaml.cs files are created. This files are important because in the App.xaml you can do several things. One of them is to set in what window the application is going to start. Here’s an example:

App.xaml

<Application x:Class=”WPFTrading.App”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:xcdg=”http://schemas.xceed.com/wpf/xaml/datagrid”
StartupUri=”Window1.xaml”>

</Application>

Now I’m going to explain the parts in bold:

StartupUri=”Window1.xaml”

As you can notice when my project starts, it loads Window1.xaml

At this point, I’m going to write about how to put some data in the datagrid. I did this in my App.xaml.cs. Here’s the pseudocode of it:

App.xaml.cs

private DataTable mOrders;
public DataTable Orders
{
get { return mOrders; }
}
protected override void OnStartup(StartupEventArgs e)
{
Xceed.Wpf.DataGrid.Licenser.LicenseKey = "Your key goes here";
// create a connection string
string connectionString = "Your connection string goes here";
using (SqlConnection connection = new SqlConnection(connectionString))
{
// open a connection
connection.Open();
// create a sqlcommand
SqlCommand command = new SqlCommand();
command.CommandText = "Your SELECT statement goes here";
// create a dataset
DataSet ds = new DataSet();
// create a sqldataAdapter
SqlDataAdapter adapter = new SqlDataAdapter(command.CommandText, connection);
// fill the adapter
adapter.Fill(ds);
// fill the orders table
mOrders = ds.Tables[0];
// close connection
connection.Close();
// raise the Startup event.
base.OnStartup(e);
}
}

Some observations:
- You need a key for your datagrid. If not you will get a LicenseException.
- Make sure you paste the code in notepad and not microsoft word, since you might have problems with the quotes. Make sure the quotes are correct.
- I didn’t post my connection string because it varies.

At the end I ended up with a datagrid like this:

Pretty cool!!!