WPF - The downfall of the tyrannical form layout

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.

 

 

 

[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.

 

 

 

[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.