XTab's Blog

 Continuing my look at features that seem to be Missing in Action (MIA) from Windows Forms, vbCity colleague Matt pointed out to me that the Anchor property seems to have disappeared.

  I'm really pleased that this came up, because it gives me an opportunity to highlight just some of the massive flexibility you have in WPF Windows when it comes to layout.

 So what does WPF have to offer that will work as well as Anchors do? Umm, that should probably read 'better than Anchors do', because let's face it, WinForms Anchoring doesn't always offer you the precise flexibility you want. But the short answer to the original question is: Lots!

 I'm only going to cover a few examples here and then invite you to play with the ideas I have suggested. Using these, you can ensure that every control (or element, as we should properly call them in WPF) sits exactly where you tell it to, and stays anchored or not as the Window resizes, according to your wishes.

HorizontalAlignment, VerticalAlignment and Margins
   These two properties are reasonably close to the Anchor properties in WinForms. HorizontalAlignment gives you the choice of aligning (read: Anchoring) to Left or Right. So you can see how they relate to Anchor Left and Anchor Right. However, WPF never does layout by halves, so you also have two more choices - Center and Stretch. I won't insult your intelligence by telling you what those additional settings do.

<Button  Margin="0,5,5,0" HorizontalAlignment="Right"

        VerticalAlignment="Top"  >Button</Button>

 The result you will get is:

 Notice that there is a 5 unit gap to the top and right of the button. I carefully used the word "unit" there because old habits always want me to say 'pixel'. It isn't necessarily 5 pixels gap; WPF thinks in terms of 'device independent units', but in many common scenarios you can still think pixels.

 The two gaps are set by the Margin property. "0,5,5,0" translated to:

• 0 for the Left Margin
• 5 for the Top Margin
• 5 for the Right Margin
• 0 for the Bottom Margin

 Go ahead and tweak those settings to see how changes affect the position.

 If you try this markup, run the project and then resize the Window, that button will stick like glue to its position at the top right.

 Obviously, if you don't want any gaps then you can dispense with the Margin settings. This version uses the Left and Bottom settings only.

 <Button HorizontalAlignment="Left" VerticalAlignment="Bottom" >Button</Button>

Margins Only
  If you want an element to expand (and reduce) as the containing Window or other container resizes then you can achieve this just by setting the Margin properties.

<Grid Background="Black">

     <Button Margin="20,50"  >Button</Button>

    </Grid>

Alignment and Width
  Another combination you can try is to use one of the alignments, together with hard coding the Width or Height of a control. Usually you won't want or need to fix a height or width, but there may be cases where this works for you. Try something like this:

 <Grid Background="Black">

        <Button VerticalAlignment="Bottom" Width="90">

          Button</Button>

    </Grid>

 And in case you were wondering - yes, you can also add settings for the Margins too, so that you can position it, for example, a set distance from the Bottom edge.

 <Grid Background="Black">

        <Button VerticalAlignment="Bottom" Width="90"

                Margin="0,0,0,15">

          Button</Button>

    </Grid>

 I hope that by now you're starting to get the idea that WPF layout isn't going to miss the Anchor property any day soon! Combine the techniques shown above and you have a wide range of options.

Canvas
 But we're not done here yet. If you want to contain an element inside a panel and be able to fix its relative position, you could use a Canvas. Check out this markup:

 <Grid Background="Black">

      <Canvas Margin="50,35" Background="Yellow">

        <Button Canvas.Left="12" Canvas.Top="3">Button</Button>

      </Canvas>

    </Grid>

 This will net you the following, rather garish, result:

 That button will remain 12 units from the left and 3 units from the top of that Canvas, no matter what else happens by way of resizing the Canvas, the Grid or even the Window.

I think that even these simple, single examples show a great deal of power and flexibility for positioning elements. Bear in mind that you can build up layers of containers and panels and elements inside each other - and control the placement of each of them individually in relation to its container.

 While the familiar Anchor may be missing, I somehow think that once you become used to using these new techniques you won't actually miss it at all.