WPF Part 2 – Using a Grid Control

UPDATE: 04/24/2009

After a year this still gets a few views! I’ve updated the code to make it look better.

____________________________________________________________________

UPDATE: 12/21/2007

Hello Channel9 ppl 🙂

I have no idea why this article has got into a debate about web design!

Anyway, this is not about a complete user interface. I might address complex user interfaces later, but frankly my origional ‘pain point’ was lack of a simple Grid demo in WPF.

Please don’t read this as more than it is supposed to be ^_^

____________________________________________________________________

In Part 1, I discussed the need for a compelling front end to your demonstration.

Here is my first concept.. just some basic WinForms UI elements required for the job at hand.

Winforms Look n’ feel

I was happy to see this work because I knew the WCF communication code behind, and I saw this as a manifestation of that. 

However, would you show this to a customer?

Hence, I decided to go with a WPF frontend for my next iteration:
WPF Aero Look n’ feel

It still needs some work to go to become a good ‘User Interface’, but this already is 100% better on the eyes.

Doc with XAML code embedded

To give you an idea how easy it is, here is the XAML code I defined to add a progress bar to the Infragistics Grid Control above:


<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
	<ProgressBar Minimum="0" Maximum="100" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}" ToolTip="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}" MaxHeight="20"/>
</Grid>

And here is another snippet, showing how to add a button, with a click event:


<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
	<Button Height="26" Width="26" Tag="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}" ToolTip="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}" Click="Button_Click">
		<Image Source="D:\Projects\avasmall.png"/>
	</Button>
</Grid></code>

This was all done in the newly released Visual Studio 2008.

Advertisements

5 thoughts on “WPF Part 2 – Using a Grid Control

  1. It may be an idea to list what references are required in visual studio to access Infragistics components etc, and all the steps required.
    why not just have the projects for download instead of an embedded word doc. It’s much easier to get going then.
    Your example is vague, so most people won’t waste their time trying to figure out what the hell is going on.

  2. Hi Ed,

    Thanks for your comments.

    This post was not actually a tutorial on how to use Infragistics with WPF. just a demonstration of what is possible with little effort.

    Yes, the example is vague.. I intended nothing more than a quick discussion on the topic.

    Maybe I’ll find the time for a complete tutorial later….

  3. It was me that started the debate at Channel 9, my reason was solely about design and the power of it. I am developing a winform program and have come across great difficults in getting progress bars embedded into a datagrid or list view control. A good progress bar is available at http://www.codeproject.com/KB/cpp/XpProgressBar.aspx. Try and host this in a datagridview and you get http://msdn2.microsoft.com/en-us/library/7tas5c80.aspx. Its very hard. There are examples of embedding progress bars into the list view or datagrid, but when you try using the above one, you get loads of flickering.

    Basically you’re fighting the tools, trying to create something attractive. In WFP you can embed any control into any control. you also have complete control about the rendering.

    In a nutshell I want attractive applications, web or smart client to achieve something ‘100% better on the eyes.

  4. I agree totally; I did have the option of working with my first example and making a pleasing Grid based interface… but a few years of WinForms experience told me it would be painful!

    Winforms gets you 90% there with functionality very quickly. Unfortunately the last 10% to make it look the way you want takes an awful ammount of time.

    I love WPF now.. to the extent that I am actually sad that I mostly work on Enterprise code and databases theses days. As a junior developer working on user interfaces, this stuff is fantastic.

    As you say, Winforms is about fighting the tools and WPF about having complete control.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s