Default Theme

Ribbon Menu

Overview

Usage

Ribbon menu

<RibbonMenu ItemsSource=@Items>
    <ItemTemplate Context="tab">
        <RibbonTab ItemsSource=@tab.Groups HeaderText=@tab.Header>
            <ItemTemplate Context="groupData">
<RibbonGroup ItemsSource=@groupData ItemTransform=@itemTransform>
    <ItemTemplate Context="item">
        <TooltipHost>
            <TooltipContent>
<div>@(((RibbonItem)item).Text)</div>
            </TooltipContent>
            <ChildContent>
@switch (item)
{
    case ButtonViewModel buttonViewModel:
        <CommandBarButton IconName=@buttonViewModel.IconName
          IconSrc=@buttonViewModel.IconSrc
          Command=@buttonViewModel.Command
          CommandParameter=@buttonViewModel.CommandParameter
          Toggle=@buttonViewModel.Toggle />
        break;
    case DropDownViewModel dropDownViewModel:
        <Dropdown ItemsSource=@dropDownViewModel.DropdownOptions
  Placeholder="Select an option"
  @bind-SelectedOption=@dropDownViewModel.Selected
  Style=@("display: inline-block;width:" + @dropDownViewModel.Width) />
        break;
}
            </ChildContent>
        </TooltipHost>
    </ItemTemplate>
</RibbonGroup>
            </ItemTemplate>
        </RibbonTab>
    </ItemTemplate>
</RibbonMenu>

Ribbon Menu with backstage

@*<Toggle @bind-Checked=@ShowBackstage OnText="On!" OffText="Off!" Label="Backstage state" />*@
<RibbonMenu ItemsSource=@Items BackstageHeader="File" @bind-ShowBackstage=ShowBackstage>
    <ItemTemplate Context="tab">
        <RibbonTab ItemsSource=@tab.Groups HeaderText=@tab.Header>
            <ItemTemplate Context="groupData">
<RibbonGroup ItemsSource=@groupData ItemTransform=@itemTransform>
    <ItemTemplate Context="item">
        <TooltipHost>
            <TooltipContent>
<div>@(((RibbonItem)item).Text)</div>
            </TooltipContent>
            <ChildContent>
@switch (item)
{
    case ButtonViewModel buttonViewModel:
        <CommandBarButton IconName=@buttonViewModel.IconName
          IconSrc=@buttonViewModel.IconSrc
          Command=@buttonViewModel.Command
          CommandParameter=@buttonViewModel.CommandParameter
          Toggle=@buttonViewModel.Toggle />
        break;
    case DropDownViewModel dropDownViewModel:
        <Dropdown ItemsSource=@dropDownViewModel.DropdownOptions
  Placeholder="Select an option"
  @bind-SelectedOption=@dropDownViewModel.Selected
  Style=@("display: inline-block;width:" + @dropDownViewModel.Width) />
        break;
}
            </ChildContent>
        </TooltipHost>
    </ItemTemplate>
</RibbonGroup>
            </ItemTemplate>
        </RibbonTab>
    </ItemTemplate>
    <Backstage>
        <div style="width: 900px;background-color: white;">
            <div style="width:150px">
<NavBar Direction="LayoutDirection.Vertical" Items=@backstageItems />
            </div>
        </div>
    </Backstage>
</RibbonMenu>