Привязать коллекцию к StackPanel - PullRequest
Новая
       35

Привязать коллекцию к StackPanel

62 голосов
/ 28 июля 2010

Я хочу взять коллекцию объектов и привязать ее к 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 кнопок я получаю только одну кнопку ....

Идеи

1 Ответ

139 голосов
/ 29 июля 2010

Хорошо, я понял это ... Использование 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>
...