XTab's Blog

Ged Mead's Blog at vbCity

This blog hosted by:
http://blogs.vbcity.com      
  Home :: Syndication  :: Login

AprMay 2008Jun
SMTWTFS
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567

Archives

Topics

Ramblings

VB.NET

 This layout panel is quite limited in what you can do with it, but it does have one rather rare advantage when it comes to WPF - it is simple to use! So for that reason it's a good layout panel to start off with.

  The UniformGrid contains cells, just as you would expect with any grid. However, you have little control over those cells. What happens is that the UniformGrid assigns individual cells for each element you place within it. But - and here's one of the major limitations - each cell is of uniform size and the layout pattern of those cells within the grid is preset and cannot be changed by you.

 If you have a situation where you want to display a set number of elements and you want each element to be given exactly the same amount of real estate as its siblings then the UniformGrid might be worth considering.

Example

 In the screenshot below four similar size jpg images have been placed in a UniformGrid. The grid will allocate each of them one quarter of the space available.

  It will however maintain the proportions of the images. So, as you increase the size of the WPF Window, the cells will resize and the images will be enlarged to their maximum extent while still retaining the correct proportions.

Depending on the current width/height ratio of the Window, the unused space in each cell will change

  You can view the XAML code used to create the above layout here.

Example 2

 Of course it isn't necessary to have all elements of the same type, as with the four images used in the first example. Also, the elements in each cell can themselves be containers.

 The following ugly example uses various containers to hold further sub-elements. Note also that this example has five cells, thus causing the layout to be particularly scrappy. This is because the UniformGrid has a set pattern of rows and columns depending on how many cells it contains. Where the number of cells is between 5 and 9, it will always display them as three rows, each row containing 3 cells. As you can see, it can make for a GUI that you wouldn't want to put your name to!

  While I'm sure that no-one would want to use this as-is, in case you are interested in how the elements and sub-elements are coded in XAML I've posted the code here.

The third element has a Border around all the sub-elements. Note that the first sub-element inside that border is a StackPanel. If you were to try and place both the TextBlock and the Image individually inside that Border, it would create a syntax error. Therefore we wrap those two items inside the containing StackPanel, which is itself contained inside the Border.

 This way of building items element by element is typical of how GUIs are created using XAML. With the Beta version of Visual Studio 2008 that I am currently using I have found that the traditional drag and dropping of controls from the Toolbox is rarely the best way. Hand coding the XAML, although initially more time consuming seems to be the most productive approach in many situations.

posted on Thursday, August 02, 2007 2:35 PM

Feedback

# re: Little Boxes : WPF's UniformGrid 8/3/2007 4:10 PM Fred
O.K., I answered my own question. Right-clicking on the project, and adding a new item (jpg) will put the jpg at the same level as the xaml scripts. You can go back and change these jpg's if you want to change your scenary.

# Image Resources in WPF (1) 8/6/2007 2:30 AM XTab's Blog


# Windows Presentation Foundation : The DockPanel (1) 8/6/2007 9:02 AM XTab's Blog


# Windows Presentation Foundation : The DockPanel (1) 8/7/2007 3:47 AM XTab's Blog


# Sticky Controls: The WrapPanel in WPF 8/7/2007 7:31 AM XTab's Blog


# Sticky Controls: The WrapPanel in WPF 11/13/2007 5:15 AM XTab's Blog


Post Feedback

Title:
Name:
Url:
Comments: 
Protected by Clearscreen.SharpHIPEnter the code you see: