locked
Can percentages be used for things like Width/Height? RRS feed

  • Question

  • I know this is an extremely simplistic question, I'm sorry to be asking such a simple question, but here goes.  In all of the example XAML code I've seen, whenever the width or height of any control is given, it is given either numerically (I think in pixels), or "Auto", or "*".  Is it possible to give the width in terms of a percentage of the total width of whatever the container is?
    Rod
    Wednesday, March 24, 2010 9:23 PM

Answers

  • Yes, with star (*) sizing.  * gives you the reaming space but you can specify x* and y* to assign ratios of the remaining space.

    For example, the XAML below lets column 0 use whatever width it needs.  Then, column 1 get 40% of the remaining space and column 2 get 60% of it.  You'll see some people use 0.4 and 0.6, etc.  It doesn't really matter - the numbers are used to calculate a ratio.  If they add up to 1 or 100 it makes it easy to see what's going on though.

    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="40*" />
        <ColumnDefinition Width="60*" />
      </Grid.ColumnDefinitions>
    </Grid>

     

     

    • Marked as answer by Rod at Work Thursday, March 25, 2010 3:23 PM
    Thursday, March 25, 2010 12:11 AM

All replies

  • Yes, with star (*) sizing.  * gives you the reaming space but you can specify x* and y* to assign ratios of the remaining space.

    For example, the XAML below lets column 0 use whatever width it needs.  Then, column 1 get 40% of the remaining space and column 2 get 60% of it.  You'll see some people use 0.4 and 0.6, etc.  It doesn't really matter - the numbers are used to calculate a ratio.  If they add up to 1 or 100 it makes it easy to see what's going on though.

    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="40*" />
        <ColumnDefinition Width="60*" />
      </Grid.ColumnDefinitions>
    </Grid>

     

     

    • Marked as answer by Rod at Work Thursday, March 25, 2010 3:23 PM
    Thursday, March 25, 2010 12:11 AM
  • Tony B is correct, you want to use a grid with column definitions that use the star notation.  Then as long as you don't set explicit sizes for your items inside the grid, things will resize/flow nicely, even if you change the window size.
    Thursday, March 25, 2010 12:47 PM
    Moderator
  • Thank you, Tony and Chuck, great advice.
    Rod
    Thursday, March 25, 2010 3:23 PM