Wednesday, October 01, 2008

MSDN Question on WPF: Label inside a Gridcolumn should determine the width of the column.

Given XAML.

<
Grid
>
    <
Grid.ColumnDefinitions
>
        <
ColumnDefinition
/>
        <
ColumnDefinition
/>
        <
ColumnDefinition
/>
        <
ColumnDefinition
/>
    </
Grid.ColumnDefinitions
>
    <
Grid.RowDefinitions
>
        <
RowDefinition
/>
    </
Grid.RowDefinitions
>
    <
Label Grid.Column="0" MinWidth="120" Width="200">Some caption</Label
>
    <
TextBox Grid.Column
="1" />
    <
Label Grid.Column="2" MinWidth="120" Width="200">Some other caption</Label
>
    <
TextBox Grid.Column
="3" />
</
Grid
> 

Rendering the xaml as it is in a XAML viewer like KaXaml or XamlPad or Visual Studio Xaml editor, shows that the labels get clipped if the text is too big. So how do you make the label text size determine the width of the column?

For this question, I have referred to Programming WPF by Chris Sells and updated my knowledge about Grid layout in WPF. Essentially, the Width of a column in a grid can be fixed (do not use unless you really want to), automatic and proportional(use "*"). So when a column takes * as width, it takes the space that is left after the fixed and auto width columns are rendered. So if you modify the above XAML with the information I just gave, it works out fine.

The modified XAML would be.

<
Grid
>
    <
Grid.ColumnDefinitions
>
        <
ColumnDefinition Width
="Auto"/>
        <
ColumnDefinition Width
="*"/>
        <
ColumnDefinition Width
="Auto"/>
        <
ColumnDefinition Width
="*"/>
    </
Grid.ColumnDefinitions
>
    <
Grid.RowDefinitions
>
        <
RowDefinition
/>
    </
Grid.RowDefinitions
>
    <
Label Grid.Column="0">Windows Presentation Foundation, Silverlight, Windows Communication Foundation, Windows Workflow Foundation</Label
>
    <
TextBox Grid.Column
="1" />
    <
Label Grid.Column="2">another long caption in here</Label
>
    <
TextBox Grid.Column
="3" />
</
Grid>

As you can see, I have just altered the Width property cleverly(theoretically, from the book) such that the label columns have width auto and the other labels have width *. So the columns whose width is Auto is rendered first and then the columns with proportionate width are rendered.

I like this little things on forums which gives us a lot of information. So, if you want to become a better developer you should:
1. Read Blogs, Write Blogs
2. Try and answer forum questions.

No comments: