I’ve been trying to sort this out for a few days now and I’ve hit a wall. I’m trying to bind my collection of Categories to a Menu which then displays each categories list of items in a flat list. How is this possible with Menu/MenuItems?

I’ve tried using ItemContainerStyle, DataContext…ect. All which have produce some really wonky results. As I’m quite new to WPF i figured i would see what others can share. This seems like it should be simple to do.

The goal:

Here is my .cs

public class DisplayPreset
{
    public string Name { get; set; }
    public int Width { get; set; }
    public int Height { get; set; }
}

public class DisplayCategory
{
    public string Name { get; set; }
    public ObservableCollection<DisplayPreset> Presets { get; set; }
}

DisplayCategories = new ObservableCollection<DisplayCategory>
{
    new DisplayCategory
    {
        Name = "HD 16:9",
        Presets = new List<DisplayPreset>
        {
            new DisplayPreset { Name = "1280 x 720", Width = 1280, Height = 720 },
            new DisplayPreset { Name = "1920 x 1080", Width = 1920, Height = 1080 },
        }
    },
    new DisplayCategory
    {
        Name = "Square 1:1",
        Presets = new List<DisplayPreset>
        {
            new DisplayPreset { Name = "100 x 100", Width = 100, Height = 100 },
            new DisplayPreset { Name = "200 x 200", Width = 200, Height = 200 },
        }
    }
};

My currently hard coded xaml

<Menu Grid.Column="3" DataContext="{StaticResource ViewModel}">
    <MenuItem >
        <MenuItem.Header>
            <StackPanel Orientation="Horizontal">
                <Path Style="{StaticResource Icons.ChevronDown}" Margin="0,0,0,0"/>
            </StackPanel>
        </MenuItem.Header>

        <MenuItem Header="HD 16:9" IsEnabled="False" FontWeight="SemiBold"></MenuItem>
        <MenuItem Header="1280 x 720" />
        <MenuItem Header="1920 x 1080" />

        <MenuItem Header="Square 1:1" IsEnabled="False" FontWeight="SemiBold"></MenuItem>
        <MenuItem Header="100 x 100" />
        <MenuItem Header="200 x 200" />
    </MenuItem>
</Menu>