jump to navigation

WPF – The downfall of the tyrannical form layout August 3, 2007

Posted by gcorbin in Uncategorized.
trackback

Microsoft has done it again. I guess I shouldn’t be surprised any more. Dot Net 3.0 has been released and with it another new, cool, set of technologies. You guessed it; I’m referring to Windows Presentation Foundations or WPF for short. I always get so excited when something new and cool comes along. I enjoy digging my teeth into a new technology, especially if its one that have practical uses in the office environment. WPF gives us lots of practical uses in the real world. The fact that we can now define our form layouts the same way, regardless if it’s a web form or win form is an enormous benefit. The new language for defining this is XAML (eXtensible Application Markup Language). It has freed from the constraints of how a form must be laid out. No longer do we need to conform to the standard table, grid, or battleship gray rectangle button. WPF exposes the full flexibility of the DirectX graph engine for manipulating how controls and forms are displayed. The APIs for using this power is very simple. In many cases, twisting the layout of a control to bend to our will is simply a matter of using the right XAML attributes. With this power we now can wield a wonderfully new and exciting type of application. We also have to be cautious of this, for now we also have the power to create frightful abominations that would terrify the most open-minded developers. Lets now take a look at some code that shows how to uses this. The sample below shows a simple form that has a few standard buttons and textboxes. Remember for this sample to work, you will need to have .Net 3.0 framework installed.

 

blog6a1.jpg 

 

[CODE]

 

<Window x:Class=”XamlWindowsAppProject.Window1″
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml
Title=”XamlWindowsAppProject” Height=”213″ Width=”262″>
<Grid>
       <TextBox Name=”test1″ Margin=”16,15.5,93,0″ Height=”23″ 

VerticalAlignment=”Top” Text=”Sample Textbox”></TextBox>
       <Button Content=”Click Here” Margin=”44,49,0,80″  

HorizontalAlignment=”Left” Width=”78″>
       </Button>
      <ListBox Margin=”127,59,5,57″ Name=”listBox1″>
        <ListBoxItem Name=”listBoxItem1″>ListBoxItem 1</ListBoxItem>
        <ListBoxItem Name=”listBoxItem2″>ListBoxItem 2</ListBoxItem>
        <ListBoxItem Name=”listBoxItem3″>ListBoxItem 3</ListBoxItem>
        <ListBoxItem Name=”listBoxItem4″>ListBoxItem 4</ListBoxItem>
        <ListBoxItem Name=”listBoxItem5″>ListBoxItem 5</ListBoxItem>
        <ListBoxItem Name=”listBoxItem6″>ListBoxItem 6</ListBoxItem>
      </ListBox>
  </Grid>
</Window> 

 

 

Now lets take that ordinary looking form and lets get freaky with it. In the sample below, you can now see that we’ve twisted the textboxes, change the buttons shape and opaqueness, and gave the form itself an unusual shape.

 

blog6b1.jpg 

 

[CODE]

 

<Window x:Class=”XamlWindowsAppProject.Window1″ xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml
    Title=”XamlWindowsAppProject” Height=”213″ Width=”262″>
    <Grid>
    <TextBox Name=”test1″ Margin=”16,15.5,93,0″ Height=”23″
             VerticalAlignment=”Top” Text=”Sample Textbox”></TextBox>
      <Button Content=”Click Here” Margin=”44,49,0,80″
              HorizontalAlignment=”Left” Width=”78″>
        <Button.RenderTransform>
          <RotateTransform Angle=”45″ />
        </Button.RenderTransform>
      </Button>
      <ListBox Margin=”127,59,5,57″ Name=”listBox1″>
        <ListBox.RenderTransform>
          <RotateTransform Angle=”15″ />
        </ListBox.RenderTransform>
        <ListBoxItem Name=”listBoxItem1″>ListBoxItem 1</ListBoxItem>
        <ListBoxItem Name=”listBoxItem2″>ListBoxItem 2</ListBoxItem>
        <ListBoxItem Name=”listBoxItem3″>ListBoxItem 3</ListBoxItem>
        <ListBoxItem Name=”listBoxItem4″>ListBoxItem 4</ListBoxItem>
        <ListBoxItem Name=”listBoxItem5″>ListBoxItem 5</ListBoxItem>
        <ListBoxItem Name=”listBoxItem6″>ListBoxItem 6</ListBoxItem>
      </ListBox>
  </Grid>
</Window> 

   

Pretty Cool huh! The sample above is just a small taste of the multitude of ways that the graphical representation of the form can be changed. In this discussion, I only touched on one aspect of the WPF framework. For more details on what WPF can do for you, check out the Microsoft docs on it here.

Advertisements

Comments»

1. Jim Gorman - December 10, 2007

Greg,

I went to the December 6th Beantown.NET INETA User Group meeting.

http://beantowndotnet.org/

Josh Smith (lead architect of the ‘New York Times Reader’) extolled the virtues of WPF.

Unfortunately, he readily admitted that WPF does not offer some powerful Windows Forms features like a DataGrid or a DateTime picker out of the box. He also reminded the audience that WPF is not Silverlight and vice-versa.

Does this mean that WPF is not ready for “prime-time” line of business applications?

2. Greg - December 11, 2007

I’m using WPF in some products that we have at my company. Yes, it is lacking some powerful controls, but I’m finding that with the ones it does have, one can work around those limitations. Also, there are 3rd party companies that sell controls for WPF.

3. Jim Gorman - December 17, 2007

Greg, I found some pretty cool WPF animations here:

http://wpf.netfx3.com/files/folders/controls/entry10297.aspx

Among other things, Kevin’s Bag-O-Tricks includes a DatePicker.

Oh – And if it helps – For some strange reason, I couldn’t compile this solution until I installed the 3.5 (yes 3.5) .NET framework. [Your experience may differ.]

4. gcorbin - December 18, 2007

Thanks Jim, I’ll check it out.


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

%d bloggers like this: