65.9K
CodeProject 正在变化。 阅读更多。
Home

适用于 WinForms 的 Windows Ribbon，第 21 部分 – SizeDefinition

Arik Poznanski
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.96/5 (15投票s)

2010年3月2日

Ms-PL

3分钟阅读

viewsIcon

32939

downloadIcon

1416

在本文中，我将介绍如何为 ribbon 组元素定义自定义尺寸定义。

这系列 CodeProject 文章基于我首先在我的 博客上发表的一系列帖子。

引言

在查看 MSDN 中有关 Windows Ribbon Framework 的文档后，我发现我的 ribbon 文章中只剩下一个主题尚未涉及。这篇文章就是为了纠正这个问题。

这篇文章是关于如何为 ribbon 组元素定义自定义尺寸定义的。这篇文章完全关于 ribbon 标记，所以对 适用于 WinForms 的 Windows Ribbon 库没有修改。

尽管如此，我还是在项目站点上传了一个新的示例 "18-SizeDefinition"。在这个示例中，我创建了可以在写字板应用程序中找到的段落组。这个组的特殊之处在于它所代表的自定义布局。

image

什么是 SizeDefinition？

SizeDefinition 是 ribbon 标记元素，它允许我们开发者控制组中控件的布局。每一个这样的定义都称为布局模板。

每个组都可以缩放到以下尺寸：大、中、小和弹出。这使得 ribbon 框架即使在我们没有很多屏幕空间时也能显示用户界面。

注意：缩放对您的组的外观有重要影响，已经在 适用于 WinForms 的 Windows Ribbon，第 6 部分 - 选项卡、组和帮助按钮 中进行了回顾。

每个布局模板包含

  • 参与组的控件列表。
  • 给定组尺寸的布局定义。

预定义的布局模板

微软提供了一个预定义的通用布局模板，因此我们可以将它们用于我们的组，而无需指定确切的布局。到目前为止，所有之前的示例都使用了它们。

提醒

<Group CommandName="cmdGroupFileActions" SizeDefinition="ThreeButtons">
  <Button CommandName="cmdButtonNew" />
  <Button CommandName="cmdButtonOpen" />
  <Button CommandName="cmdButtonSave" />
</Group>

"ThreeButtons" 是一个预定义的布局模板的名称，它处理三个按钮控件的布局。

以下是可用预定义模板的枯燥列表

  • OneButton
  • TwoButtons
  • ThreeButtons
  • ThreeButtons-OneBigAndTwoSmall
  • ThreeButtonsAndOneCheckBox
  • FourButtons
  • FiveButtons
  • FiveOrSixButtons
  • SixButtons
  • SixButtons-TwoColumns
  • SevenButtons
  • EightButtons
  • EightButtons-LastThreeSmall
  • NineButtons
  • TenButtons
  • ElevenButtons
  • OneFontControl
  • OneInRibbonGallery
  • InRibbonGalleryAndBigButton
  • InRibbonGalleryAndButtons-GalleryScalesFirst
  • ButtonGroups
  • ButtonGroupsAndInputs
  • BigButtonsAndSmallButtonsOrInputs

它们的确切布局可以在 MSDN 上的 通过尺寸定义和缩放策略自定义 Ribbon 中找到。

定义自定义布局模板

可以使用两种方式定义自定义布局模板：内联和独立。

独立意味着您在 Ribbon.SizeDefinitions 元素下定义一次布局，然后在组定义中使用它的名称，就像预定义的布局模板一样。例如

定义一个命名的，独立的自定义布局

<Ribbon.SizeDefinitions>
  <SizeDefinition Name="ParagraphLayout">
    <ControlNameMap>
      <ControlNameDefinition Name="button1" />
      <ControlNameDefinition Name="button2" />
      <ControlNameDefinition Name="button3" />
      <ControlNameDefinition Name="button4" />
      <ControlNameDefinition Name="button5" />
      <ControlNameDefinition Name="button6" />
      <ControlNameDefinition Name="button7" />
      <ControlNameDefinition Name="button8" />
      <ControlNameDefinition Name="button9" />
    </ControlNameMap>
    <GroupSizeDefinition Size="Large">
      <Row>
        <ControlGroup>
          <ControlSizeDefinition ControlName="button1" IsLabelVisible="false" />
          <ControlSizeDefinition ControlName="button2" IsLabelVisible="false" />
        </ControlGroup>
        <ControlGroup>
          <ControlSizeDefinition ControlName="button3" IsLabelVisible="false" />
        </ControlGroup>
        <ControlGroup>
          <ControlSizeDefinition ControlName="button4" IsLabelVisible="false" />
        </ControlGroup>
      </Row>
      <Row>
        <ControlGroup>
          <ControlSizeDefinition ControlName="button5" IsLabelVisible="false" />
          <ControlSizeDefinition ControlName="button6" IsLabelVisible="false" />
          <ControlSizeDefinition ControlName="button7" IsLabelVisible="false" />
          <ControlSizeDefinition ControlName="button8" IsLabelVisible="false" />
        </ControlGroup>
        <ControlGroup>
          <ControlSizeDefinition ControlName="button9" IsLabelVisible="false" />
        </ControlGroup>
      </Row>
    </GroupSizeDefinition>
  </SizeDefinition> 
