What’s the meaning of * (asterisk) in XAML ColumnDefinition?

by

When you define a column in a WPF grid you can set the width to one of three possible values:

  • A fixed width,
  • Auto – column will become as wide as necessary to fit its children, or
  • * (star) take up any available remaining space

The * is prefixed by a number (default is 1 if no number is specified). The available space is divided among the starred columns in proportion to the prefix number.

If you have this definition

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="0.07*"/>
  <ColumnDefinition Width="0.93*"/>
</Grid.ColumnDefinitions>

The first column will get 7% of the total space available and the second column would get 93%. On the other hand if you had this definition:

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="0.07*"/>
  <ColumnDefinition Width="0.14*"/>
</Grid.ColumnDefinitions>

The first column would get 1/3 and the second 2/3 of the available space.

In your specific case where the width of the grid is 354 and the proportions of the two columns are 40 and 314 you get the following column widths:

First column width = 40/(40 + 314)*354 = 40
Second coulmn width = 314/(40 + 314)*354 = 314

The star width is best used when the width of the grid isn’t fixed. When the grid is resized the columns will then scale proportionally as specified by the star widths. In your case the width of the grid is fixed and you could just as easily have used fixed width columns.

If you want a layout where the second column is double the width of the first and the third column is triple the width of the first you need this definition:

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="*"/>
  <ColumnDefinition Width="2*"/>
  <ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>

If the total width of the grid is 300 you get column widths 50, 100 and 150. If the total width of the grid is 600 you get column widths 100, 200 and 300. And so on.

More Related Contents:

  1. Why are ActualWidth and ActualHeight 0.0 in this case?
  2. What does the WPF star do (Width=”100*”)
  3. Combine expander and grid (resizable expander)
  4. Binding to static property
  5. Why does the binding update without implementing INotifyPropertyChanged?
  6. WPF: Canvas mouse events not firing on empty space
  7. OneWayToSource binding from readonly property in XAML
  8. How can I apply a custom sort rule to a WPF DataGrid?
  9. What approaches are available to dummy design-time data in WPF?
  10. How to make overlay control above all other controls?
  11. How to get controls in WPF to fill available space?
  12. What is the difference between x:Reference and ElementName?
  13. Trouble referencing a Resource Dictionary that contains a Merged Dictionary
  14. Are “{Binding Path=.}” and “{Binding}” really equal
  15. WPF ListView with horizontal arrangement of items?
  16. WPF: XAML property declarations not being set via Setters?
  17. WPF TreeView: How to style selected items with rounded corners like in Explorer
  18. How do I make a WPF data template fill the entire width of the listbox?
  19. How can I reduce RadioButton binding code?
  20. TextBox TextTrimming
  21. Creating an instance of a nested class in XAML
  22. Different views / data template based on member variable
  23. Difference between {Binding PropertyName} and {Binding Path=PropertyName}
  24. WPF: Changing Resources (colors) from the App.xaml during runtime
  25. How to change MahApps.Metro dialog content template width?
  26. Create a control in Resources and reuse it in XAML WPF
  27. How exactly do Attached Properties work in WPF?
  28. Adding a Merged Dictionary to a Merged Dictionary
  29. Bind a property to DataTemplateSelector
  30. How do I dynamically bind and statically add MenuItems?

Leave a Comment