【问题标题】:Bind Collection to StackPanel将集合绑定到 StackPanel
【发布时间】:2011-03-22 08:47:55
【问题描述】:

我想获取一个对象集合并将其绑定到 StackPanel,所以基本上如果集合有 4 个元素,那么在堆栈面板内部应该生成 4 个按钮。

我试过这个......但我不认为它是正确的方法。我过去使用 DataTemplated 来做这种想法。如果我错了,请纠正我。

这是我的假模特

public class MockModel
{
   public ObservableCollection<MockNode> Nodes;

   public MockModel()
   {
      Nodes = new ObservableCollection<MockNode>();
   }
}

public class MockNode
{
   public MockNode()
   {
   }

   private string itemname;
   public string ItemName
   {
      get { return this.itemname; }
      set { this.itemname = value; }
   }
}

在代码中我这样设置 DataContext...

// Init Model
MockModel myModel = new MockModel();

for (int i = 0; i < 4; i++)
{
   MockNode mn = new MockNode();
   mn.ItemName = String.Format("Node {0}", i);
   myModel.Nodes.Add(mn);
}
// Set DataContext for StackPanel
Stack.DataContext = myModel.Nodes;

还有 xaml

<StackPanel x:Name="tStack">
   <ItemsControl ItemsSource="{Binding Nodes}">
      <ItemsControl.Template>
         <ControlTemplate>
            <Button Content="{Binding ItemName}"/>
         </ControlTemplate>
      </ItemsControl.Template>
   </ItemsControl>
</StackPanel>

它确实绑定了,但我只得到一个按钮而不是 4 个按钮....

想法?

【问题讨论】:

    标签: c# silverlight data-binding xaml


    【解决方案1】:

    好吧,我想通了...使用ItemsControl 解决了问题...

    <ItemsControl x:Name="tStack" Grid.Column="0">
       <ItemsControl.ItemsPanel>
          <ItemsPanelTemplate>
             <StackPanel Orientation="Horizontal"/>
          </ItemsPanelTemplate>
       </ItemsControl.ItemsPanel>
       <ItemsControl.ItemTemplate>
          <DataTemplate>
             <Button Content="{Binding ItemName}"/>
          </DataTemplate>
       </ItemsControl.ItemTemplate>
    </ItemsControl>
    

    【讨论】:

    • 这正是我所需要的。谢谢。
    • 这并不总是必要的,但对于一些进一步的自定义,您需要在 StackPanel 上设置“IsItemsHost”属性。
    • 你在哪里设置ItemsSource?此 XAML 是否包含在 &lt;Grid/&gt; 中?
    • @IAbstract ItemsSource 在ItemsControl 中设置。
    • 在您的示例中,只有 4 个按钮,但是如果您要绑定的集合中有很多项目,您可能希望在 ItemsPanelTemplate 中使用 VirtualizingStackPanel,如下所述:@987654321 @
    猜你喜欢
    • 2013-05-22
    • 1970-01-01
    • 1970-01-01
    • 2020-08-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多