none
Officeリボンのカスタマイズでボタン要素を横に並べたい RRS feed

  • 質問

  • Excel 2010 でアドインを作成し、リボンのカスタマイズをしています。
    その際、新規タブを追加し、ボタンやEditbox等を配置することはできています。

    ここで掲題の点を疑問に思い投稿しました。

    例えば、Excelの 「ホーム」タブ > 「クリップボード」グループ > 2列目(切り取りなど)のように、
    単純にボタンを並べていると一列に一つしか並びませんよね。(以下サンプル)

    <customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui" onLoad="CustomUI.OnLoad">
     <ribbon>
      <tabs>
       <tab id="tab1" label="myAddin">
        <group id="Group1" >
    	<editBox id="tbx1" label="tbx1" sizeString="wwwwwwwwwww" getText="CustomUI.tbx1_getText" onChange="CustomUI.tbx1_onChange" />
    	<button id="btn1" label="btn1" size="normal" onAction="CustomUI.btn1_Click" />
    	<button id="btn2" label="btn2" size="normal" onAction="CustomUI.btn2_Click" />
    	<button id="btn3" label="btn3" size="normal" onAction="CustomUI.btn3_Click" />
        </group>
       </tab>
      </tabs>
     </ribbon>
    </customUI>


    しかし隣の 「ホーム」タブ > 「フォント」グループ だと、フォント指定のドロップボックスの下に
    複数のボタンが並んでいます。

    この表現はどのように指定すればいいのでしょうか。
    リボンUIのドキュメントでこの辺の記載を見つけられなかったためお伺いします。

    また、同「フォント」グループ含めいくつかのグループで2行の要素を上下に均等配置しているのも不明です。
    (通常であれば3行分のスペースに上詰めで配置されていく。)


    環境:
    利用出来るツールに制限があるため、特段のツールは使わず、customUI14.xml をテキストエディタで編集しています。

    以上よろしくお願いします。


    • 編集済み junnny 2016年4月5日 12:16
    2016年4月5日 12:15

回答

  • buttonGroupに入れてやればボタンをまとめられます。

    <customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui" onLoad="CustomUI.OnLoad">
      <ribbon>
        <tabs>
          <tab id="tab1" label="myAddin">>
            <group id="Group1" centerVertically="true">
              <box id="box1">
                <editBox id="tbx1" label="tbx1" sizeString="wwwwwwwwwww" getText="CustomUI.tbx1_getText" onChange="CustomUI.tbx1_onChange" />
              </box>
              <buttonGroup id="bg1">
                <button id="btn1" label="btn1" onAction="CustomUI.btn1_Click" />
                <button id="btn2" label="btn2" onAction="CustomUI.btn2_Click" />
                <button id="btn3" label="btn3" onAction="CustomUI.btn3_Click" />
              </buttonGroup>
            </group>
          </tab>
        </tabs>
      </ribbon>
    </customUI>


    個別に明示されていない限りgekkaがフォーラムに投稿したコードにはフォーラム使用条件に基づき「MICROSOFT LIMITED PUBLIC LICENSE」が適用されます。(かなり自由に使ってOK!)

    • 回答としてマーク junnny 2016年4月6日 3:24
    2016年4月5日 15:56
  • いつも回答ありがとうございます。

    さて、ご提示の解法を試した所、buttonGroup に問題が生じてしまいました。(↓これだとタブが表示されなくなる)

    <buttonGroup id="bg1">
    <button ...>
    <button ...>
    </buttonGroup>


    但し、editBoxと同様に box で囲むと上手くいきました。(タブも正常に表示され、各ボタンが横に並んでいる。)

    <box id="box2">
    <button ...>
    <button ...>
    </box>

    なお、MSDNのドキュメントには
    2007 Office Fluent リボンをカスタマイズする (開発者向け) (パート 2/3)
    https://msdn.microsoft.com/ja-jp/library/aa338199(v=office.12).aspx#Anchor_17

    • box               グループ内にコントロールを配置します。
    • buttonGroup  ボタンのグループ化を表します。


    とあり、それぞれ使い方が違うのかもしれませんが、とりあえずboxの子コントロールにbuttonがあったので
    今は box を使ってみます。

    最終的には希望通りにコントロール要素を横に並べる事ができました。
    Groupはこんな形↓になっています。
     
    | tbx1 [_______]  |
    | [btn1] [btn2] [btn3]|

    ありがとうございました。

    • 編集済み junnny 2016年4月6日 3:23
    • 回答としてマーク junnny 2016年4月6日 3:24
    2016年4月6日 2:27

すべての返信

  • buttonGroupに入れてやればボタンをまとめられます。

    <customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui" onLoad="CustomUI.OnLoad">
      <ribbon>
        <tabs>
          <tab id="tab1" label="myAddin">>
            <group id="Group1" centerVertically="true">
              <box id="box1">
                <editBox id="tbx1" label="tbx1" sizeString="wwwwwwwwwww" getText="CustomUI.tbx1_getText" onChange="CustomUI.tbx1_onChange" />
              </box>
              <buttonGroup id="bg1">
                <button id="btn1" label="btn1" onAction="CustomUI.btn1_Click" />
                <button id="btn2" label="btn2" onAction="CustomUI.btn2_Click" />
                <button id="btn3" label="btn3" onAction="CustomUI.btn3_Click" />
              </buttonGroup>
            </group>
          </tab>
        </tabs>
      </ribbon>
    </customUI>


    個別に明示されていない限りgekkaがフォーラムに投稿したコードにはフォーラム使用条件に基づき「MICROSOFT LIMITED PUBLIC LICENSE」が適用されます。(かなり自由に使ってOK!)

    • 回答としてマーク junnny 2016年4月6日 3:24
    2016年4月5日 15:56
  • いつも回答ありがとうございます。

    さて、ご提示の解法を試した所、buttonGroup に問題が生じてしまいました。(↓これだとタブが表示されなくなる)

    <buttonGroup id="bg1">
    <button ...>
    <button ...>
    </buttonGroup>


    但し、editBoxと同様に box で囲むと上手くいきました。(タブも正常に表示され、各ボタンが横に並んでいる。)

    <box id="box2">
    <button ...>
    <button ...>
    </box>

    なお、MSDNのドキュメントには
    2007 Office Fluent リボンをカスタマイズする (開発者向け) (パート 2/3)
    https://msdn.microsoft.com/ja-jp/library/aa338199(v=office.12).aspx#Anchor_17

    • box               グループ内にコントロールを配置します。
    • buttonGroup  ボタンのグループ化を表します。


    とあり、それぞれ使い方が違うのかもしれませんが、とりあえずboxの子コントロールにbuttonがあったので
    今は box を使ってみます。

    最終的には希望通りにコントロール要素を横に並べる事ができました。
    Groupはこんな形↓になっています。
     
    | tbx1 [_______]  |
    | [btn1] [btn2] [btn3]|

    ありがとうございました。

    • 編集済み junnny 2016年4月6日 3:23
    • 回答としてマーク junnny 2016年4月6日 3:24
    2016年4月6日 2:27