Як отримати вертикальну смугу прокрутки в моєму ListBox?

У наведеному нижче прикладі у мене є ListBox з десятками імен шрифтів.

Я міг би подумати, що на ньому автоматично буде вертикальна смуга прокрутки, щоб ви могли вибрати БУДЬ-ЯКИЙ шрифт, а не лише перші у списку, але цього немає.

Тож я додав "ScrollViewer", і справа "Область прокрутки" розміщується праворуч, але в області прокрутки немає смуги прокрутки, щоб Ви могли прокручувати (!).

Чому смуга прокрутки не є автоматичною і як я змушую її мати смугу прокрутки?

<StackPanel Name="stack1">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <ScrollViewer>
            <ListBox Grid.Row="0" Name="lstFonts" Margin="3"  ItemsSource="{x:Static Fonts.SystemFontFamilies}"/>
        </ScrollViewer>
    </Grid>
</StackPanel>

Проблема вашого рішення полягає в тому, що ви розміщуєте смугу прокрутки навколо ListBox, де ви, ймовірно, хочете помістити її всередину ListBox.

Якщо ви хочете примусити смугу прокрутки у вашому ListBox, використовуйте властивість ScrollBar.VerticalScrollBarVisibility.

<ListBox 
    ItemsSource="{Binding}" 
    ScrollViewer.VerticalScrollBarVisibility="Visible">
</ListBox>

Якщо встановити для цього значення значення Авто, панель прокрутки з’явиться за необхідності.

ListBoxвже містить ScrollViewer. За замовчуванням ScrollBarвідображається, коли вмісту більше, ніж місця. Але деякі контейнери самі змінюють розмір, щоб вмістити їх вміст (наприклад StackPanel), тому ніколи не буває "більше вмісту, ніж простору". У таких випадках ListBoxзавжди надається стільки місця, скільки потрібно для вмісту.

Для того, щоб розрахувати умови вмісту більше, ніж простору, слід знати розмір. Переконайтеся, що ваш ListBoxрозмір обмежений, або явно встановивши розмір на самому ListBoxелементі, або на панелі хоста.

Якщо панель хоста вертикальна, StackPanelі ви хочете, VerticalScrollBarви повинні встановити висоту на ListBoxсобі. Для інших типів контейнерів, наприклад Grid, контейнер ListBoxможе бути обмежений. Наприклад, ви можете змінити свій оригінальний код таким чином:

<Grid Name="grid1">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <ListBox Grid.Row="0" Name="lstFonts" Margin="3"
                 ItemsSource="{x:Static Fonts.SystemFontFamilies}"/>
    </Grid>
</Grid>

Зверніть увагу, що важливим є не лише безпосередній контейнер. У вашому прикладі безпосереднім контейнером є a Grid, але оскільки Gridвін міститься в a StackPanel, зовнішній StackPanelрозширено, щоб вмістити його безпосередню дитину Grid, так що ця дитина може розширитись, щоб вмістити свою дитину (the ListBox).

Якщо ви обмежите висоту в будь-якій точці - встановивши висоту ListBox, встановивши висоту внутрішнього Gridабо просто зробивши зовнішній контейнер a Grid- тоді вертикальна смуга прокрутки автоматично з’явиться, коли буде занадто багато елементів списку, щоб поміститися в контролі.

Я додав "Висоту" до мого ListBox, і він красиво додав смугу прокрутки.

Панель прокрутки автоматично додається до поля Список, якщо для її видимості не встановлено значення Прихований. Всякий раз, коли розмір елементів списку перевищує розмір, який може відображатися всередині вікна списку, під час виконання можна побачити вертикальне або горизонтальне поле списку.

У моєму випадку кількість елементів у ListBox є динамічною, тому я не хотів використовувати властивість Height. Натомість я використав MaxHeight, і він працює чудово. Прокрутка з’являється, коли вона заповнює місце, яке я для неї виділив.

У мене була та ж проблема, у мене був ComboBox, за яким слідував ListBox у StackPanel, а смужка прокрутки для ListBox не відображалася. Я вирішив це, помістивши їх у DockPanel. Я встановив ComboBox DockPanel.Dock = "Top" і дозволив ListBox заповнити залишок місця.

Скролер XAML ListBox - Windows 10 (UWP)

<Style TargetType="ListBox">
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Visible"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Visible"/>
</Style>