Динамическое добавление кнопок в ItemsControl

Question

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

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

Если один столбец

1234

Если два столбца:

1 23 4

У меня есть следующий код:

ItemsControl:

<Grid>...
<ItemsControl ItemsSource="{Binding buttonsViewModelColl}"
           ItemsPanel="{StaticResource WrapPanelTemplateA}"
         ItemTemplate="{StaticResource ButtonsDataTempleteA}" Width="{Binding ActualWidth, ElementName=<OuterGrid>}" Grid.Row="2" HorizontalAlignment="Center"/>     
</Grid>

WrapPannelTemplete:

<ItemsPanelTemplate x:Key="WrapPanelTemplate">
             <WrapPanel/>
         </ItemsPanelTemplate>

DataTempleteForButton:

<DataTemplate x:Key="ButtonsDataTempleteA">
             <Button 
                            Content="{Binding Path=Text}" 
                            IsEnabled="{Binding Path=IsEnabled}"
                             Style="{StaticResource StyleButtonA}" 
                            FontFamily="Segoe UI Semibold"
                             HorizontalAlignment="Left" />
         </DataTemplate>

Проблема в том, что при рендеринге видна только одна или две кнопки.Если я установлю вертикальную ориентацию WrapPannel, все получится, но они не будут автоматически переноситься.Только если я перетяну и увеличу ширину окна, все будет видно.Также последовательность не является правильной:

Они имеют вид:

ACBD

Любые идеи.

Другой вопрос: есть ли способ увеличить ширину столбца внутренней сетки на основе высоты внешней сетки во время выполнения в XAML?

Answer 1

Я подозреваю, что это как-то связано с шириной, которую разрешает ItemsControl.Работает ли это, если вы устанавливаете WrapPanel's Width вручную?

Что касается вашего последнего вопроса, задав ширину столбца в зависимости от высоты сетки, вы можете просто привязать ее.

<ColumnDefinition Width="{Binding ElementName=OuterGrid, Path=ActualHeight}" />

Есливам нужно выполнить вычисление для этого значения, я обычно использую конвертер, который принимает параметр высоты сетки и преобразует его в любое значение, которое я хочу.На самом деле у меня есть MathConverter, который используется для такого рода вещей, потому что мне лень писать свой собственный конвертер для каждого вычисления привязки, который я хочу, и код можно найти здесь

Его можно использовать как:

Width="{Binding ElementName=OuterGrid, Path=ActualHeight,
                Converter={StaticResource MathConverter},
                ConverterParameter=@VALUE/2}"

На самом деле, вы, вероятно, можете использовать MathConver для установки Width вашего WrapPanel, и он должен работать правильно.

Answer 2

Я думаю, что вам нужно UniformGrid, а не WrapPanel, потому что вы хотите, чтобы общее количество кнопок, высота всего контейнера и количество столбцов на панели были взаимозависимыми.Wrap Panel не может управлять третьим фактором (т. Е. Количеством столбцов в панели).

UniformGrid имеет свойства Rows и Columns, которые являются полностью привязанными.Они могут быть связаны с указанными выше тремя факторами, и преобразователь нескольких значений может решить, какое количество строк и столбцов отображать, основываясь на некотором настраиваемом эвристическом алгоритме.

Надеюсь, это поможет вам в правильном направлении.