Fluent.Ribbon 中如何实现 Ribbon 按钮尺寸与对齐？

2026-11-04数据阿明

结论

补充示例用 RibbonToolBar、WrapPanel 和 SizeDefinition 实现了类似的 Ribbon 排列：第一行放置一个中型控件和一个小型 Close 按钮，第二行放置另一个中型按钮。示例中的控件是 RecentFilesSplitButton，没有包含问题提到的 ComboBox，所以无法直接判断 ComboBox 和 Close 按钮组合后的尺寸与对齐效果。

示例布局

<Fluent:RibbonGroupBox Header="Fichier Office">
    <Fluent:RibbonToolBar>
        <WrapPanel Orientation="Horizontal">
            <local:RecentFilesSplitButton
                x:Name="BtnLoadRecent"
                Header="Charger le fichier"
                Icon="Images/OpenOffice.png"
                SizeDefinition="Middle" />
            <Fluent:Button
                Header=""
                x:Name="btnCloseFile"
                Icon="Images/CloseFile.png"
                SizeDefinition="Small"
                Click="BtnCloseFile_Click" />
        </WrapPanel>
    </Fluent:RibbonToolBar>
    <Fluent:RibbonToolBar>
        <Fluent:Button
            Header="Ouvrir le fichier créé"
            Icon="Images/MicrosoftExcel.png"
            SizeDefinition="Middle"
            Click="BtnOpenOffice_Click"
            x:Name="BtnOpenOffice" />
    </Fluent:RibbonToolBar>
</Fluent:RibbonGroupBox>

SizeDefinition="Small" 用来表达 Close 按钮在 Ribbon 中的尺寸意图，示例没有设置 Width 或 Height。两个 RibbonToolBar 分别放置两行内容，第一行由 WrapPanel 横向排列控件。

应用到 ComboBox 场景

若要保留原问题中的 ComboBox，可以尝试将它和小型按钮一起放入第一行工具栏的横向容器。下面是沿用现有布局思路改写的示意，实际效果还需结合 Fluent.Ribbon 版本和控件样式确认：

<Fluent:RibbonGroupBox Header="Actions">
    <Fluent:RibbonToolBar>
        <WrapPanel Orientation="Horizontal">
            <Fluent:ComboBox Header="Files" Width="150" />
            <Fluent:Button
                x:Name="btnClose"
                Icon="pack://application:,,,/Resources/Close.png"
                SizeDefinition="Small" />
        </WrapPanel>
    </Fluent:RibbonToolBar>
    <Fluent:RibbonToolBar>
        <Fluent:Button
            Header="Open File"
            Icon="pack://application:,,,/Resources/Open.png"
            SizeDefinition="Middle" />
    </Fluent:RibbonToolBar>
</Fluent:RibbonGroupBox>

如果按钮仍被拉伸，或图标没有居中，现有材料不足以确定原因。可以检查当前 Fluent.Ribbon 版本中的 Button 模板、图标资源尺寸，以及 ComboBox 和按钮在工具栏中的实际布局行为。仅凭 SizeDefinition="Small"，无法判断命中区域或图标是否会按预期缩放。

注意事项

补充代码中的第一项控件是 RecentFilesSplitButton，不是 ComboBox；两者的布局行为可能不同。
示例没有说明图标是否会自动缩放或如何严格居中，因此不能据此断定 32x32 图标会自动适配小按钮。
如果需要精确控制图标尺寸或按钮命中区域，需结合实际模板和资源进行验证。现有材料没有提供相关模板配置。