在WrapPanel中动态创建和绑定按钮

时间:2013-02-28 15:12:36

标签: silverlight xaml

在此方案中,将一组资源发送到ViewModel。

目标是在视图中的WrapPanel中将这些资源显示为按钮。

此时,我正在使用下面的C#代码执行此操作。但是,我想在Xaml方面这样做。最后,我想使用DataTemplates将按钮格式化为Resource类的其他属性。

接近这个的最佳方法是什么?提前谢谢。

    public void SetResources(Resource[] resources)
    {
        WrapPanel panel = this.View.ResourcesPanel;
        panel.Children.Clear();
        foreach(Resource resource in resources)
        {
            var button = new Button
            {
                Tag = resource.Id,
                Content = resource.Content,
                Width = 300,
                Height = 50
            };
            button.Click += this.OnResourceButtonClick;
            panel.Children.Add(button);
        }
    }

1 个答案:

答案 0 :(得分:0)

显示一组变量项的常用方法是使用ItemsControl。您可以将ItemsControl的ItemsSource属性绑定到ResourceObservableCollection个对象。

<UserControl ...>
    <UserControl.DataContext>
        <local:ViewModel/>
    </UserControl.DataContext>
    <Grid>
        <ItemsControl ItemsSource="{Binding Resources}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button Tag="{Binding Id}" Content="{Binding Content}"
                            Width="300" Height="50"
                            Click="OnResourceButtonClick"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</UserControl>

ViewModel类可能如下所示:

public class ViewModel
{
    public ViewModel()
    {
        Resources = new ObservableCollection<Resource>();
    }

    public ObservableCollection<Resource> Resources { get; private set; }
}

您可以通过强制转换DataContext来访问UserControl或MainPage代码中的ViewModel实例:

var vm = DataContext as ViewModel;
vm.Resources.Add(new Resource { Id = 1, Content = "Resource 1" });
...