Question

I have a ListBox control that has been assigned to Grid.Column 0 which has a value of ‘*’ defined for it’s width, however when rendered there is a sizeable amount of space that is not being used.

I have also noticed that there is a border of sorts around the ListBox control itself, however I have not added one within the markup.

My UI (Areas of concern marked in Red):

My Markup:

<Window.Resources>
        <DataTemplate x:Key="GameImagesTemplate" >
            <StackPanel Orientation="Vertical">
                <Image Source="{Binding FileInfo.FullName}" Margin="8,8,8,8" Height="70" Width="70" />
                <Label Content="{Binding Name}" Width="70" />
            </StackPanel>
        </DataTemplate>

        <DataTemplate x:Key="GameTemplate">
            <StackPanel>
                <Label Content="{Binding Name}" Background="Gray" FontSize="16" />
                <ListBox x:Name="imageContent" ItemsSource="{Binding FileList}" ItemTemplate="{StaticResource GameImagesTemplate}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel Orientation="Horizontal" IsItemsHost="True" />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                </ListBox>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <ListBox x:Name="ContentList" ItemTemplate="{StaticResource GameTemplate}" Grid.Column="0" ScrollViewer.HorizontalScrollBarVisibility="Disabled" />

        <StackPanel Grid.Column="1" Background="DarkGray">
            <Button Click="OnLoad">_Load</Button>
            <Button Click="OnSave">_Save</Button>
            <Button Click="OnAdd">_Add</Button>
            <Button Click="OnDelete">_Delete</Button>
        </StackPanel>
    </Grid>

How would I go about resolving both of the issues raised. Is it the default behaviour of the ListBox control?

Many thanks

Answer 1

Yes, that is the default behavior.

In the case of the alignment it looks like you have a WrapPanel in each ListBoxItem which doesn’t have quite enough space to put another item on line 1. The remaining space is unused because of the HorizontalContentAlignment setting on ListBox defaulting to Left. This setting is in turn bound to by the default ListBoxItem. Setting HorizontalContentAlignment="Stretch" on your ListBox should fix that.

The outer border comes from the default setting for BorderBrush and BorderThickness. Setting BorderThickness="0" will get rid of it entirely.

There are some other default Padding settings that add some spacing in the default Styles and Templates. If you want to get more into those add a ListBox to a project in Blend and make a copy of its default Template and ItemContainerStyle and check out the XAML. Also consider using the base ItemsControl in cases where you don’t need selection behavior, as it doesn’t have any of these type of default settings.