WPF: ItemsControl с полосой прокрутки (ScrollViewer)


129

Я следил за этим небольшим «учебником» о том, как добавить полосу прокрутки в ItemsControl, и он работает в режиме конструктора, но не тогда, когда я компилирую и выполняю программу (отображаются только первые несколько элементов и нет полосы прокрутки, чтобы просмотреть больше - даже когда для VerticalScrollbarVisibility установлено значение «Visible» вместо «Auto»).

Есть идеи, как это решить?


Это код, который я использую для отображения своих элементов (обычно я работаю с привязкой данных, но чтобы увидеть элементы в моем конструкторе, я добавил их вручную):

<ItemsControl x:Name="itemCtrl" Style="{DynamicResource UsersControlStyle}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Top">
            </StackPanel>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <uc:UcSpeler />
    <uc:UcSpeler />
    <uc:UcSpeler />
    <uc:UcSpeler />
    <uc:UcSpeler />
</ItemsControl>

А это мой шаблон:

<Style x:Key="UsersControlStyle" TargetType="{x:Type ItemsControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ItemsControl}">
                <Border SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                    <ScrollViewer VerticalScrollBarVisibility="Visible">
                        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Ответы:


263

Чтобы получить полосу прокрутки для ItemsControl, вы можете разместить ее ScrollViewerпримерно так:

<ScrollViewer VerticalScrollBarVisibility="Auto">
  <ItemsControl>
    <uc:UcSpeler />
    <uc:UcSpeler />
    <uc:UcSpeler />
    <uc:UcSpeler />
    <uc:UcSpeler />
  </ItemsControl>
</ScrollViewer>

17
Это так очевидно, когда вы видите это ... Поскольку я перехожу с Windows Forms, я часто застреваю в неправильном мышлении. Кажется, что WPF много ошибается ... +1.
Christoffer Lette,

3
Спасибо, очень помогли. Я согласен с Летте, что мой мозг WinForms изначально этого не «понимает».
itsmatt

1
Я просто попробовал это прямо здесь, но все равно не сработало. ItemsControl течет прямо из своего родительского контейнера, и ScrollBar вообще не отображается.
Ristogod

8
@Ristogod Если вы разместите ScrollViewer внутри чего-то, что позволяет его содержимому расти сколько угодно, например StackPanel, прокрутка не будет работать. Какой родительский контейнер? Попробуйте установить фиксированную высоту либо для ScrollViewer, либо для родительского элемента, это помогает?
Oskar

4
@Rod Для этого можно разместить ScrollViewer в DockPanel или Grid вместо StackPanel.
Оскар

80

Вам нужно изменить шаблон элемента управления вместо ItemsPanelTemplate:

<ItemsControl >
    <ItemsControl.Template>
        <ControlTemplate>
            <ScrollViewer x:Name="ScrollViewer" Padding="{TemplateBinding Padding}">
                <ItemsPresenter />
            </ScrollViewer>
        </ControlTemplate>
    </ItemsControl.Template>
</ItemsControl>

Возможно, ваш код не работает, потому что у StackPanel есть собственная функция прокрутки. Попробуйте использовать свойство StackPanel.CanVerticalScroll .


1
Боюсь, свойство StackPanel CanVerticalScroll не сработало.
Xuntar 08

StackPanel CanVerticalScroll не работал, но приведенный здесь пример кода работал у меня. Спасибо
Souvik Basu

Это работает. Я ищу средство просмотра прокрутки внутри, а не снаружи, потому что этого требует github.com/punker76/gong-wpf-dragdrop .
HelloSam

3

Поместите свой ScrollViewer в DockPanel и установите свойство DockPanel MaxHeight

[...]
<DockPanel MaxHeight="700">
  <ScrollViewer VerticalScrollBarVisibility="Auto">
   <ItemsControl ItemSource ="{Binding ...}">
     [...]
   </ItemsControl>
  </ScrollViewer>
</DockPanel>
[...]
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.