</Ribbon.SizeDefinitions>

虽然这看起来很吓人，但实际上非常简单。首先，ControlNameMap 元素是布局中使用的占位符控件的定义。在我们的示例中，我们定义了九个控件。

然后是布局定义。这是在 GroupSizeDefinition 元素中完成的，我们在其中设置作为属性定义的组缩放尺寸。请记住，不同的组尺寸将具有不同的布局。在我们的示例中，我们只定义了大尺寸的布局。

然后，我们使用 Row 元素来指定我们的布局分为两行（最多三行）。

在每一行中，我们使用 ControlGroup 元素来指定控件的分组。同一组中的控件之间没有间距。

使用自定义布局非常简单

<Group CommandName="cmdGroupParagraph" SizeDefinition="ParagraphLayout">
  <Button CommandName="cmdDecreaseIndent" />
  <Button CommandName="cmdIncreaseIndent" />
  <SplitButton>
    <Button CommandName="cmdStartList" />
  </SplitButton>
  <DropDownButton CommandName="cmdLineSpacing">
    <Button />
  </DropDownButton>
  <Button CommandName="cmdAlignLeft" />
  <Button CommandName="cmdAlignCenter" />
  <Button CommandName="cmdAlignRight" />
  <Button CommandName="cmdJustify" />
  <Button CommandName="cmdParagraph" />
</Group>

内联意味着您在实际的组定义中编写布局定义。以下是相同的示例，只是一个内联版本

<Group CommandName="cmdGroupParagraph">
  <SizeDefinition>
    <ControlNameMap>
      <ControlNameDefinition Name="button1" />
      <ControlNameDefinition Name="button2" />
      <ControlNameDefinition Name="button3" />
      <ControlNameDefinition Name="button4" />
      <ControlNameDefinition Name="button5" />
      <ControlNameDefinition Name="button6" />
      <ControlNameDefinition Name="button7" />
      <ControlNameDefinition Name="button8" />
      <ControlNameDefinition Name="button9" />
    </ControlNameMap>
    <GroupSizeDefinition Size="Large">
      <Row>
        <ControlGroup>
          <ControlSizeDefinition ControlName="button1" IsLabelVisible="false" />
          <ControlSizeDefinition ControlName="button2" IsLabelVisible="false" />
        </ControlGroup>
        <ControlGroup>
          <ControlSizeDefinition ControlName="button3" IsLabelVisible="false" />
        </ControlGroup>
        <ControlGroup>
          <ControlSizeDefinition ControlName="button4" IsLabelVisible="false" />
        </ControlGroup>
      </Row>
      <Row>
        <ControlGroup>
          <ControlSizeDefinition ControlName="button5" IsLabelVisible="false" />
          <ControlSizeDefinition ControlName="button6" IsLabelVisible="false" />
          <ControlSizeDefinition ControlName="button7" IsLabelVisible="false" />
          <ControlSizeDefinition ControlName="button8" IsLabelVisible="false" />
        </ControlGroup>
        <ControlGroup>
          <ControlSizeDefinition ControlName="button9" IsLabelVisible="false" />
        </ControlGroup>
      </Row>
    </GroupSizeDefinition>
  </SizeDefinition>
  <Button CommandName="cmdDecreaseIndent" />
  <Button CommandName="cmdIncreaseIndent" />
  <SplitButton>
    <Button CommandName="cmdStartList" />
  </SplitButton>
  <DropDownButton CommandName="cmdLineSpacing">
    <Button />
  </DropDownButton>
  <Button CommandName="cmdAlignLeft" />
  <Button CommandName="cmdAlignCenter" />
  <Button CommandName="cmdAlignRight" />
  <Button CommandName="cmdJustify" />
  <Button CommandName="cmdParagraph" />
</Group>

目前就到这里为止。

© . All rights reserved.