Question

I have a ListBox that has a grid in its template to allow 4 columns. One column is the actual text of the ListBox. I want that column to fill the available horizontal space.

The column definitions are:

<ControlTemplate TargetType="ListBoxItem">
    <Grid ScrollViewer.CanContentScroll="True" Margin="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20" />
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="30" />
        </Grid.ColumnDefinitions>
        <CheckBox VerticalAlignment="Center" Grid.Column="0" IsChecked="{Binding IsSelected,
                  RelativeSource={RelativeSource TemplatedParent},
                  Mode=TwoWay}" />
        <TextBlock VerticalAlignment="Center" Grid.Column="1" Margin="5,0,5,0" Text="{Binding Id}" />
        <TextBlock VerticalAlignment="Center" Grid.Column="2" Margin="5,0,5,0" Text="{Binding Title}" />
        <Button HorizontalAlignment="Right" Grid.Column="3" Tag="{Binding Id}" Margin="5,0,5,0">-&gt;</Button>
    </Grid>
</ControlTemplate>

I have tried several permutations of this and nothing will get it to fix in the window except for an explicit size setting. Then when I resize the window it does not resize with it.

The ListBox is wrapped in a ScrollViewer to allow vertical scrolling (I am guessing that is what is messing me up.)

Any ideas on how to get the third column to fill just the available space and no more?

Answer 1

I finally figure this out.

The containing list box needed to set the horizontal scroll bar to disabled like this:

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled" 

Once I did that the grid sized perfectly.

One of these days I will figure out how all this “declarative stuff” works.