Assign percentage width to a column in silverlight grid

I was wondering how can I define the column widths for a silverlight/WPF grid with percentages like we use to define in html tables. This msdn document was quite helpful. Let me paste the important part here. The width attribute can take three type of values:

  • doubleValue: The column’s width, expressed as a floating-point value for a pixel count. Typically this is given as an integer, although interpolation of floating-point values is supported by grid layout.
  • starSizing: A convention by which you can size rows or columns to take remaining available space in the Grid. A starSizing always includes the literal character *, and optionally precedes the * with an integer value that specifies what share of available space should be given as a weighted factor versus other possible star sizings (for example, 3*).
  • Auto: The column’s width, described by the literal Auto.

So this is how we can define a grid with two equally divided rows and three columns divided in the ratio 1:2:3:

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height=".5*"></RowDefinition>
    <RowDefinition Height=".5*"></RowDefinition>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="1*"></ColumnDefinition>
    <ColumnDefinition Width="2*"></ColumnDefinition>
    <ColumnDefinition Width="3*"></ColumnDefinition>
  </Grid.ColumnDefinitions>
</Grid>  

The .5* in the row height can be changed to any value but both values must be same to make sure the rows are divided evenly.

Advertisements

8 Responses to “Assign percentage width to a column in silverlight grid”

  1. Anonymous Says:

    Congrats Mehroz for Silverlight 2 prize!!!
    For dividing row into equal halves, you dont need to mention height, its by default divided into 50%

  2. Syed Mehroz Alam Says:

    @Anonymous
    >Congrats Mehroz for Silverlight 2 prize!!!
    Thank you.

    >For dividing row into equal halves, you don't need to mention height, its by default divided into 50%
    Absolutely, if we don’t give the height/width attribute for a row/column, we get a “*” by default.

  3. anonymous Says:

    Nice example.
    Do you know, how to assign set a.width = ” Auto” of a control (lets’ say a = textbox/combobox ) from code ?

  4. Tester Says:

    yourControl.Width = new GridLength(1,GridUnitType.Auto);

  5. Tina Says:

    Thanks SO much, I need this badly, and on MSDN, their description was not helpful in any way for StarSizing.

    Thanks again!

  6. HSIM Says:

    Seriously, can I specify the width and/or height in percentage values? 50% is not enough for me. I need to be able to specify widths of three columns in a row with distribution like 25%, 50%, and 25%, respectively. Can I do that?

  7. AndrewM Says:

    HSIM try .25* , .5*, .25*.
    if you wanted 3 equal it would be .33* for each
    4 would be .25*
    5 would be .20*

    Notice that your goal is to make the percentages to add up to 1.

  8. jklfsdj Says:

    For some reason this won’t work in a UserControl. Using this code:

    The StackPanel fills the entire gird.


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: