WPF中RibbonGroup仅显示第一个按钮的问题求助

我有一个包含RibbonGroup的WPF RibbonTab，尝试向RibbonGroup中动态添加RibbonButton，但目前仅能显示ObservableCollection集合中的第一个项，调换集合中首个项后仍只显示该首个项。我曾尝试将RibbonGroup的宽度设为较大值，虽能扩大其宽度，但仍仅显示一个RibbonButton，当前设置为Width="Auto"。

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>

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

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

问题原因及解决方案 #

核心原因 #

默认情况下，ItemsControl的ItemsPanel是垂直方向的StackPanel，而RibbonGroup内部垂直空间有限，后续按钮会被挤出可视区域；即使扩大RibbonGroup宽度，垂直布局也不会让按钮横向排列，导致仅能看到第一个按钮。

解决方案1：修改ItemsControl的ItemsPanel为横向布局 #

给ItemsControl指定横向的StackPanel作为容器，让按钮横向排列：

<ItemsControl ItemsSource="{Binding GroupWeeksOldButtons}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <RibbonButton 
              LargeImageSource="{Binding ImageSource}" 
               Width="{Binding Width}" 
               Label="{Binding Content}"
               ToolTip="{Binding ToolTip}"
               Command="{Binding Command}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

解决方案2：使用RibbonControlGroup替代ItemsControl #

WPF Ribbon提供了专门的RibbonControlGroup控件，适配Ribbon的布局逻辑，默认支持横向排列子控件：

<RibbonGroup x:Name="tgStep2" Header="Delete older files" Width="Auto">
    <RibbonControlGroup ItemsSource="{Binding GroupWeeksOldButtons}">
        <RibbonControlGroup.ItemTemplate>
            <DataTemplate>
                <RibbonButton 
                  LargeImageSource="{Binding ImageSource}" 
                   Width="{Binding Width}" 
                   Label="{Binding Content}"
                   ToolTip="{Binding ToolTip}"
                   Command="{Binding Command}" />
            </DataTemplate>
        </RibbonControlGroup.ItemTemplate>
    </RibbonControlGroup>
</RibbonGroup>

额外检查点 #

• 确认GroupWeeksOldButtons集合确实包含多个元素，可以通过日志或调试工具验证集合数量。
• 检查RibbonButtonModel的Width值，避免单个按钮宽度过大占用所有可用空间。

内容的提问来源于stack exchange，提问作者scott_f