WPF: ItemsControl พร้อมแถบเลื่อน (ScrollViewer)


128

ฉันติดตาม"tutorial" ขนาดเล็กนี้เกี่ยวกับวิธีเพิ่ม scrollbar ไปยัง ItemsControl และใช้งานได้ในมุมมองออกแบบ แต่ไม่ใช่เมื่อฉันรวบรวมและเรียกใช้โปรแกรม (เฉพาะรายการแรก ๆ ที่ปรากฏขึ้นและไม่มีแถบเลื่อนเพื่อดูเพิ่มเติม - แม้แต่ เมื่อ VerticalScrollbarVisibility ตั้งค่าเป็น "มองเห็นได้" แทน "อัตโนมัติ")

ความคิดเกี่ยวกับวิธีการแก้ปัญหานี้?


นี่คือรหัสที่ฉันใช้เพื่อแสดงรายการของฉัน (ปกติฉันทำงานกับ Databinding แต่เพื่อดูรายการใน Designer ของฉันฉันเพิ่มด้วยตนเอง):

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

คำตอบ:


261

ในการรับแถบเลื่อนสำหรับItemsControlคุณสามารถโฮสต์ในScrollViewerลักษณะดังนี้:

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

16
มันชัดเจนมากเมื่อคุณเห็นมัน ... เมื่อฉันมาจาก Windows Forms ฉันมักพบว่าตัวเองติดอยู่ในความคิดที่ผิด ดูเหมือนว่าสิทธิ์ WPF ผิดมาก ... +1
Christoffer Lette

3
ขอบคุณมากที่เป็นประโยชน์ ฉันเห็นด้วยกับ Lette ว่าสมอง WinForms ของฉันไม่ "รับ" สิ่งนี้ในตอนแรก
itsmatt

1
ฉันลองอันนี้ตรงนี้แล้วก็ยังใช้ไม่ได้ ItemsControl จะไหลออกจากคอนเทนเนอร์หลักและจะไม่มีแถบเลื่อนปรากฏขึ้นเลย
Ristogod

8
@Ristogod หากคุณโฮสต์ ScrollViewer ภายในสิ่งที่ทำให้เนื้อหาเติบโตได้มากเท่าที่ต้องการตัวอย่างเช่น StackPanel การเลื่อนจะไม่ทำงาน คอนเทนเนอร์หลักคืออะไร ลองตั้งค่าความสูงคงที่ใน ScrollViewer หรือพาเรนต์สิ่งนั้นช่วยได้ไหม?
Oskar

4
@Rod คุณสามารถโฮสต์ ScrollViewer ใน DockPanel หรือ Grid แทน StackPanel เพื่อให้ได้สิ่งนี้
Oskar

79

คุณต้องแก้ไขเทมเพลตการควบคุมแทน ItemsPanelTemplate:

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

บางทีรหัสของคุณอาจไม่ทำงานเพราะ StackPanel มีฟังก์ชั่นการเลื่อนของตัวเอง ลองใช้คุณสมบัติStackPanel.CanVerticallyScroll


1
คุณสมบัติ StackPanel CanVerticallyScroll ไม่ทำงานฉันกลัว
Xuntar

StackPanel CanVerticallyScroll ไม่ทำงาน แต่ตัวอย่างโค้ดที่ให้ไว้ที่นี่ใช้ได้สำหรับฉัน ขอบคุณ
Souvik Basu

วิธีนี้ใช้ได้ผล ฉันกำลังมองหาการทำ scrollviewer ภายในแทนที่จะออกไปข้างนอกเพราะgithub.com/punker76/gong-wpf-dragdropต้องการมัน
HelloSam

3

วาง ScrollViewer ของคุณใน DockPanel และตั้งค่าคุณสมบัติ DockPanel MaxHeight

[...]
<DockPanel MaxHeight="700">
  <ScrollViewer VerticalScrollBarVisibility="Auto">
   <ItemsControl ItemSource ="{Binding ...}">
     [...]
   </ItemsControl>
  </ScrollViewer>
</DockPanel>
[...]
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.