Unable to scroll within WPF ListBox

Question

I have a horizontal ListBox in my WPF window, and each item within it contains another vertical ListBox within it.

I want to be able to scroll vertically either within the internal ListBox or the external one.

Scrolling horizontally is not an issue as it automatically lets me do it when the item list is bigger than the ListBox margins, however i failed to make either of my ListBoxes to be vertically scrollable.

I have tried using ScrollViewer.VerticalScrollBarVisibility="Visible" on either ListBox but the scrollbar is grayed out and unusable, even though there are items outside the margins of the ListBox.

My XAML:

<StackPanel>
    <Grid Margin="100">
        <ListBox x:Name = "ColumnList" ItemsSource="{Binding Board.Columns}" VerticalAlignment="Top" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border BorderBrush = "Black" MinWidth="200" MaxWidth="200" MinHeight="300" MaxHeight="300" ScrollViewer.VerticalScrollBarVisibility="Visible">
                        <StackPanel>
                            <TextBox Text = "{Binding Name}" IsReadOnly="True"/>
                            <ListBox x:Name="TasksList" ItemsSource="{Binding Tasks}" MouseDoubleClick="TasksList_MouseDoubleClick" ScrollViewer.VerticalScrollBarVisibility="Visible" SelectedItem="{Binding Path=DataContext.Task,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}">
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <Border BorderBrush = "Black" BorderThickness="2">
                                            <StackPanel>
                                                <TextBox Text = "{Binding Title}" IsReadOnly="True" />
                                                <TextBox Text="{Binding Description}" IsReadOnly="True"/>
                                                <TextBox Text = "{Binding CreationDate}" IsReadOnly="True" />
                                                <TextBox Text="{Binding DueDate}" IsReadOnly="True"/>
                                                <TextBox Text = "{Binding EmailAssignee}" IsReadOnly="True" />
                                            </StackPanel>
                                        </Border>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
            <ListBox.ItemsPanel >
                <ItemsPanelTemplate >
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
    </Grid>
</StackPanel>

You have to give the inner ListBox fixed dimensions in order to enable the ScrollViewer. — BionicCode

ASh ASh · Accepted Answer · 2020-06-11T18:12:18

you have to change outer ListBox ItemTemplate - use Grid instead of StackPanel. Inner ListBox in StackPanel get the height to display all items, so scroll can't be activated, even if those items are not seen on the screen.

<DataTemplate>
    <Border BorderBrush = "Black" 
            MinWidth="200" MaxWidth="200" 
            MinHeight="300" MaxHeight="300"
            ScrollViewer.VerticalScrollBarVisibility="Visible">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition/>
            </Grid.RowDefinitions>

            <TextBox Text = "{Binding Name}" IsReadOnly="True"/>

            <ListBox x:Name="TasksList" Grid.Row="1">
                 <!--omitted for clarity-->   
            </ListBox>
        </Grid>
    </Border>
</DataTemplate>

Unable to scroll within WPF ListBox

1 Answers