WrapPanel как ItemPanel для ItemsControl - PullRequest
29 голосов
/ 28 июня 2010

Все еще дурачусь с WPF и учусь на ходу. Попытка создания динамической группы элементов управления (в основном кнопок, но может включать флажки и другие).

Я понятия не имел, как лучше всего это сделать, поэтому я попытался создать стиль ItemsControl, а затем добавить элементы в ItemsPresenter внутри WrapPanel. Вскоре понял, что элементы не будут обернуты, потому что они фактически не были внутри WrapPanel, если я не поместил их как ItemsHost. Как это:

<Style x:Key="ButtonPanelGroup" TargetType="{x:Type ItemsControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ItemsControl}">
                <Border CornerRadius="5"
                        BorderBrush="{StaticResource DarkColorBrush}"
                        BorderThickness="1"
                        Margin="5">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>

                        <WrapPanel IsItemsHost="True" FlowDirection="LeftToRight">
                            <ItemsPresenter />
                        </WrapPanel>

                        <ContentPresenter ContentSource="Name" Grid.Row="1" />

                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Обратите внимание, что это незавершенная работа, и мне еще нужно реализовать множество стилевых эффектов. Здесь я использую это:

<UniformGrid Rows="1">
    <ItemsControl Name="Group1" Style="{StaticResource ButtonPanelGroup}">
        <Button>Button1</Button>
        <Button>Button2</Button>
        <CheckBox>TickBox</CheckBox>
    </ItemsControl>

    <ItemsControl Name="Group2" Style="{StaticResource ButtonPanelGroup}">
        <Button>Button3</Button>
        <Button>Button4</Button>
        <Button>Button5</Button>
    </ItemsControl>

    <ItemsControl Name="Group3" Style="{StaticResource ButtonPanelGroup}">
        <Button>Button6</Button>
        <Button>Button7</Button>
        <Button>Button8</Button>
    </ItemsControl>
</UniformGrid>

Также обратите внимание, что это все еще в стадии разработки, так как UniformGrid не будет подходить сюда, а также поля могут быть болезненными (есть ли поля, которые перекрываются?), Поэтому ввод будет оценен.

Теперь к реальной проблеме. Это не работает, я получаю сообщение об ошибке:

Объект ItemsPresenter нельзя добавить в WrapPanel. Не могу явно изменить коллекцию Children для Panel, которая используется как ItemsPanel для ItemsControl. ItemsControl генерирует дочерние элементы для Panel. ошибка в объекте 'System.Windows.Controls.ItemsPresenter'.

Итак, каков наилучший способ сделать что-то подобное (хотелось бы иметь возможность просто бросать кнопки и другие элементы управления в ItemControl и составить очень хороший набор). Было бы лучше поместить элементы управления в какую-то коллекцию и повторять.

Хотелось бы сделать это красиво, но мои навыки в WPF все еще отсутствуют. Есть ли в WPF книги, которые преподносят не только основы, но и показывают, как профессионалы действительно это делают?

Ответы [ 3 ]

47 голосов
/ 28 июня 2010

Возможно, вы захотите взглянуть на свойство ItemsPanel :

Получает или задает шаблон, который определяет панель, управляющую макетом элементов.

Пример:

<ItemsControl>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

И вы можете установить его в стиле следующим образом:

<Style TargetType="ItemsControl">
    <Setter Property="ItemsPanel">
      <Setter.Value>
            <ItemsPanelTemplate>
                <WrapPanel />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>
3 голосов
/ 08 марта 2016

Не забудьте определение ключевого свойства IsItemsHost = "True". В противном случае ваш ItemsControl не покажет ваши товары.

<ListBox ItemsSource="{Binding MyItemsSource}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate >
                <WrapPanel IsItemsHost="True"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ListBox>
0 голосов
/ 26 июля 2018

Вот еще одна простая альтернатива медленному DataGrid / xceed datagrid и решению WrapPanel. Может быть полезно, когда много данных или целая таблица только для редактирования. Использование ItemsControl + Grid.IsSharedSizeScope = "True"

Больше информации здесь: https://wpf.2000things.com/tag/issharedsizescope/ + Виртуализация ItemsControl для производительности: Виртуализация ItemsControl?

<Grid Grid.IsSharedSizeScope="True" Margin="0,30,0,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="50" Width="Auto" SharedSizeGroup="Id" />
            <ColumnDefinition MinWidth="50" Width="Auto" SharedSizeGroup="Time"  />
        </Grid.ColumnDefinitions>
        <Border Grid.Column="0" >
            <TextBlock VerticalAlignment="Center" TextWrapping="NoWrap" Text="Header1" />
        </Border>
        <Border Grid.Column="1" >
            <TextBlock VerticalAlignment="Center" TextWrapping="NoWrap" Text="Header2" />
        </Border>
    </Grid>

    <ItemsControl Grid.Row="1" ItemsSource="{Binding RunInstance.ConcentrationGradient.Steps}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition MinWidth="50" Width="Auto" SharedSizeGroup="Id" />
                        <ColumnDefinition MinWidth="50" Width="Auto" SharedSizeGroup="Time" />
                    </Grid.ColumnDefinitions>
                    <Border Grid.Column="0">
                        <TextBlock VerticalAlignment="Center" TextWrapping="NoWrap" Text="{Binding Index, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" />
                    </Border>
                     <Border Grid.Column="1">
                        <TextBlock VerticalAlignment="Center" TextWrapping="NoWrap" Text="{Binding Time, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" />
                    </Border>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>
...