如何在itemscontrol上实现滚动条？ [英] How to implement scrollbar on itemscontrol?

问题描述

大家好，

请您知道如何将ScrollViewer添加到StackPanel？但它必须工作:-)

它告诉我一个InvalidOperationException无论如何我尝试将ScrollViewer添加到View XAML中。



这是一个原始问题，我想做什么。我只需要添加滚动条：

WPF / MVVM - 子控件的绑定集合 - Stack Overflow [ ^ ]



我正在加载Shippers集合，代码将为每个集合成员动态创建一个按钮。我使用Shipper属性BtnLabel作为按钮文本。

我的整个XAML查看：

Hello guys,
please do you have idea how could i add ScrollViewer to used StackPanel? But it must work :-)
It announces me an InvalidOperationException anyhow i try to add ScrollViewer into View XAML.

Here is a original question what i want to do. I only need to add scroll bar:
WPF/MVVM - binding collection of child controls - Stack Overflow[^]

I am loading Shippers collection, code will create dynamicly one button for each collection member. I use Shipper property BtnLabel as button text.
My whole XAML View:

<Window x:Class="EnterEventTextBox.DataView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:EnterEventTextBox"
        mc:Ignorable="d" Background="Black"
        Title="DataView" Height="450" Width="800"
        xmlns:cal="http://www.caliburnproject.org"
        >
    <StackPanel>
        <ItemsControl ItemsSource="{Binding Shippers}" Height="100" Width="300" Margin="80,70,412,249">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal"></WrapPanel>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate DataType="{x:Type Button}">
                    <StackPanel>
                        <Button Background="Red" Content="{Binding Path=BtnLabel}" Margin="0,0,5,5"></Button>
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </StackPanel>
</Window>

我尝试过：



添加滚动到不同的标签。重新组织此代码，以便允许我在那里添加ScrollViewer。

What I have tried:

Add scrolling to different tags. Reorganize this code in order it allow me to add ScrollViewer there.

推荐答案

wpf controls - WPF：ItemsControl with scrollbar（ScrollViewer） - Stack Overflow [ ^ ]

为了帮助理解问题，这里是默认模板（使用MS Blend提取） ItemsControl ：

To help understand the problem, here are the default templates (extracted using MS Blend) of the ItemsControl:

<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
    <StackPanel IsItemsHost="True"/>
</ItemsPanelTemplate>
<Style x:Key="ItemsControlStyle1" TargetType="{x:Type ItemsControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ItemsControl}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                    <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

ItemsPanel 必须是容器控件。通过将 StackPanel 放在 ScrollViewer 中， ItemsControl 是试图将 ItemsPresenter 内容放在 ScrollViewer 内容中。您看到的错误是 ScrollViewer 内容中有多个控件，其中的控件已经是 StackPanel - 无效。



所以，要修复，你有两种选择：



1.包裹 ItemsControl 在 ScrollViewer 控件内：

The ItemsPanel must be a container control. By putting the StackPanel inside a ScrollViewer, the ItemsControl is attempting to put the ItemsPresenter content iside the ScrollViewer Content. The error that you are seeing is that more than one control is inside the ScrollViewer content where their is already a StackPanel - invalid.

So, to fix, you have two options:

1. Wrap the ItemsControl inside a ScrollViewer control:

<ScrollViewer>
    <ItemsControl Name="ic1" Height="60" Width="300" Margin="80,70,412,249">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate DataType="{x:Type Button}">
                <Button Background="Red" Content="{Binding}" Margin="0,0,5,5"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <system:String>Item #1</system:String>
        <system:String>Item #2</system:String>
        <system:String>Item #3</system:String>
        <system:String>Item #4</system:String>
        <system:String>Item #5</system:String>
    </ItemsControl>
</ScrollViewer>

**这是我之前提到的解决方案。



2.在 ItemsControl 样式（正文）中包装 ItemsPresenter ：

** This is the solution that I mentioned earlier above.

2. Wrap the ItemsPresenter in the ItemsControl Style (body):

<Window.Resources>
    <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
        <StackPanel IsItemsHost="True"/>
    </ItemsPanelTemplate>
    <Style x:Key="ItemsControlStyle1" TargetType="{x:Type ItemsControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ItemsControl}">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                        <ScrollViewer VerticalScrollBarVisibility="Auto">
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <ItemsControl ItemsPanel="{DynamicResource ItemsPanelTemplate1}" Style="{DynamicResource ItemsControlStyle1}">
        <ItemsControl.ItemTemplate>
            <DataTemplate DataType="{x:Type Button}">
                <Button Background="Red" Content="{Binding}" Margin="0,0,5,5"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <system:String>Item #1</system:String>
        <system:String>Item #2</system:String>
        <system:String>Item #3</system:String>
        <system:String>Item #4</system:String>
        <system:String>Item #5</system:String>
    </ItemsControl>
</Grid>

注意：我已经从 ItemsPanelTemplate 中的 StackPanel 控件中移除了固定高度 - 如果没有完成，则会导致稍后的布局和调试问题。

Note: I have removed the fixed height from the StackPanel Control in the ItemsPanelTemplate - if not done, it will cause layout and debugging issues later on.

这篇关于如何在itemscontrol上实现滚动条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！