在WPF中動態添加按鈕到表格排列

Question

我想創建一個2列表格排列，並在運行時向表格添加按鈕。

我所做的是定義與此類似的嵌套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

你提到過你需要它動態的，你不想使用StackPanel，因爲你最終會保持其中的控件的width和height。假設您希望控件自動調整其大小。

最好的解決方案是使用Grid，如果你真的想做一個2列表安排。

看看example。

示例代碼

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

Answer 2

你可以使用一個模型 - 視圖實現與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> 

您還可以設置.cs f中的ItemsSource也可以使用ViewModel類來處理您的視圖並創建一個將包含所有表項的ObservableCollection<MyItemWrapper>屬性。

視圖模型：

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 3

我得到了它使用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>