WPF: ItemsControl com barra de rolagem (ScrollViewer)

128

eu segui este pequeno "tutorial" sobre como adicionar uma barra de rolagem a um ItemsControl, e ele funciona na visualização Designer, mas não quando eu compilo e executo o programa (apenas os primeiros itens aparecem e nenhuma barra de rolagem para ver mais - até quando VerticalScrollbarVisibility estiver definido como "Visible" em vez de "Auto").

Alguma idéia de como resolver isso?

Este é o código que eu uso para mostrar meus itens (normalmente eu trabalho com ligação de dados, mas para ver os itens no meu Designer eu os adicionei manualmente):

<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>

E este é o meu modelo:

<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>
wpf wpf-controls itemscontrol scrollviewer Xuntar
fonte

Respostas:

261

Para obter uma barra de rolagem para uma ItemsControl, você pode hospedá-la da ScrollViewerseguinte maneira:

<ScrollViewer VerticalScrollBarVisibility="Auto">
  <ItemsControl>
    <uc:UcSpeler />
    <uc:UcSpeler />
    <uc:UcSpeler />
    <uc:UcSpeler />
    <uc:UcSpeler />
  </ItemsControl>
</ScrollViewer>
Oskar
fonte
16
É tão óbvio quando você o vê ... Como eu venho do Windows Forms, muitas vezes me vejo preso à mentalidade errada. Parece que o WPF corrige muitos erros ... +1.
Christoffer Lette
3
Obrigado, muito útil. Concordo com Lette que meu cérebro WinForms não "entende" isso inicialmente.
itsmatt
1
Eu apenas tentei isso aqui e ainda não funcionou. O ItemsControl flui diretamente de seu contêiner pai e nenhum ScrollBar é visível.
precisa saber é o seguinte
8
@Ristogod Se você hospedar o ScrollViewer dentro de algo que permita que seu conteúdo cresça o necessário, por exemplo, um StackPanel, a rolagem não funcionará. Qual é o contêiner pai? Tente definir uma altura fixa no ScrollViewer ou no pai, isso ajuda?
Oskar
4
@ Rod Você pode hospedar o ScrollViewer em um DockPanel ou Grid em vez de um StackPanel para conseguir isso.
Oskar
79

Você precisa modificar o modelo de controle em vez de ItemsPanelTemplate:

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

Talvez o seu código não funcione porque o StackPanel possui uma funcionalidade de rolagem própria. Tente usar a propriedade StackPanel.CanVerticallyScroll .

Andrey Shvydky
fonte
1
A propriedade StackPanel CanVerticallyScroll não funcionou, receio.
Xuntar
O StackPanel CanVerticallyScroll não funcionou, mas o exemplo de código fornecido aqui funcionou para mim. Obrigado
Souvik Basu
Isso funciona. Estou procurando fazer o scrollviewer dentro e não fora, porque o github.com/punker76/gong-wpf-dragdrop exige.
HelloSam
3

Coloque seu ScrollViewer em um DockPanel e defina a propriedade DockPanel MaxHeight

[...]
<DockPanel MaxHeight="700">
  <ScrollViewer VerticalScrollBarVisibility="Auto">
   <ItemsControl ItemSource ="{Binding ...}">
     [...]
   </ItemsControl>
  </ScrollViewer>
</DockPanel>
[...]
Patatrack
fonte