Динамически добавлять кнопки в расположение таблиц в WPF

Question

Я хотел бы составить таблицу с двумя столбцами и добавить кнопки к таблице во время выполнения.

что я сделал, так это определил вложенные StackPanels.

        <StackPanel MinWidth="500" MaxWidth="800" MaxHeight="400" HorizontalAlignment="Center">
            <TextBlock HorizontalAlignment="Center" Foreground="Black" Margin="0,0,0,5" FontSize="20">Some Title</TextBlock>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Button Content="" MinWidth="100" MinHeight="100" Margin="10,0,0,10"></Button>
                <Button Content="" MinWidth="100" MinHeight="100" Margin="10,0,0,10"></Button>
            </StackPanel>
        </StackPanel>

Это правильный старт, или есть лучшая и более простая договоренность?

Answer 1

Вы можете использовать реализацию представления модели с ListView и связать ее с коллекцией элементов, имеющих соответствующий обработчик для кнопки:

WPF:

<ListView ItemsSource={Binding MyItems}>
     <ListView.View>
          <GridView>
               <GridViewColumn Header="Name" DisplayMemberBinding={Binding Name}></GridViewColumn>
               <GridViewColumn Header="Button">
                    <GridViewColumn.CellTemplate>
                         <DataTemplate>
                              <Button Command={Binding ButtonPress}>Click me</Button>
                         </DataTemplate>
                    </GridViewColumn.CellTemplate>
               </GridViewColumn>
          </GridView>
     </ListView.View>
</ListView>

Вы также можете установить ItemsSource внутри файла.cs для вашего представления, в противном случае используйте класс ViewModel для обработки вашего представления и создания ObservableCollection<MyItemWrapper> свойство, которое будет содержать все элементы таблицы.

ViewModel:

public class MyViewModel
{
    private ObservableCollection<MyItemWrapper> _myItems;

    public MyViewModel()
    {
        _myItems = new ObservableCollection<MyItemWrapper>();
        //// add your initial items
    }

    public ObservableCollection<MyItemWrapper> MyItems
    {
        get { return _myItems; }
    }
}

Посмотреть:

public partial class MyView : UserControl
{
    public MyView(MyViewModel viewModel)
    {
        DataContext = viewModel;
        InitializeComponents()
    }
}

MyItem и MyItemWrapper

public class MyItem
{
    public string Name { get; set; }
    public object Data { get; set; }
}

public class MyItemWrapper
{
    private MyItem _item;
    public MyItemWrapper(MyItem item)
    {
        _item = item;
        ButtonPress = new DelegateCommand<object>(OnButtonPress);
    }

    public string Name
    {
        get { return _item.Name; }
    }

    public DelegateCommand<object> ButtonPress { get; private set; }

    private void OnButtonPress(object args)
    {
        System.Diagnostics.Debug.WriteLine("Button pressed for: " + Name);
    }
}

Это в конечном итоге позволит добавлять / удалять элементы во время выполнения, используя MyItems внутри модели представления, и ваш список всегда будет обновляться автоматически.

Answer 2

Я получил его с помощью WrapPanel, и я поделюсь тем, что я сделал, Спасибо за Влада за обязательную часть:

<ListBox ItemsSource="{Binding CartItemC.CartItems}" >
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel x:Name="wrapPanel" MaxWidth="300" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <WrapPanel MaxWidth="300">
                <Button Command="{Binding ButtonPress}">Click me</Button>
            </WrapPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Answer 3

Вы упомянули, что хотите динамически, ну, вы не хотите использовать StackPanel как вы в конечном итоге поддерживает width а также height элементов управления внутри него. Если вы хотите, чтобы элементы управления автоматически изменяли свой размер.

Лучшее решение - использовать Grid если вы действительно хотите составить таблицу с двумя столбцами.

Посмотрите на этот пример.

Образец кода

<Grid>
 <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
    <RowDefinition Height="28" />
 </Grid.RowDefinitions>
 <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="200" />
 </Grid.ColumnDefinitions>