Geeks With Blogs

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

Lorin Thwaits A geek says what?

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.

Posted on Saturday, September 9, 2006 10:27 AM WinForms , VS2005 , WPF | Back to top


Comments on this post: How to use a DataGrid or DataGridView in a WPF app

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
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".
Left by Kev on Sep 24, 2006 3:19 PM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
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;
}

Left by Rich on Jan 02, 2007 5:29 AM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
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;
}

Left by Rich on Jan 02, 2007 5:37 AM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
Good Work
Left by Sajit on Mar 01, 2007 6:43 PM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
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...
Left by Siva on Jun 21, 2007 1:16 PM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
Great .
Left by ms44 on Sep 03, 2007 8:32 PM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
How do you wire events such as row click event etc?
Left by Chandra on Oct 24, 2007 10:46 AM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
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
Left by khalid on Oct 30, 2007 5:54 PM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
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!
Left by xelag on Nov 04, 2007 7:32 AM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
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)
Left by Odi on Nov 30, 2007 3:15 AM

# How to use FlexGrid in WPF?
Requesting Gravatar...
please let me know as soon as possible.
thanx in advance
Left by Abhishek on Dec 07, 2007 11:56 PM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
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.
Left by taLuis on Jan 04, 2008 8:31 AM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
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
Left by mr a on Mar 01, 2008 10:06 AM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
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 ??
Left by Anuj on Mar 03, 2008 7:21 PM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
Great article, does the DataGrid support styling? can u post some sample code for styling header, row and alternative row?
Left by mos on May 21, 2008 10:38 PM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
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
Left by Suhas on Jun 17, 2008 5:44 PM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
Good Article
Left by Aswathy on Jan 19, 2009 5:51 PM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
Very good work, can u post the code in VB please?
Thanks
Left by Sergio(Spain) on Jan 27, 2009 12:35 AM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
i think this article was a great. easy to follow.
Left by dll on Mar 14, 2009 2:34 AM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
hello its very nice article .............
I am diiging last two days.......
Thanks dear............
Left by Ajay on Apr 05, 2009 5:51 PM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
good,thanks a lot!
Left by masterfy on Apr 13, 2009 1:42 PM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
this is datagrid only.. Is there any reference for data grid view in WPF.

Left by dinesh on Apr 20, 2009 8:41 PM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
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.
Left by Krunal on May 13, 2009 9:44 PM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
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.
Left by application development services on Oct 01, 2009 10:03 AM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
Thanks. Its Working fine.
Trying datagrid use wpftookit was not easy at all.
Left by Anand on Nov 04, 2009 6:45 AM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
The tests are fine, Multi cores only come into effect when theres multiple threads....
Left by DDos Protection on Nov 06, 2009 11:14 PM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
Thanks your article was really helpful
Left by Reena on Nov 09, 2009 9:50 PM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
Thanks alot for this helpful article.
I was really curious that how can i enjoy using DataGridView and DataGrid in my WPF app.

Thanks.
Left by Khawar Rasheed on Dec 15, 2009 1:49 AM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
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.
Left by Arvind on Mar 28, 2010 2:12 AM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
I wish I had your expertise!
Left by Attorneys Personal Injury on May 29, 2010 6:40 AM

# re: How to use a DataGrid or DataGridView in a WPF app
Requesting Gravatar...
This looks very interesting. Thanks for the info.
Left by Chair Lift For Stairs on May 29, 2010 6:42 AM

Your comment:
 (will show your gravatar)


Copyright © Lorin Thwaits | Powered by: GeeksWithBlogs.net | Join free