WPF List of Groups of Controls Databound to List of Custom Class?

Question

I'm still somewhat new to WPF (only done a few small projects with it). I'm trying to make a repeating group of controls (user can add/remove these groups), databound to a custom class. Example UI:

([UserButton1] [UserButton2]) <--each of these () is a separate group of buttons
([Cheese]      [Wine]       )
([Wallace]     [Gromit]     )
                        [Add] <--this button can add more groups

databound to a list of a class like this (pseudocode):

class UserButtons {
    string UserButton1 = "UserButton1"
    string UserButton2 = "UserButton2"
}

such as

List<UserButtons> = {
    [0]: UserButton1, UserButton2
    [1]: Cheese, Wine
    [2]: Wallace, Gromit
}

I know this is the sort of thing WPF was created to do, but I can't quite figure out exactly how to go about it.

Should I use some sort of ListView? Would a DataTemplate help? A StackPanel sounds OK, but it doesn't have databinding for a list...or does it? And I'm not even sure how to make databinding work for the groups of buttons like indicated above (if that even made sense to you...sorry for the bad example). Does anyone have any insight on this problem?

I searched to try to find a question pertaining to this and didn't see one, perhaps because I wasn't sure what to search for. So, sorry if it's an unintended dupe.

Answer 1

I'm not entirely sure what you're looking for but I hope the example below helps. I used an ItemsControl whose ItemsSource is set to the collection of UserButtons. Its ItemTemplate property is set to a StackPanel that shows two buttons, the Content property of each is bound to properties in UserButtons.

XAML:

<Window x:Class="WpfApplication3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication3"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>

    </Window.Resources>

    <StackPanel Orientation="Vertical">
        <ItemsControl x:Name="itemsControl" Background="LightBlue">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Button Content="{Binding Button1}" Width="100"/>
                        <Button Content="{Binding Button2}" Width="100"/>
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

        <Button Width="50" Click="Button_Click">Add</Button>

    </StackPanel>

</Window>

Code-Behind:

public partial class MainWindow : Window
{
    ObservableCollection<UserButtons> oc;

    public MainWindow()
    {
        InitializeComponent();

        oc = new ObservableCollection<UserButtons>()
        {
            new UserButtons() { Button1="UserButton1", Button2 = "UserButton2"},
            new UserButtons() { Button1="Cheese", Button2 = "Wine"},
            new UserButtons() { Button1="Wallace", Button2 = "Gromit"},
        };

        this.itemsControl.ItemsSource = oc;
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        oc.Add(new UserButtons() { Button1 = "NewButton1", Button2 = "NewButton2" });
    }
}

public class UserButtons : INotifyPropertyChanged
{
    private string button1;
    public string Button1
    {
        get { return this.button1; }
        set
        {
            this.button1 = value;
            this.OnPropertyChanged("Button1");
        }
    }

    private string button2;
    public string Button2
    {
        get { return this.button2; }
        set
        {
            this.button2 = value;
            this.OnPropertyChanged("Button2");
        }
    }

    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged(string propName)
    {
        if (this.PropertyChanged != null)
        {
            this.PropertyChanged(this, new PropertyChangedEventArgs(propName));
        }
    }

    #endregion
}