WPF RibbonGroup Only Displays First Button

Question

I have a wpf RibbonTab that contains a RibbonGroup. I am trying to add RibbonButtons to the RibbonGroup dynamically.

I can get it to display the first item in my ObservableCollection of items. I have switched which item is first in the collection and it always just shows the first item whichever it is.

I have tried setting the width of the RibbonGroup to a wide value and while it makes the RibbonGroup as wide as I tell it to, it still won't show any more than one RibbonButton. Currently I set it Width="Auto"

Any help is working out why I can't show more than one button in my RibbonGroup would be really appreciated.

Here is my xaml:

                <RibbonTab KeyTip="0" IsSelected="{Binding IsTestTabSelected}" Header="Test Tab" 
                           Visibility="{Binding ShowTestTab, Converter={StaticResource BoolToVisibilityConverter}}" Width="Auto">
                    <RibbonTab.DataContext>
                        <Binding Path="TestRibbonViewModel" />
                    </RibbonTab.DataContext>
                    <RibbonTab.HeaderTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" Width="Auto">
                                <TextBlock Text="Test Tab" Margin="5,0,0,0" VerticalAlignment="Center"/>
                            </StackPanel>
                        </DataTemplate>
                    </RibbonTab.HeaderTemplate>
                    <RibbonGroup x:Name="tgStep2" Header="Delete older files" Width="Auto">
                        <ItemsControl ItemsSource="{Binding GroupWeeksOldButtons}">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <RibbonButton 
                                      LargeImageSource="{Binding ImageSource}" 
                                       Width="{Binding Width}" 
                                       Label="{Binding Content}"
                                       ToolTip="{Binding ToolTip}"
                                       Command="{Binding Command}" />
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </RibbonGroup> 
                </RibbonTab>

Here is my RibbonViewModel:

public class RibbonViewModel
{
    public ObservableCollection<RibbonButtonModel> GroupWeeksOldButtons { get; private set; }
    public ObservableCollection<RibbonButtonModel> GroupMonthsOldButtons { get; private set; }

    public RibbonViewModel()
    {
        // Initialize the ObservableCollection
        GroupWeeksOldButtons = new ObservableCollection<RibbonButtonModel>();
        GroupMonthsOldButtons = new ObservableCollection<RibbonButtonModel>();
    }

    public void AddWeeksOldButton(RibbonButtonModel button)
    {
        GroupWeeksOldButtons.Add(button);
    }

    public void AddMonthsOldButton(RibbonButtonModel button)
    {
        GroupMonthsOldButtons.Add(button);
    }

    public void RemoveWeeksOldButton(RibbonButtonModel button)
    {
        GroupWeeksOldButtons.Remove(button);
    }

    public void RemoveMonthsOldButton(RibbonButtonModel button)
    {
        GroupMonthsOldButtons.Remove(button);
    }
}

Here is my RibbonButtonModel:

public class RibbonButtonModel
{
    public string Content { get; set; } = string.Empty;
    public string ToolTip { get; set; } = string.Empty;
    public string ImageSource { get; set; } = string.Empty;
    public ICommand Command { get; set; } = null;
    public string CommandParameter { get; set; } = string.Empty;
    public int Width { get; set; }  = 75;
}

Answer 1

I found the solution. Here is what I did.

I replaced the ItemsControl under the RibbonGroup and I used a ListBox instead.

Here is the updated RibbonTab:

<RibbonTab KeyTip="1" IsSelected="{Binding TestTabIsSelected}" Header="Test" 
 Visibility="{Binding ShowTestTab, Converter={StaticResource BoolToVisibilityConverter}}" Width="Auto">
<RibbonTab.DataContext>
    <Binding Path="TestRibbonViewModel" />
</RibbonTab.DataContext>
<RibbonTab.HeaderTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal" Width="Auto">
            <TextBlock Text="Test" Margin="5,0,0,0" VerticalAlignment="Center"/>
        </StackPanel>
    </DataTemplate>
</RibbonTab.HeaderTemplate>
<RibbonGroup x:Name="rgStep1" Header="Delete older files" Width="Auto">
    <ListBox ItemsSource="{Binding GroupWeeksOldButtons}" BorderThickness="0" Background="Transparent" 
             ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
             ScrollViewer.VerticalScrollBarVisibility="Disabled">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <RibbonButton  
                    Width="{Binding Width}" 
                    Label="{Binding Content}"
                    ToolTip="{Binding ToolTip}"
                    Command="{Binding Command}"
                    LargeImageSource="{Binding ImageSource}"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Margin="0,0,0,0"/> 
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</RibbonGroup>
</RibbonTab>