3

When laying out a group, the Windows Ribbon Framework supports some predefined layouts. One of the layouts, which requires four buttons is called FourButtons.

This layout supports 3 different sizes, Large, Medium, and Small. In each case it gives the layouts:

Large:

enter image description here

Medium:

enter image description here

Small:

enter image description here

Right now i am using the FourButtons predefined template in my xml file as:

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://schemas.microsoft.com/windows/2009/Ribbon">
   ...
   <Application.Views>
      <Ribbon>
         ...
         <Ribbon.Tabs>
            <Tab CommandName="tabHome">
               <Group CommandName="grpActivity" SizeDefinition="FourButtons">
                  <Button CommandName="cmdStartWorking" />
                  <Button CommandName="cmdStopWorking" />
                  <Button CommandName="cmdPrint" />
                  <Button CommandName="cmdDuplicateTicket" />
               </Group>
            </Tab>
         </Ribbon.Tabs>

      </Ribbon>
   </Application.Views>
</Application>

And you can see the line

<Group CommandName="grpActivity" SizeDefinition="FourButtons">

which specifies the FourButtons layout template.

And my layout is FourButtons:

alt text

Except i don't want FourButtons layout, i want "Four Buttons, Two Big Two Small".

In the same way that there is ThreeButtons-OneBigAndTwoSmall:

enter image description here

And there is a FiveButtons:

enter image description here

i want a FourButtons-TwoBigTwoSmall, which i can manually mockup:

alt text

Unfortunately declarative programming that Microsoft invented for creating custom layouts confounds me as a programmer.

Can anyone decipher the declarative language example at the bottom of the page and come up with a FourButton-TwoBigTwoSmall template?

Note: All the pretty graphics, formatting, links, and stuff are used to attract squirrels - who love shiny graphics. And if you actually read this far i could actually use your help.

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
Ian Boyd
  • 246,734
  • 253
  • 869
  • 1,219

2 Answers2

2

you should use BigButtonsAndSmallButtonsOrInputs SizeDefinition

e.g.

      <Group CommandName="cmdGroupBatch" SizeDefinition="BigButtonsAndSmallButtonsOrInputs">
        <ControlGroup>
          <Button CommandName="cmdButtonGetBatch" />
          <Button CommandName="cmdButtonPutBatch" />
        </ControlGroup>
        <ControlGroup>
          <Button CommandName="cmdButtonSaveBatch" />
          <Button CommandName="cmdButtonDiscartBatch" />
        </ControlGroup>
      </Group>

Just check, if your Group has Size="Large" in your Tab.ScalingPolicy.

baCZa
  • 36
  • 2
  • i had actually eventually figured it out. It definitely isn't an easy thing to do. But i'll give you credit for an almost as good solution. And also since you're the only one to ever respond in 41 views. – Ian Boyd Nov 19 '10 at 19:45
1

i eventually did figure it out.

First is the control map, which mandates that the group have (in this case) four buttons. By having four entries in the ControlNameMap we mandate that the group using this size definition actually has four buttons. 

<ControlNameMap>
   <ControlNameDefinition Name="button1"/>
   <ControlNameDefinition Name="button2"/>
   <ControlNameDefinition Name="button3"/>
   <ControlNameDefinition Name="button4"/>
</ControlNameMap>

The four buttons are given aliases:

  • button1
  • button2
  • button3
  • button4

so that they can be referenced in the definitions to follow. First is the Large template:

<GroupSizeDefinition Size="Large">
    <ControlSizeDefinition ControlName="button1" ImageSize="Large" IsLabelVisible="true" />
    <ControlSizeDefinition ControlName="button2" ImageSize="Large" IsLabelVisible="true" />
    <ColumnBreak ShowSeparator="true"/>
    <ControlSizeDefinition ControlName="button3" ImageSize="Large" IsLabelVisible="true" />
    <ControlSizeDefinition ControlName="button4" ImageSize="Large" IsLabelVisible="true" />
