WPF: ItemsControl con barra di scorrimento (ScrollViewer)

128

Ho seguito questo piccolo "tutorial" su come aggiungere una barra di scorrimento a ItemsControl, e funziona in vista Designer, ma non quando compilo ed eseguo il programma (vengono visualizzati solo i primi elementi e nessuna barra di scorrimento per visualizzarne altri - anche quando VerticalScrollbarVisibility è impostato su "Visibile" anziché "Auto").

Qualche idea su come risolverlo?

Questo è il codice che uso per mostrare i miei articoli (normalmente lavoro con Databinding, ma per vedere gli articoli nel mio Designer li ho aggiunti 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 questo è il mio modello:

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

— Xuntar
fonte

Risposte:

261

Per ottenere una barra di scorrimento per un ItemsControl, puoi ospitarla in ScrollViewerquesto modo:

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

— Oskar
fonte

È così ovvio quando lo vedi ... Dato che vengo da Windows Form, mi trovo spesso bloccato nella mentalità sbagliata. Sembra che i diritti del WPF siano molti torti ... +1.

— Christoffer Lette,

Grazie molto utile. Concordo con Lette sul fatto che il mio cervello WinForms inizialmente non lo capisce.

— itsmatt

Ho appena provato questo qui e ancora non ha funzionato. ItemsControl scorre direttamente dal contenitore principale e non è visibile alcuna barra di scorrimento.

— Ristogod,

@Ristogod Se si ospita ScrollViewer all'interno di qualcosa che consente al contenuto di crescere quanto necessario, ad esempio StackPanel, lo scorrimento non funzionerà. Qual è il contenitore principale? Prova a impostare un'altezza fissa su ScrollViewer o sul genitore, ti aiuta?

— Oskar,

@Rod È possibile ospitare ScrollViewer in un DockPanel o in una griglia anziché in uno StackPanel per raggiungere questo obiettivo.

— Oskar,

Devi modificare il modello di controllo invece di ItemsPanelTemplate:

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

Forse, il tuo codice non funziona perché StackPanel ha la propria funzionalità di scorrimento. Prova a utilizzare la proprietà StackPanel.CanVerticallyScroll .

— Andrey Shvydky
fonte

Temo che la proprietà StackPanel CanVerticallyScroll non funzionasse.

— Xuntar,

StackPanel CanVerticallyScroll non ha funzionato, ma l'esempio di codice fornito qui ha funzionato per me. Grazie

— Souvik Basu,

Questo funziona Sto cercando di far scorrere scrollviewer all'interno invece che all'esterno, perché github.com/punker76/gong-wpf-dragdrop lo richiede.

— HelloSam,

Inserisci ScrollViewer in DockPanel e imposta la proprietà DockPanel MaxHeight

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

— patatrack
fonte