ListBox in WPF page looks fine on my PC, but the data shrinks on smaller resolutions

Question

I've tried almost every combination of alignments and margins, to no success. The ListBox is on a WPF page, which is bound to a frame on the main window.

The ListBox itself is fine. It aligns just as I expect it would. My ListBoxItem contains an Image and a TextBlock. The TextBlock gets cut off.

As you can see from the following image, things are mostly good.

enter image description here

The ListBox is appropriately offset from the left edge and the top of that blue box. The content Image and TextBlock are fairly centered and so is the ListBoxItem outline. This is on my development machine.

I thought the whole reason for using grids, grid lines, and alignment properties, was so we didn't have to set a hard coded size. That our controls would resize themselves. Which does actually work just fine for everything else.

But when I place this on a small screen, I get this:

enter image description here

The ListBox itself is still aligned correctly. But now the ListBoxItem is forced down. It's top alignment is still good, but the bottom is pushed down so we can't see the TextBlock or the bottom of the ListBoxItem.

Here's my XAML:

<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="1">
    <Grid.RowDefinitions>
        <RowDefinition Height="292*" />
        <RowDefinition Height="30*"/>
    </Grid.RowDefinitions>

    <ListBox Grid.Row="1" Name="lbButtons" Margin="2,0,0,1.5" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Visibility="Visible" >
        <StackPanel Name="spListBoxItems" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Orientation="Horizontal">
            <ListBoxItem Margin="0,0,0,0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
                <StackPanel Orientation="Vertical" HorizontalAlignment="Center" Margin="10,5,10,5">
                    <Image Source="/COBAN.CobanConsole.UI;component/Images/Buttons/Light/record48_light.png" />
                    <TextBlock Text="Record" Margin="5,5,0,0"></TextBlock>
                </StackPanel>
            </ListBoxItem>
        </StackPanel>
    </ListBox>
</Grid>

Not much to it. Any ideas on what's going on?

RandomEngy RandomEngy · Accepted Answer · 2013-02-08T00:10:32

You're using * units on your grid row definitions. Those are relative measures: they just tell you what proportion of the space the rows can take up. If you need your listbox to have a specific height, you should change your second row to have an absolute size instead, like this:

<Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="30"/>
</Grid.RowDefinitions>

ListBox in WPF page looks fine on my PC, but the data shrinks on smaller resolutions

1 Answers