CODEWITHSUNDEEP
silverlightxaml
Brk
Brk

Reputation: 488

Creating and binding buttons dynamically in a WrapPanel

In this scenario, an array of resources are sent to the ViewModel.

The objective is to display these resources as buttons in a WrapPanel in the view.

At this moment, I'm doing this using the C# code below. However, I'd like to do this in the Xaml side. Eventually, I'd like to use DataTemplates to format the buttons with other properties of the Resource class.

What is the best way of approaching this? Thanks in advance.

    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);
        }
    }

Upvotes: 0

Views: 1730

Answers (1)

Clemens
Clemens

Reputation: 128061

A common way to display a variable set of items would be to use an ItemsControl. You would bind the ItemsControl's ItemsSource property to an ObservableCollection of your Resource objects.

<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>

The ViewModel class might look like this:

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

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

You may access the ViewModel instance in the UserControl or MainPage code by casting the DataContext:

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

Upvotes: 1

Related Questions