Absolute versus Auto Sizing

 One big advantage of WPF versus other layout tools is it’s ability to automatically resize forms and controls based on the size of their content.  A tradeoff here is the ability to control "exactly" what the layout looks like.  A button may be a little longer to fit a name or some text localized to German.  In order for this to work, the properties for controls should be "sparsely populated."  This means that the Width of a button should be left empty if the size of the button should increase to fit the text on the button.

 

This button is positions at 73, 41 within the grid call at Row 0 Column 0 

<Button VerticalAlignment="Top" HorizontalAlignment="Left"

Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1"

Margin="73,41,0,0" Width="75" Height="23" Name="button3">

ButtonTextReallyLong

</Button>

Note that this button sits within a single row and single column, hence the RowSpan and ColumnSpan are both set to 1.  Note also that the Width of the button is set to 75.  This button ends up being shorter than the text.

 

 

An improved button does not set the redundant properties and leaves with width at Auto

<Button VerticalAlignment="Top" HorizontalAlignment="Left"

Grid.Column="0" Grid.Row="0"

Margin="73,41,0,0" Name="button3">

ButtonTextReallyLong

</Button>

Note that the HorizontalAlignment and VerticalAlignment must be set in order to prevent the stretching of the bottom to the right and bottom edges of the cell.

 

 

Actually in this example the Row and column do not need to be set either since 0,0 is the default row and column.  Although I find that having these be set helps each of my controls seem more consistent in the XAML.

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

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