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.

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:

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.