Did you know that there's no grid-like control in WPF 1.0?  This post will show you how to get around that limitation.  But first, may I say that the recently-released Orcas September CTP bits offers a great improvement at design-time when writing WPF applications.  Instead of those three clunky tabs for .xaml, [Designer], and .xaml.cs that we had back in the June CTP, you now get the first glimpse of Microsoft's new cool “Split” view, which will become a part of ASP.NET in the Orcas timeframe!

Very cool stuff.  Modifying the designer surface updates the underlying XAML immediately.  But modifying the XAML requires that you click the design surface before the update takes place, the same as how Dreamweaver's split view works.  Still very useful.  The up-down thing between the two tabs swaps their place, and the horizontal vs vertical split things are found on the right.  You can of course make either surface larger or smaller by dragging the “thumb” in the middle.

So anyway, on with the topic at hand: how to use “Crossbow” with the September CTP bits.  Crossbow lets you use old-school WinForms controls in WPF with the WindowsFormsHost control, and also the other way around, using WPF controls in a WinForms app using the ElementHost control.  As mentioned in the picture above, you have to add references to these two assemblies:

System.Windows.Forms (since that refers to the controls we're building a wrapper for.)
WindowsFormsIntegration (which holds the WindowsFormsHost control we'll use.)

With those two references in place, you can now use the special WPF control called WindowsFormsHost (found in the System.Windows.Forms.Integration namespace) as a kind of “placeholder” for a single WinForms control.  This opens up an area where the WinForms control gets rendered as part of WPF.  Why would you want to do such a thing?  If you have invested in creating a WinForms app then you can incrementally change over to WPF.  Plus some WinForms controls are not yet found over in WPF.  For instance, there is no control in WPF that acts like the very popular DataGrid or DataGridView.  So this example shows how you can add one to a WPF app using 100% declarative code.

If you've used Crossbow in the past, This build changes a little the way you implement the WindowsFormsHost.  Now instead of the <Mapping> tags you previously had to put at the top of the XAML, that's all handled as special namespce syntax in the <Window> or <Canvas> root element.  As shown in the sample snippet of code in the image above, you have to add these two namespace declaration attributes to that element:

xmlns:wfi="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"

And then you can make use of the new namespace and add in a WindowsFormsHost, and a single WinForms control inside, like this:

<wfi:WindowsFormsHost Height="100" Width="200">
   <wf:DataGrid x:Name="myDG"><wf:DataGrid>
<wfi:WindowsFormsHost>

Intellisense won't do anything for you with this build, but at least the declarative code will work as expected.  And when you click on the designer surface, you should see the sample DataGrid jump to life, filling up that 200x100 pixel area.  In your code-beside you can then programmatically reference the WinForms control just like you normally would, for instance after InitializeComponent() in the constructor you could use these few lines to show some simple content in the DataGrid:

DataTable dt = new DataTable();
dt.Columns.Add("Col1", typeof(string));
dt.Columns.Add("Col2", typeof(string));
dt.Rows.Add("Hello","World");
myDG.DataSource = dt;

And then the end result would look like this:

The checkbox is a WPF control, and of course the DataGrid is a WinForms control.  In this sort of way it's very easy to keep the rich functionality of old WinForms controls, and add in new slick animation and other WPF features in your apps.  You can wire up events and reference all the objects on the page with the same code you normally would, so altogether it “just works”.

For more information about Crossbow, check out Mike Hender's blog.


Feedback

# re: How to use a DataGrid or DataGridView in a WPF app

Thanks for the helpful info. However, you have a fixed size for the grid (100x200 as defined for the WindowsFormsHost.) It seems like we would want to take advantage of the layout containers in xaml and resize the grid automatically as the window changes size. I thought perhaps adding an event handler for the SizeChanged event for the WindowsFormsHost and setting the grid size in the handler would work, but the Width and Height of the WindowsFormsHost always seem to be "NaN". 9/24/2006 3:19 PM | Kev

# re: How to use a DataGrid or DataGridView in a WPF app

Here's one way to do it. Override the OnRenderSizeChange for the window and resize the WindowsFormHost element containing the DataGrid.


Add a Name="wfhGrid" to the WindowsFormsHost
============================================
<wfi:WindowsFormsHost Name="wfhGrid" Height="100" Width="200">
<wf:DataGrid x:Name="myDG">
</wf:DataGrid>
</wfi:WindowsFormsHost>

Override OnRenderSizeChange in Window1.xaml.cs
==============================================

protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
{
base.OnRenderSizeChanged(sizeInfo);

double width = this.ActualWidth
- 2 * SystemParameters.ResizeFrameVerticalBorderWidth;

double height = this.ActualHeight
- 2 * SystemParameters.ResizeFrameHorizontalBorderHeight
- SystemParameters.CaptionHeight;

wfhGrid.Height = height;
wfhGrid.Width = width;
}

1/2/2007 5:29 AM | Rich

# re: How to use a DataGrid or DataGridView in a WPF app

Another version of OnRenderSizeChanged

protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
{
base.OnRenderSizeChanged(sizeInfo);

wfhGrid.Width = sizeInfo.NewSize.Width
- 2 * SystemParameters.ResizeFrameVerticalBorderWidth;

wfhGrid.Height = sizeInfo.NewSize.Height
- 2 * SystemParameters.ResizeFrameHorizontalBorderHeight
- SystemParameters.CaptionHeight;
}

1/2/2007 5:37 AM | Rich

# re: How to use a DataGrid or DataGridView in a WPF app

Good Work 3/1/2007 6:43 PM | Sajit

# re: How to use a DataGrid or DataGridView in a WPF app

Thank you very much for your Nice and Great Work that makes the traditional .NET Developer's life Happy so that they need not be hesitant to migrate to WPF.I welcome more of your similar RESEARCH content from You... 6/21/2007 1:16 PM | Siva

# re: How to use a DataGrid or DataGridView in a WPF app

Great . 9/3/2007 8:32 PM | ms44

# re: How to use a DataGrid or DataGridView in a WPF app

How do you wire events such as row click event etc? 10/24/2007 10:46 AM | Chandra

# re: How to use a DataGrid or DataGridView in a WPF app

I am using datagridview in WPF applications. Everthing is working fine. I would like to change the look og datagridview, is that possible if yes then how is that possible.

Regards n cheers
khalid 10/30/2007 5:54 PM | khalid

# re: How to use a DataGrid or DataGridView in a WPF app

You wrote :
"And then you can make use of the new namespace and add in a WindowsFormsHost, and a single WinForms control inside, like this:

<wfi:WindowsFormsHost Height="100" Width="200">
<wf:DataGrid x:Name="myDG"><wf:DataGrid>
<wfi:WindowsFormsHost>"

You forgot "/" :
<wfi:WindowsFormsHost Height="100" Width="200">
<wf:DataGrid x:Name="myDG"></wf:DataGrid>
</wfi:WindowsFormsHost>"

Small point... Thx for all! 11/4/2007 7:32 AM | xelag

# re: How to use a DataGrid or DataGridView in a WPF app

Since there's still a few people that don't know, I think it would be pertinent to mention here that there IS a true WPF datagrid available, and it is licensed for free including updates. You don't have to revert back to the Windows Forms datagrid... This one provides all the WPF goodness.

http://xceed.com/Grid_WPF_Intro.html

(Xceed DataGrid for WPF) 11/30/2007 3:15 AM | Odi

# How to use FlexGrid in WPF?

please let me know as soon as possible.
thanx in advance 12/7/2007 11:56 PM | Abhishek

# re: How to use a DataGrid or DataGridView in a WPF app

I tried the free WPF datagrid from Xceed and found it sluggish in performance (using a roughly 20-column, 2500-row datatable), as compared to the Windows Form datagrid wrapped in a WindowsFormsHost as described here.

The free Xceed datagrid is much more feature-rich, though. Too bad it's not as performant. 1/4/2008 8:31 AM | taLuis

# re: How to use a DataGrid or DataGridView in a WPF app

In reply to
How do you wire events such as row click event etc?

Check out
http://blogs.msdn.com/ivo_manolov/archive/2007/07/26/wpf-win32-interop-part-1-hosting-winforms-controls-in-wpf-windows.aspx 3/1/2008 10:06 AM | mr a

# re: How to use a DataGrid or DataGridView in a WPF app

Hi
The data grid that u have mentioned here works good for a WPF windows application but when i try doing the same for a Browser based application it starts to throw some Security Exception........
Any pointers on this ?? 3/3/2008 7:21 PM | Anuj

# re: How to use a DataGrid or DataGridView in a WPF app

Great article, does the DataGrid support styling? can u post some sample code for styling header, row and alternative row? 5/21/2008 10:38 PM | mos

# re: How to use a DataGrid or DataGridView in a WPF app

Hi,
I am getting following error using above code

The tag 'WindowsFormsHost' does not exist in XML namespace 'clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration'. Line 27 Position 6.

Please provide solution for same

regards
Suhas 6/17/2008 5:44 PM | Suhas

# re: How to use a DataGrid or DataGridView in a WPF app

Good Article 1/19/2009 5:51 PM | Aswathy

# re: How to use a DataGrid or DataGridView in a WPF app

Very good work, can u post the code in VB please?
Thanks 1/27/2009 12:35 AM | Sergio(Spain)

# re: How to use a DataGrid or DataGridView in a WPF app

i think this article was a great. easy to follow. 3/14/2009 2:34 AM | dll

# re: How to use a DataGrid or DataGridView in a WPF app

hello its very nice article .............
I am diiging last two days.......
Thanks dear............ 4/5/2009 5:51 PM | Ajay

# re: How to use a DataGrid or DataGridView in a WPF app

good,thanks a lot! 4/13/2009 1:42 PM | masterfy

# re: How to use a DataGrid or DataGridView in a WPF app

this is datagrid only.. Is there any reference for data grid view in WPF.

4/20/2009 8:41 PM | dinesh

# re: How to use a DataGrid or DataGridView in a WPF app

I think to resize the grid when the window resize following little code should be written int he xaml file.

<wfi:WindowsFormsHost VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<wf:DataGrid x:Name="codeSearchResultGrid" DoubleClick="codeSearchResultGrid_DoubleClick">
</wf:DataGrid>
</wfi:WindowsFormsHost>

setting horizontal and verticlealignment values as stretch should do the trick. With this grid object will resize in its container when window is resized.

Hope, I'm clear with my explanation.
5/13/2009 9:44 PM | Krunal

# re: How to use a DataGrid or DataGridView in a WPF app

Thanks for the great solution. I was searching this for a while so I am really happy about it now. Writing WPF applications is a hard but interesting hobby though. Such posts like yours greatly helps to understand some difficult things. Thanks one more time and I will be looking forward to another useful posts in your blog. 10/1/2009 10:03 AM | application development services

# re: How to use a DataGrid or DataGridView in a WPF app

Thanks. Its Working fine.
Trying datagrid use wpftookit was not easy at all. 11/4/2009 6:45 AM | Anand

# re: How to use a DataGrid or DataGridView in a WPF app

The tests are fine, Multi cores only come into effect when theres multiple threads.... 11/6/2009 11:14 PM | DDos Protection

# re: How to use a DataGrid or DataGridView in a WPF app

Thanks your article was really helpful 11/9/2009 9:50 PM | Reena

# re: How to use a DataGrid or DataGridView in a WPF app

Thanks alot for this helpful article.
I was really curious that how can i enjoy using DataGridView and DataGrid in my WPF app.

Thanks. 12/15/2009 1:49 AM | Khawar Rasheed

# re: How to use a DataGrid or DataGridView in a WPF app

Thanks a lot for this very precise and concise tip. I was having a tough time getting my datagridview to work in WPF and this helped me solve it!

Hope to see more such tips and tricks from u. 3/28/2010 2:12 AM | Arvind

# re: How to use a DataGrid or DataGridView in a WPF app

I wish I had your expertise! 5/29/2010 6:40 AM | Attorneys Personal Injury

# re: How to use a DataGrid or DataGridView in a WPF app

This looks very interesting. Thanks for the info. 5/29/2010 6:42 AM | Chair Lift For Stairs

Post a comment





 

News


Welcome to my blog.
Here's what we've got on the menu today:

Tag Cloud


Article Categories

Archives

Post Categories

Image Galleries

Syndication: