<Folder>
  <Script name="RibbonScript">
    <Workflow>
      <![CDATA[
        module ribbonscript;
        using presentation::*;

        namespace demo
        {
          class StyleItem
          {
            var Name : string = "";
            var Style : DocumentStyle^ = null;

            new (name : string, size : DocumentFontSize?, color : Color?, bold : bool?, italic : bool?, underline : bool?, strikeline : bool?)
            {
              Name = name;
              Style = new DocumentStyle^();
              Style.parentStyleName = "#Context";
              Style.styles = new DocumentStyleProperties^();
              Style.styles.size = size;
              Style.styles.color = color;
              Style.styles.bold = bold;
              Style.styles.italic = italic;
              Style.styles.underline = underline;
              Style.styles.strikeline = strikeline;
            }
          }
          
          class StyleGroup
          {
            var Name : string = "";
            var Items : observe StyleItem^[] = {};
          }
        }
      ]]>
    </Workflow>
  </Script>

  <Instance name="StyleItemTemplateResource">
    <Instance ref.CodeBehind="false" ref.Class="demo::StyleItemTemplate">
      <ref.Parameter Name="ViewModel" Class="demo::StyleItem"/>
      <ref.Ctor>
        <![CDATA[
          {
            var styles = ViewModel.Style.styles;
            if (styles.color is not null) { styleLabel.Color = cast Color styles.color; }

            var font = containerControl.Font;
            var fontFamily = font.fontFamily;
            var bold = font.bold;
            var italic = font.italic;
            var underline = font.underline;
            var strikeline = font.strikeline;
            var size = font.size;

            if (styles.face is not null) { fontFamily = cast string styles.face; }
            if (styles.bold is not null) { bold = cast bool styles.bold; }
            if (styles.italic is not null) { italic = cast bool styles.italic; }
            if (styles.underline is not null) { underline = cast bool styles.underline; }
            if (styles.strikeline is not null) { strikeline = cast bool styles.strikeline; }

            if(styles.size is not null)
            {
              var dsize = styles.size;
              if (dsize.relative)
              {
                size = cast int Math::Round(dsize.size * font.size);
              }
              else
              {
                size = cast int Math::Round(dsize.size);
              }
            }

            styleLabel.Font = {
              fontFamily : fontFamily
              size : size
              bold : bold
              italic : italic
              underline : underline
              strikeline : strikeline
              antialias : font.antialias
              verticalAntialias : font.verticalAntialias
            };
          }
        ]]>
      </ref.Ctor>
      <TextListItemTemplate ref.Name="self" MinSizeLimitation="LimitToElementAndChildren" PreferredMinSize="x:72">
        <CustomControl ref.Name="containerControl">
          <att.BoundsComposition-set AlignmentToParent="left:0 top:0 right:0 bottom:0"/>
          <Table AlignmentToParent="left:0 top:0 right:0 bottom:0" MinSizeLimitation="LimitToElementAndChildren" CellPadding="5">
            <att.Rows>
              <_>composeType:Percentage percentage:1.0</_>
              <_>composeType:MinSize</_>
            </att.Rows>
            <att.Columns>
              <_>composeType:Percentage percentage:1.0</_>
            </att.Columns>

            <Cell Site="row:0 column:0">
              <SolidLabel ref.Name="styleLabel" Text="AaBbCc" Ellipse="true" Color="#FFFFFF" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Cell>

            <Cell Site="row:1 column:0">
              <SolidLabel Text-bind="ViewModel.Name" Font-eval="containerControl.Font" Ellipse="true" HorizontalAlignment="Center">
                <att.Color-bind>
                  <![CDATA[cast Color (self.Selected ? "#FFFFFF" : "#808080")]]>
                </att.Color-bind>
              </SolidLabel>
            </Cell>
          </Table>

          <att.TooltipControl>
            <CustomControl>
              <Bounds AlignmentToParent="left:5 top:5 right:5 bottom:5" MinSizeLimitation="LimitToElementAndChildren">
                <SolidLabel Text-bind="ViewModel.Name" Color="#FFFFFF" Font-eval="containerControl.Font"/>
              </Bounds>
            </CustomControl>
          </att.TooltipControl>
        </CustomControl>
      </TextListItemTemplate>
    </Instance>
  </Instance>

  <Instance name="DocumentEditorRibbonResource">
    <Instance ref.CodeBehind="false" ref.Class="demo::DocumentEditorRibbon" xmlns:demo="demo::*">
      <ref.Members>
        <![CDATA[
          @cpp:Private
          prop AlignLeftSelected : bool = true {}
          @cpp:Private
          prop AlignCenterSelected : bool = true {}
          @cpp:Private
          prop AlignRightSelected : bool = true {}
          @cpp:Private
          prop StyleGroups : demo::StyleGroup^[] = null {}

          @cpp:Private
          func GenerateStyleGroups(): demo::StyleGroup^[]
          {
            var group1 = new StyleGroup^();
            group1.Name = "Headers";
            group1.Items.Add(new StyleItem^("Header 1", {size:2  relative:true}, (cast Color "#FF8000"), null, null, null, null));
            group1.Items.Add(new StyleItem^("Header 2", {size:1.6  relative:true}, (cast Color "#FF8000"), null, null, null, null));
            group1.Items.Add(new StyleItem^("Header 3", {size:1.3  relative:true}, null, null, null, null, null));

            var group2 = new StyleGroup^();
            group2.Name = "Content";
            group2.Items.Add(new StyleItem^("Strong", null, null, true, null, null, null));
            group2.Items.Add(new StyleItem^("Quote", null, null, null, true, null, null));
            group2.Items.Add(new StyleItem^("Emphasis", null, null, null, true, true, null));
            group2.Items.Add(new StyleItem^("Intense Emphasis", null, (cast Color "#8080FF"), null, true, true, null));
            group2.Items.Add(new StyleItem^("Deleted", null, null, null, null, null, true));

            var styles = document.Document.styles;
            for (styleItem in group1.Items)
            {
              styles.Set(styleItem.Name, styleItem.Style);
            }
            for (styleItem in group2.Items)
            {
              styles.Set(styleItem.Name, styleItem.Style);
            }

            return {group1 group2};
          }

          @cpp:Private
          func SelectStyleName(styleName : string?): void
          {
            if (styleName is not null)
            {
              for (groupIndex in range[0, StyleGroups.Count))
              {
                var group = StyleGroups[groupIndex];
                for (itemIndex in range[0, group.Items.Count))
                {
                  if (group.Items[itemIndex].Name == cast string styleName)
                  {
                    styleGallery.SelectItem(styleGallery.GalleryPosToIndex({group:groupIndex item:itemIndex}));
                    return;
                  }
                }
              }
            }
            styleGallery.SelectItem(-1);
          }
        ]]>
      </ref.Members>
      <ref.Ctor>
        <![CDATA[
          {
            StyleGroups = GenerateStyleGroups();
            attach(document.SelectionChanged, func(sender: GuiGraphicsComposition*, arguments: GuiEventArgs*): void
            {
              SelectStyleName(document.SummarizeStyleName(document.CaretBegin, document.CaretEnd));
            });
          }
        ]]>
      </ref.Ctor>
      <demo:DocumentEditorBase ref.Name="self" Text="Document Editor (Ribbon)">
        <att.AlignLeftSelected-bind>self.document.observe as _(self.SelectAlignmentCommand() == self.commandAlignLeft on _.SelectionChanged)</att.AlignLeftSelected-bind>
        <att.AlignCenterSelected-bind>self.document.observe as _(self.SelectAlignmentCommand() == self.commandAlignCenter on _.SelectionChanged)</att.AlignCenterSelected-bind>
        <att.AlignRightSelected-bind>self.document.observe as _(self.SelectAlignmentCommand() == self.commandAlignRight on _.SelectionChanged)</att.AlignRightSelected-bind>

        <MessageDialog ref.Name="dialogMessage" Title="You Expanded a Group!" Text="GuiRibbonGroup::ExpandButtonClicked is executed!"/>

        <att.MenuContainer-set>
          <RibbonTab>
            <att.BoundsComposition-set AlignmentToParent="left:0 top:0 right:0 bottom:0"/>

            <att.BeforeHeaders-set>
              <Button Text="  HOME  ">
                <att.BoundsComposition-set AlignmentToParent="left:0 top:0 right:0 bottom:0"/>
              </Button>
            </att.BeforeHeaders-set>

            <att.AfterHeaders-set>
              <Button Text="  WHATEVER  ">
                <att.BoundsComposition-set AlignmentToParent="left:0 top:0 right:0 bottom:0"/>
              </Button>
            </att.AfterHeaders-set>

            <att.Pages>
              <RibbonTabPage Text="Edit">
                <att.ContainerComposition-set PreferredMinSize="y:110"/>
                <att.Groups>
                  <RibbonGroup Text="Alignment" Expandable="true" LargeImage-uri="res://ToolbarImages/EditableLarge">
                    <ev.ExpandButtonClicked-eval>
                      <![CDATA[
                        {
                          dialogMessage.ShowDialog();
                        }
                      ]]>
                    </ev.ExpandButtonClicked-eval>
                    <att.Items>
                      <RibbonLargeDropdownButton Text="Edit Mode">
                        <att.LargeImage-bind>self.EditModeCommand.LargeImage ?? null</att.LargeImage-bind>
                        <att.SubMenu-set>
                          <MenuItemButton Command-eval="self.commandViewOnly" Alt="V"/>
                          <MenuItemButton Command-eval="self.commandSelectable" Alt="S"/>
                          <MenuItemButton Command-eval="self.commandEditable" Alt="E"/>
                        </att.SubMenu-set>
                      </RibbonLargeDropdownButton>
                      <RibbonSplitter/>
                      <RibbonButtons MaxSize="Large" MinSize="Icon">
                        <att.Buttons>
                          <ToolstripButton Command-eval="self.commandAlignLeft" Selected-bind="self.AlignLeftSelected"/>
                          <ToolstripButton Command-eval="self.commandAlignCenter" Selected-bind="self.AlignCenterSelected"/>
                          <ToolstripButton Command-eval="self.commandAlignRight" Selected-bind="self.AlignRightSelected"/>
                        </att.Buttons>
                      </RibbonButtons>
                    </att.Items>
                  </RibbonGroup>

                  <RibbonGroup Text="Edit" LargeImage-uri="res://ToolbarImages/PasteLarge">
                    <att.Items>
                      <RibbonButtons MaxSize="Large" MinSize="Icon">
                        <att.Buttons>
                          <ToolstripButton Command-eval="self.commandUndo"/>
                          <ToolstripButton Command-eval="self.commandRedo"/>
                        </att.Buttons>
                      </RibbonButtons>
                      <RibbonSplitter/>
                      <RibbonButtons MaxSize="Large" MinSize="Icon">
                        <att.Buttons>
                          <ToolstripButton Command-eval="self.commandCopy"/>
                          <ToolstripButton Command-eval="self.commandCut"/>
                          <ToolstripButton Command-eval="self.commandPaste"/>
                        </att.Buttons>
                      </RibbonButtons>
                      <RibbonSplitter/>
                      <RibbonLargeButton Command-eval="self.commandDelete"/>
                    </att.Items>
                  </RibbonGroup>

                  <RibbonGroup Text="Text">
                    <att.Items>
                      <RibbonToolstrips>
                        <att.Groups>
                          <ToolstripGroup>
                            <ToolstripButton Command-eval="self.commandBold"/>
                            <ToolstripButton Command-eval="self.commandItalic"/>
                          </ToolstripGroup>
                          <ToolstripGroup>
                            <ToolstripButton Command-eval="self.commandUnderline"/>
                            <ToolstripButton Command-eval="self.commandStrike"/>
                          </ToolstripGroup>
                          <ToolstripGroup>
                            <ToolstripButton Command-eval="self.commandFont"/>
                            <ToolstripButton Command-eval="self.commandColor"/>
                            <ToolstripButton Command-eval="self.commandBackColor"/>
                          </ToolstripGroup>
                          <ToolstripGroup>
                            <ToolstripButton Command-eval="self.commandEditHyperlink"/>
                            <ToolstripButton Command-eval="self.commandRemoveHyperlink"/>
                          </ToolstripGroup>
                        </att.Groups>
                      </RibbonToolstrips>
                    </att.Items>
                  </RibbonGroup>

                  <RibbonGroup Text="Style" LargeImage-uri="res://ToolbarImages/EditableLarge">
                    <att.Items>
                      <BindableRibbonGalleryList ref.Name="styleGallery" ItemTemplate="demo:StyleItemTemplate" MinCount="2" MaxCount="5" VisibleItemCount="5" env.ItemType="demo::StyleGroup^">
                        <att.ItemSource-bind>self.StyleGroups</att.ItemSource-bind>
                        <att.GroupTitleProperty>Name</att.GroupTitleProperty>
                        <att.GroupChildrenProperty>Items</att.GroupChildrenProperty>

                        <att.SubMenu-set>
                          <RibbonToolstripHeader Text="Header A"/>
                          <MenuItemButton Text="Item A1"/>
                          <MenuItemButton Text="Item A2"/>
                          <MenuItemButton Text="Item A3"/>
                          <RibbonToolstripHeader Text="Header B"/>
                          <MenuItemButton Text="Item B1"/>
                          <MenuItemButton Text="Item B2"/>
                          <MenuItemButton Text="Item B3"/>
                        </att.SubMenu-set>

                        <ev.ItemApplied-eval>
                          <![CDATA[
                            {
                              if (arguments.itemIndex != -1)
                              {
                                var pos = styleGallery.IndexToGalleryPos(arguments.itemIndex);
                                self.document.ClearStyle(self.document.CaretBegin, self.document.CaretEnd);
                                self.document.EditStyleName(self.document.CaretBegin, self.document.CaretEnd, self.StyleGroups[pos.group].Items[pos.item].Name);
                              }
                            }
                          ]]>
                        </ev.ItemApplied-eval>
                      </BindableRibbonGalleryList>
                    </att.Items>
                  </RibbonGroup>
                </att.Groups>
              </RibbonTabPage>

              <RibbonTabPage Text="Insert" Highlighted="true">
                <att.Groups>
                  <RibbonGroup Text="Object">
                    <att.Items>
                      <RibbonButtons MaxSize="Large" MinSize="Small">
                        <att.Buttons>
                          <ToolstripButton Command-eval="self.commandInsertImage"/>
                          <ToolstripButton Command-eval="self.commandEditHyperlink"/>
                          <ToolstripButton Command-eval="self.commandRemoveHyperlink"/>
                        </att.Buttons>
                      </RibbonButtons>
                    </att.Items>
                  </RibbonGroup>
                </att.Groups>
              </RibbonTabPage>
            </att.Pages>
          </RibbonTab>
        </att.MenuContainer-set>
      </demo:DocumentEditorBase>
    </Instance>
  </Instance>
</Folder>