Member 13944101 Ответов: 2

Как реализовать полосу прокрутки на itemscontrol?

Привет ребята,
пожалуйста, у вас есть идея, как я могу добавить ScrollViewer в используемую StackPanel? Но это должно сработать :-)
Он объявляет мне исключение InvalidOperationException во всяком случае, я пытаюсь добавить ScrollViewer в View XAML.

Вот оригинальный вопрос, что я хочу сделать. Мне нужно только добавить полосу прокрутки:
WPF/MVVM - привязка коллекции дочерних элементов управления - переполнение стека[^]

Я загружаю коллекцию грузоотправителей, код будет создавать динамично одну кнопку для каждого члена коллекции. Я использую грузоотправителя BtnLabel собственность, как и текст кнопки.
Все мое представление XAML:

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

Graeme_Grant

Вы не. Вы вместо того, чтобы обернуть элемент управления ItemsControl.

Member 13944101

Любая идея, как добавить полосу прокрутки к упомянутому выше коду, приветствуется.

2 Ответов

Рейтинг:
2

Gerry Schmitz

элементы управления wpf - WPF: ItemsControl с полосой прокрутки (ScrollViewer) - переполнение стека[^]

Member 13944101

Нет, я видел эту ссылку много раз, но это было именно то, о чем я писал.
Когда я пытаюсь добавить <scrollviewer> В любом месте, он запускает упомянутое исключение. Я даже попробовал некоторые встроенные свойства StackPanel, связанные со прокруткой (например, CanHorizontallyScroll), но безуспешно.

Рейтинг:
11

Graeme_Grant

Чтобы помочь понять эту проблему, вот шаблоны по умолчанию (извлеченные с помощью MS Blend) 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 контроль:
<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. Оберните ItemsPresenter в ItemsControl Стиль (тело):
<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>

Примечание: Я удалил фиксированную высоту из StackPanel Контроль в системе ItemsPanelTemplate - если этого не сделать, то позже это вызовет проблемы с компоновкой и отладкой.

Member 13944101

Превосходно! Вторая версия работает :-) Сначала я не пробовал, но я счастлив, большое спасибо, братан :-)