WPF: ItemsControl dengan scrollbar (ScrollViewer)

128

Saya mengikuti "tutorial" kecil ini tentang cara menambahkan scrollbar ke ItemsControl, dan berfungsi dalam tampilan Designer, tetapi tidak ketika saya mengkompilasi dan menjalankan program (hanya beberapa item pertama yang muncul, dan tidak ada scrollbar untuk melihat lebih banyak - bahkan ketika VerticalScrollbarVisibility diatur ke "Visible" bukannya "Auto").

Adakah cara untuk mengatasi ini?

Ini adalah kode yang saya gunakan untuk menunjukkan item saya (biasanya saya bekerja dengan Penyatuan Data, tetapi untuk melihat item di Desainer saya, saya menambahkannya secara manual):

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

Dan ini Template saya:

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

Jawaban:

261

Untuk mendapatkan bilah gulir untuk ItemsControl, Anda dapat menghostingnya di ScrollViewerseperti ini:

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

— Oskar
sumber

Sangat jelas ketika Anda melihatnya ... Karena saya berasal dari Windows Forms, saya sering menemukan diri saya terjebak dalam pola pikir yang salah. Tampaknya hak WPF banyak kesalahan ... +1.

— Christoffer Lette

Terima kasih, sangat membantu. Saya setuju dengan Lette bahwa otak WinForms saya tidak "mendapatkan" ini pada awalnya.

— itsmatt

Saya baru saja mencoba ini di sini dan itu masih tidak berhasil. The ItemsControl mengalir langsung dari wadah induknya dan tidak ada ScrollBar yang terlihat sama sekali.

— Ristogod

@Ristogod Jika Anda meng-host ScrollViewer di dalam sesuatu yang memungkinkan kontennya tumbuh sebanyak yang dibutuhkan, misalnya StackPanel, menggulir tidak akan berfungsi. Apa wadah induknya? Coba atur ketinggian tetap pada ScrollViewer atau orang tua, apakah itu membantu?

— Oskar

@Rod Anda dapat meng-host ScrollViewer di DockPanel atau Grid, bukan StackPanel untuk mencapai ini.

— Oskar

Anda harus memodifikasi templat kontrol alih-alih ItemsPanelTemplate:

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

Mungkin, kode Anda tidak berfungsi karena StackPanel memiliki fungsi gulir sendiri. Cobalah untuk menggunakan properti StackPanel.CanVerticallyScroll .

— Andrey Shvydky
sumber

Properti StackPanel CanVerticallyScroll tidak berfungsi, saya khawatir.

— Xuntar

StackPanel CanVerticallyScroll tidak bekerja tetapi contoh kode yang diberikan di sini berfungsi untuk saya. Terima kasih

— Souvik Basu

Ini bekerja. Saya mencari membuat scrollviewer di dalam, bukan di luar, karena github.com/punker76/gong-wpf-dragdrop membutuhkannya.

— HelloSam

Masukkan ScrollViewer Anda di DockPanel dan atur properti DockPanel MaxHeight

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

— Patatrack
sumber