使用绑定基于集合中的属性自动生成WPF按钮



我想将集合中的属性绑定到自动生成按钮,这可以通过数据绑定实现吗?

我尝试在没有绑定的情况下做以下操作:

        var servicesList = sad.GetAllServices().ToList();
        foreach (var service in servicesList)
        {
            var btn = new Button
            {
                Name = "btnService_" + service.Id,
                Content = service.NameEn,
                Width = 200,
                Height = 50,
                Margin = new Thickness(20)
            };
            btn.Click += (sender, e) =>
            {
                // Handling click event...
            };
            PnlServices.Children.Add(btn);
        }

我想为集合中的每个项目创建一个按钮,并使按钮的内容等于项目。NameEn

类似的东西

    public class ViewModel
    {
        public ObservableCollection<Service> servicesList => new ObservableCollection<Service>(sad.GetAllServices().ToList());
    }

XAML

<Window>
    <Window.Resources>
        <local:ViewModel x:Key="ViewModel"></local:ViewModel>
    </Window.Resources>
    <Grid>
        <ItemsControl DataContext="{Binding Source={StaticResource ViewModel}}" 
                      ItemsSource="{Binding Path=servicesList}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button  Content="{Binding Path=Name}"
                             Width="200"
                             Height="50"
                             Margin="20"
                             Click="OnClickHandler"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>
  1. 首先生成集合(Array/List/ObservableCollection)。

  2. 在上面的步骤1中将ItemsControl控件绑定到集合以生成按钮。

注意:不能绑定控件的Name属性。

关于ItemsControl 的好教程

例如;

var items = new[] { new { Description = "Btn1" }, new { Description = "Btn2" } };
BtnList.ItemsSource = items;
<ItemsControl x:Name="BtnList">
         <ItemsControl.ItemTemplate>
             <DataTemplate>
                <Button Content="{Binding Description}" />
             </DataTemplate>
         </ItemsControl.ItemTemplate>
</ItemsControl>

servicesList转换为公共ObservableCollection并绑定到ListBox(或ItemsControl)。

假设您的视图模型是Service。

private ObservableCollection<Service> serviceList = new ObservableCollection<Service>();
public ObservableCollection<Service> ServiceList 
{
    get
    {
       return serviceList;
    }
}
<ListBox ItemsSource="{Binding ServicesList}">
    <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Button Height="50" Width="200" Content="{Binding NameEn}" Margin="20" Tag="{Binding Id}" Click="ButtonClickHandler" />
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
</List> 

现在创建一个点击处理程序,并在xaml for click事件中对其进行更改。

最新更新