将StackPanel子节点绑定到ObservableCollection上

本文关键字：ObservableCollection 绑定 StackPanel 子节点 | 更新日期: 2023-09-27 18:15:26

我有一个ObservableCollection of buttons:

public partial class MainWindow : Window   
     {
        public ObservableCollection<Button> myBtCollection { get; set; }
        public MainWindow()
        {
            InitializeComponent();
            myBtCollection = new ObservableCollection<Button>();
            Button bot1 = new Button { Width = 200, Height = 25, Content = "Boton 1" };
            Button bot2 = new Button { Width = 150, Height = 50, Content = "Boton 2" };
            Button bot3 = new Button { Width = 100, Height = 100, Content = "Boton 3" };
            myBtCollection.Add(bot1);
            myBtCollection.Add(bot2);
            myBtCollection.Add(bot3);
            myBtCollection.Add(bot1);
            myBtCollection.Add(bot3);
            myBtCollection.Add(bot2);
            myBtCollection.Add(bot1);
        }
    }

我想把集合绑定到我的StackPanel(在这个例子中，它是一个常量集合，但最终它将是变量)。这是XAML:

<Window x:Name="mainWindow" x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel x:Name="stack">
        </StackPanel>
        <ItemsControl  Width="Auto" 
                       Height="Auto"
                       ItemsSource="{Binding ElementName=mainWindow, Path=myBtCollection}">      
        </ItemsControl>

    </Grid>
</Window>

我读到它可以通过使用ItemsControl来实现，但我不知道如何完成它。(我需要在后面的代码中设置DataContext吗?)

将StackPanel子节点绑定到ObservableCollection上

我同意@inxs的评论。但是要使这个工作移动InitializeComponent()之后创建myBtCollection

public MainWindow()
{
    myBtCollection = new ObservableCollection<Button>();
    ...
    InitializeComponent();
}

或为myBtCollection实现INotifyPropertyChanged

  1. ItemsControl已经使用了Vertical StackPanel
  2. 你不能绑定数据到StackPanel，这是用于可视化布局。

如果你想使用不同的面板或改变StackPanels的方向，你可以使用属性"ItemsPanel"的ItemsControl，并设置它像这样:

<ItemsControl.Style>
            <Style TargetType="{x:Type ItemsControl}">
                <Setter Property="ItemsPanel">
                    <Setter.Value>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
 </ItemsControl.Style>
相关文章：