我想将集合中的属性绑定到自动生成按钮,这可以通过数据绑定实现吗?
我尝试在没有绑定的情况下做以下操作:
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>
-
首先生成集合(Array/List/ObservableCollection)。
-
在上面的步骤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事件中对其进行更改。