Handling Different Font Sizes Due To Display Properties in a WPF App?

Question

My group is building an editor-type app in WPF. One thing we noticed is that on my WinXP machine, running with the "windows classic style" theme, the text on buttons is fits fine. However on my friend's machine, who's running with the "windows xp style" theme, the font size is bigger so text on buttons get clipped at the bottom.

Is there a way to handle this nicely, like automatically resizing controls to fit the text?

I hesitate to manually resize the button to fit his layout as anyone else can have totally different settings through the Display Properties and Accessibility Options.

Thanks!

Answer 1

A WPF button will automatically resize to fit the content that it has been given, however it will only do this when it is inside a container that does not enforce size and its size has not been set manually. To prove this mess around with the font size in the following code snippet:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Button
        Grid.Column="1"
        Grid.Row="1"
        FontSize="24"
        Content="QWERTY"/>
</Grid> 

I guess that your buttons haven't resized because you have constrained them. To fix this you need to decide how you want them to resize (which can be very complicated when elements would overlap if they just grew blindly) and if none of the supplied panel types perform the growth behaviour that you are looking for then you may need to write your own that does.

Answer 2

Have you hardcoded element sizes using Width and Height properties? In WPF the recommended way to do this is to use the several layout containers.

The following is an example of a grid which lays two buttons at the bottom and a textbox at the top.

<Grid>
    <Grid.RowDefinitions>
        <!-- TextBox row with unspecified height. -->
        <RowDefinition Height="*"/>

        <!-- Button row with automated height so it resizes to
             fit the content -->
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <!-- Textbox on first row. -->
    <TextBox Margin="3" Name="textBox1" Grid.Row="0" AcceptsReturn="True" />

    <!-- StackPanel which lays the two buttons at the bottom horizontally.
         RightToLeft is specified so that the first button appears on right.
         -->
    <StackPanel Grid.Row="1" HorizontalAlignment="Right"
                Orientation="Horizontal" FlowDirection="RightToLeft">

        <!-- The buttons. Only padding and margin are hardcoded so these
             can resize to the contents -->
        <Button Padding="3" Margin="3">OK</Button>
        <Button Padding="3" Margin="3">Cancel</Button>
    </StackPanel>
</Grid>