#1,197 – Autosizing in a Grid with Maximum Size

You can use autosizing for grid rows or columns to have the row or column automatically size to fit its contents. There are times, however, when you want the row or column to fit its contents, but only up to a limit. E.g. Autosize a row height, but only to a maximum of 20% of the size of the entire grid.

You can autosize within limits by using the MaxHeight attribute and a value converter.

Below, we have a grid with two rows, each containing a ListBox. The second row is set to autosize and the first to use all remaining space.

<Window.Resources>
    <ResourceDictionary>
        <local:MaxHeightConverter x:Key="MaxHeightConverter"/>
        <sys:Double x:Key="adjMaxHeightRatio">0.2</sys:Double>
    </ResourceDictionary>
</Window.Resources>

<Grid x:Name="grdRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <ListBox Grid.Row="0" ItemsSource="{Binding Dogs}" />

    <ListBox Grid.Row="1" ItemsSource="{Binding MoreDogs}" MaxHeight="{Binding ElementName=grdRoot, Path=ActualHeight, Converter={StaticResource MaxHeightConverter}, ConverterParameter={StaticResource adjMaxHeightRatio}}" />
</Grid>

The second ListBox will take as much room as it needs (grow to fit all elements), until it reaches 20% of the height of the parent grid. At that point, it will be constrained and get a vertical scrollbar.

Here’s the code for the converter:

public class MaxHeightConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        double pctHeight = (double)parameter;

        if ((pctHeight <= 0.0) || (pctHeight > 100.0))
            throw new Exception("MaxHeightConverter expects parameter in the range (0,100]");

        return ((double)value * pctHeight);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

#423 – Setting Maximum Height and Width for Rows and Columns in a Grid

In the same way that you can set minimum height and width of rows and columns in a Grid, you can also set the maximum height or width.

You set the maximum height of a row in a Grid using the MaxHeight property of a RowDefinition element.  You set the maximum width of a column by using the MaxWidth property of a ColumnDefinition element.

    <Grid ShowGridLines="True">
    	<Grid.RowDefinitions>
    		<RowDefinition Height="Auto" />
    		<RowDefinition Height="Auto"/>
    		<RowDefinition Height="Auto"/>
    		<RowDefinition Height="Auto"/>
    	</Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" MaxWidth="20"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*" MaxWidth="80"/>
        </Grid.ColumnDefinitions>


#270 – Minimum and Maximum Window Size

By default, there are no upper or lower limits for the size of a window in WPF–you can shrink a window to the point where none of its content is visible and you can maximize a window so that it takes up the entire desktop.

You can use the MinWidth and MinHeight properties to dictate the minimum dimensions for the window.  When resizing the window, you’ll be unable to make the window any smaller.

<Window
	Width="400" Height="300" MinHeight="100" MinWidth="200">


You can use the MaxWidth and MaxHeight properties to dictate the maximum dimensions for the window.  When resizing the window, you’ll be unable to make the window any larger.  If you try maximizing the window, it will be constrained to the maximum size.

<Window
	Width="400" Height="300" MaxWidth="500" MaxHeight="320">