CODEWITHSUNDEEP
c#wpflistboxscrollbar
Patrick
Patrick

Reputation: 2583

ListBox not showing scrollbar

I have a listbox with various elements inside. It is inside a grid with column definition but when elements exceed the window it is necessary to have scrollbars so that I can see the whole content.

enter image description here

and the xaml is:

<Grid >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <ListBox x:Name="lbxOptionsTab3" Background="{x:Null}" BorderBrush="Gainsboro" 
                 SelectionChanged="ListBox_SelectionChanged"
                 HorizontalContentAlignment="Stretch" Margin="10" 
                 ScrollViewer.HorizontalScrollBarVisibility="Visible"  
                 ScrollViewer.CanContentScroll="True">
            <ListBox.Effect>
                <DropShadowEffect ShadowDepth="4" Direction="330" Color="Black" Opacity="0.5" BlurRadius="4"/>
            </ListBox.Effect>
        </ListBox>
        <Border x:Name="Border2Tab3" BorderBrush="Gainsboro" 
                Background="{x:Null}"  MinWidth="100" 
                BorderThickness="5" Grid.Column="1" Margin="10,10,10,10">
            ...

I have read a lot of solution like this one and in short I have tested all the possibilities:

But nothing worked.

List item

Upvotes: -1

Views: 649

Answers (3)

Noam M
Noam M

Reputation: 3164

How I see it you have two options, in both you need to "restrained" the containing grid:

  1. As proposed in other answers set the containing grid width or max width, that will show the scroll bars only if the ListBoxItems heights are greater then the grid height:

    <Grid Height="50">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
     </Grid.ColumnDefinitions>
    <ListBox x:Name="lbxOptionsTab3" Background="{x:Null}" BorderBrush="Gainsboro" SelectionChanged="ListBox_SelectionChanged" HorizontalContentAlignment="Stretch" Margin="10" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.CanContentScroll="True">
        <ListBox.Effect>
            <DropShadowEffect ShadowDepth="4" Direction="330" Color="Black" Opacity="0.5" BlurRadius="4"/>
        </ListBox.Effect>
    </ListBox>
    <Border x:Name="Border2Tab3" BorderBrush="Gainsboro" Background="{x:Null}"  MinWidth="100" BorderThickness="5" Grid.Column="1" Margin="10,10,10,10"  >
</Grid>

  2. Create a "Super grid" with RowDefinitions that contains the ListBoxItems containing grid ("Sub grid"), the RowDefinitions will restrain the Sub grid (in the example, not more then 1/3 window height):

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

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

       <ListBox x:Name="lbxOptionsTab3"  ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.CanContentScroll="True">
            <ListBoxItem Content="ppp" />
            <ListBoxItem Content="ppp" />
            <ListBoxItem Content="ppp" />
            <ListBoxItem Content="ppp" />
            <ListBoxItem Content="ppp" />
            <ListBoxItem Content="ppp" />
            <ListBoxItem Content="ppp" />
            <ListBoxItem Content="ppp" />
            <ListBoxItem Content="ppp" />
            <ListBoxItem Content="ppp" />
            <ListBoxItem Content="ppp" />
        </ListBox>
     </Grid>
</Grid>

Upvotes: 1

paparazzo
paparazzo

Reputation: 45096

Look at the column definition 

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

Auto is take all the room you need
Try: 

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

Sample 

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="2*" />
    </Grid.ColumnDefinitions>
    <ListBox Grid.Row="0" Grid.Column="0" 
        ScrollViewer.HorizontalScrollBarVisibility="Visible" >
        <ListBoxItem Content="ppp this need to be long longer longest" />
        <ListBoxItem Content="ppp this need to be long longer longest" />
        <ListBoxItem Content="ppp this need to be long longer longest" />
        <ListBoxItem Content="ppp this need to be long longer longest" />
        <ListBoxItem Content="ppp this need to be long longer longest" />
        <ListBoxItem Content="ppp this need to be long longer longest" />
        <ListBoxItem Content="ppp this need to be long longer longest" />
        <ListBoxItem Content="ppp this need to be long longer longest" />
        <ListBoxItem Content="ppp this need to be long longer longest" />
        <ListBoxItem Content="ppp this need to be long longer longest" />
        <ListBoxItem Content="ppp this need to be long longer longest" />
        <ListBoxItem Content="ppp this need to be long longer longest" />
        <ListBoxItem Content="ppp this need to be long longer longest" />
        <ListBoxItem Content="ppp this need to be long longer longest" />
        <ListBoxItem Content="ppp this need to be long longer longest" />
        <ListBoxItem Content="ppp this need to be long longer longest" />
        <ListBoxItem Content="ppp this need to be long longer longest" />
        <ListBoxItem Content="ppp this need to be long longer longest" />
        <ListBoxItem Content="ppp this need to be long longer longest" />
        <ListBoxItem Content="ppp this need to be long longer longest" />
        <ListBoxItem Content="ppp this need to be long longer longest" />
        <ListBoxItem Content="ppp this need to be long longer longest" />
    </ListBox>
    <Border Grid.Row="0" Grid.Column="1" BorderThickness="5" Margin="10" BorderBrush="Red"/>
</Grid>

Upvotes: 0

Jan Sk&#225;la
Jan Sk&#225;la

Reputation: 415

I would try to set either width or max width of the listbox to some value, for example 100. If the scrollbar appears, then the problem is that the listbox has no limits for its width. So he extends as needed and thus doesn’t need to show its scrollbar at all.

Upvotes: 0

Related Questions