</GroupSizeDefinition>

which causes two large buttons, a separator, and another 2 large buttons.

The medium template:

<GroupSizeDefinition Size="Medium">
    <ControlSizeDefinition ControlName="button1" ImageSize="Large" IsLabelVisible="true" />
    <ControlSizeDefinition ControlName="button2" ImageSize="Large" IsLabelVisible="true" />
    <ColumnBreak ShowSeparator="true"/>
    <Row>
        <ControlSizeDefinition ControlName="button3" ImageSize="Small" IsLabelVisible="true" />
    </Row>
    <Row>
        <ControlSizeDefinition ControlName="button4" ImageSize="Small" IsLabelVisible="true" />
    </Row>
</GroupSizeDefinition>

causes two large buttons, a separator, and then two rows (with each row containing one small button).

The small template:

<GroupSizeDefinition Size="Small">
    <Row>
        <ControlSizeDefinition ControlName="button1" ImageSize="Small" IsLabelVisible="true" />
        <ControlSizeDefinition ControlName="button3" ImageSize="Small" IsLabelVisible="false" />
    </Row>
    <Row>
        <ControlSizeDefinition ControlName="button2" ImageSize="Small" IsLabelVisible="true" />
        <ControlSizeDefinition ControlName="button4" ImageSize="Small" IsLabelVisible="false" />
    </Row>
</GroupSizeDefinition>

causes two rows, of two small buttons in each, to appear.

Bringing it all together:

<Group CommandName="grpActivity" >
    <SizeDefinition>
        <ControlNameMap>
            <ControlNameDefinition Name="button1"/>
            <ControlNameDefinition Name="button2"/>
            <ControlNameDefinition Name="button3"/>
            <ControlNameDefinition Name="button4"/>
        </ControlNameMap>
        <GroupSizeDefinition Size="Large">
            <ControlSizeDefinition ControlName="button1" ImageSize="Large" IsLabelVisible="true" />
            <ControlSizeDefinition ControlName="button2" ImageSize="Large" IsLabelVisible="true" />
            <ColumnBreak ShowSeparator="true"/>
            <ControlSizeDefinition ControlName="button3" ImageSize="Large" IsLabelVisible="true" />
            <ControlSizeDefinition ControlName="button4" ImageSize="Large" IsLabelVisible="true" />
        </GroupSizeDefinition>
        <GroupSizeDefinition Size="Medium">
            <ControlSizeDefinition ControlName="button1" ImageSize="Large" IsLabelVisible="true" />
            <ControlSizeDefinition ControlName="button2" ImageSize="Large" IsLabelVisible="true" />
            <ColumnBreak ShowSeparator="true"/>
            <Row>
                <ControlSizeDefinition ControlName="button3" ImageSize="Small" IsLabelVisible="true" />
            </Row>
            <Row>
                <ControlSizeDefinition ControlName="button4" ImageSize="Small" IsLabelVisible="true" />
            </Row>
        </GroupSizeDefinition>
        <GroupSizeDefinition Size="Small">
            <Row>
                <ControlSizeDefinition ControlName="button1" ImageSize="Small" IsLabelVisible="true" />
                <ControlSizeDefinition ControlName="button3" ImageSize="Small" IsLabelVisible="false" />
            </Row>
            <Row>
                <ControlSizeDefinition ControlName="button2" ImageSize="Small" IsLabelVisible="true" />
                <ControlSizeDefinition ControlName="button4" ImageSize="Small" IsLabelVisible="false" />
            </Row>
        </GroupSizeDefinition>
    </SizeDefinition>

    <Button CommandName="cmdStartWorking" />
    <Button CommandName="cmdStopWorking" />
    <Button CommandName="cmdPrint" />
    <Button CommandName="cmdDuplicateTicket" />
</Group>
Ian Boyd
  • 246,734
  • 253
  • 869
  • 1,219