Listbox in column auto grid exceed parent width in wpf

Question

Let's say I have the following xaml:

<Grid MaxHeight="200" d:LayoutOverrides="Width">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <ListBox Height="170" ScrollViewer.HorizontalScrollBarVisibility="Visible" ItemsSource="{Binding DataModel.LocalData.ListFabricRules}" IsEnabled="{Binding DataModel.LocalData.Enabled}" SelectedItem="{Binding DataModel.LocalData.ListFabricRulesSelected}" >
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <TextBlock Text="{Binding Descript}" />
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <StackPanel Grid.Column="1" Orientation="Vertical" d:LayoutOverrides="Height" Margin="10,0" IsEnabled="{Binding DataModel.LocalData.EnabledRules}">
        <Button Content="Test" />
    </StackPanel>
</Grid>

The goal of layout is that the listbox fill the free space (in column), and in the right of listbox there is a button. The issue is the following: When the listbox show the horizontal scroll (because the contain text is large), their width increment change grid proportions, so the button move to right, without respect margins and occupying more than main grid. When put the main grid inside of a Scrollviewer, the scroll is partially hidden. The host of main grid is usercontrol.

Click here you can see the image where is the listbox without horizontal scroll. You can the scroll of scrollviewer.In this capture no problem

In this image there are large items (horizontally), so the horizontal scroll in listbox is visible. In this case, the scroll of scrollviewer is partially hide. It's because the listbox has more width. I don't know why

BOBIN JOSEPH BOBIN JOSEPH · Accepted Answer · 2016-03-31T09:49:40

Here the problem is , you are not defining the width of the List box it is taking as 'auto in both columns'. To solve that you have to set the percentage of width by using the * Or use Max or MinWidth.

<Grid MaxHeight="200" d:LayoutOverrides="Width">
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="80*"/>
    <ColumnDefinition Width="20*"/>
</Grid.ColumnDefinitions>
<ListBox Height="170" ScrollViewer.HorizontalScrollBarVisibility="Visible" ItemsSource="{Binding DataModel.LocalData.ListFabricRules}" IsEnabled="{Binding DataModel.LocalData.Enabled}" SelectedItem="{Binding DataModel.LocalData.ListFabricRulesSelected}" >
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <TextBlock Text="{Binding Descript}" />
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
<StackPanel Grid.Column="1" Orientation="Vertical" d:LayoutOverrides="Height" Margin="10,0" IsEnabled="{Binding DataModel.LocalData.EnabledRules}">
    <Button Content="Test" />
</StackPanel>

Listbox in column auto grid exceed parent width in wpf

1 Answers