WrapPanel как ItemPanel для ItemsControl
все еще дурачиться с 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 не будет здесь, а также поля могут быть болью (есть ли какие-либо поля, которые перекрываются?) поэтому вклад там будет оценен.
теперь к реальной проблеме. Это не работает, я получаю сообщение об ошибке:
'' объект не может быть добавлен в "WrapPanel". Не может явно изменить дочернюю коллекцию панели, используемой в качестве ItemsPanel для элемент управления ItemsControl. ItemsControl генерирует дочерние элементы для панели. Ошибка в системе объекта.Окна.Контроли.ItemsPresenter'.
Итак, каков наилучший способ сделать что-то подобное ( хотел бы иметь возможность просто бросать кнопки и другие элементы управления в ItemControl и выстраиваться в линию ). Было бы лучше поместить элементы управления в коллекцию некоторых добрый и повторяйте.
хотелось бы сделать это красиво, но мои навыки WPF все еще отсутствуют. Есть ли книги WPF, которые учат за пределами основ и показывают, как pro действительно это сделают?
3 ответов
возможно, вы захотите взглянуть на 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>
Не забывайте определение свойства clue IsItemsHost= "True". В противном случае ваш ItemsControl не будет показывать ваши элементы.
<ListBox ItemsSource="{Binding MyItemsSource}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate >
<WrapPanel IsItemsHost="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
вот еще одна простая альтернатива медленному решению DataGrid / xceed datagrid и WrapPanel. Может быть полезно, когда много данных или вся таблица только для редактирования. Использование ItemsControl + Grid.IsSharedSizeScope="True"
подробнее здесь: https://wpf.2000things.com/tag/issharedsizescope/ + На ItemsControl virutualization для производительности:виртуализация 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>