Microsoft-ui-xaml: Proposal: Add binding support to MenuFlyout

Created on 22 Jul 2019  路  1Comment  路  Source: microsoft/microsoft-ui-xaml

Proposal: [Add binding support to MenuFlyout

Summary

Presently items in a flyout need to be defined ahead of time and cannot be bound to a collection. Add an ItemSource property and enable databinding.

Rationale

  • Supports binding to arrays for displaying menu options corresponding to an array, enumeration or similar
  • Adds consistency with most other elements which support this form of binding

Scope

| Capability | Priority |
| :---------- | :------- |
| Developers should be able to bind a MenuFlyout to a source | Must |

feature proposal team-Controls

Most helpful comment

馃 There should be a corresponding ItemTemplate called out here too. This should also apply to the MenuBar APIs.

It should also be possible to compose a menu of pieces that are static XAML and also parts driven by a list (think having a recent file list be part of a menu or sub-menu like in VS Code):

image

<muxc:MenuBar>
  <muxc:MenuBarItem Title="File">
    <MenuFlyoutItem Text="New"/>
    <MenuFlyoutSubItem Text="Open Recent...">
      <MenuFlyoutItem Text="Reopen Closed Editor"/>
      <MenuFlyoutSeparator/>
      <muxc:MenuFlyoutItemSource ItemsSource="{Binding RecentFolders}">
          <muxc:MenuFlyoutItemSource.ItemTemplate>
             <DataTemplate>
                <MenuFlyoutItem Text="{Binding FolderName}"/>
            </DataTemplate>
         </muxc:MenuFlyoutItemSource.ItemTemplate>
      </muxc:MenuFlyoutItemSource>
      <MenuFlyoutSeparator/>
      <muxc:MenuFlyoutItemSource ItemsSource="{Binding RecentFiles}">
          <muxc:MenuFlyoutItemSource.ItemTemplate>
             <DataTemplate>
                <MenuFlyoutItem Text="{Binding FileName}"/>
            </DataTemplate>
         </muxc:MenuFlyoutItemSource.ItemTemplate>
      </muxc:MenuFlyoutItemSource>
      <MenuFlyoutSeparator/>
      <MenuFlyoutItem Text="More..."/>
    </MenuFlyoutSubItem>
  </muxc:MenuBarItem>

  <muxc:MenuBarItem Title="Dynamic" ItemSource="{Binding MyMenuItems}">
     <muxc:MenuBarItem.ItemTemplate>
        <DataTemplate>
           <MenuFlyoutItem Text="{Binding ItemTitle}"/>
        </DataTemplate>
     </muxc:MenuBarItem.ItemTemplate>
  </mucx:MenuBarItem>
</muxc:MenuBar>

>All comments

馃 There should be a corresponding ItemTemplate called out here too. This should also apply to the MenuBar APIs.

It should also be possible to compose a menu of pieces that are static XAML and also parts driven by a list (think having a recent file list be part of a menu or sub-menu like in VS Code):

image

<muxc:MenuBar>
  <muxc:MenuBarItem Title="File">
    <MenuFlyoutItem Text="New"/>
    <MenuFlyoutSubItem Text="Open Recent...">
      <MenuFlyoutItem Text="Reopen Closed Editor"/>
      <MenuFlyoutSeparator/>
      <muxc:MenuFlyoutItemSource ItemsSource="{Binding RecentFolders}">
          <muxc:MenuFlyoutItemSource.ItemTemplate>
             <DataTemplate>
                <MenuFlyoutItem Text="{Binding FolderName}"/>
            </DataTemplate>
         </muxc:MenuFlyoutItemSource.ItemTemplate>
      </muxc:MenuFlyoutItemSource>
      <MenuFlyoutSeparator/>
      <muxc:MenuFlyoutItemSource ItemsSource="{Binding RecentFiles}">
          <muxc:MenuFlyoutItemSource.ItemTemplate>
             <DataTemplate>
                <MenuFlyoutItem Text="{Binding FileName}"/>
            </DataTemplate>
         </muxc:MenuFlyoutItemSource.ItemTemplate>
      </muxc:MenuFlyoutItemSource>
      <MenuFlyoutSeparator/>
      <MenuFlyoutItem Text="More..."/>
    </MenuFlyoutSubItem>
  </muxc:MenuBarItem>

  <muxc:MenuBarItem Title="Dynamic" ItemSource="{Binding MyMenuItems}">
     <muxc:MenuBarItem.ItemTemplate>
        <DataTemplate>
           <MenuFlyoutItem Text="{Binding ItemTitle}"/>
        </DataTemplate>
     </muxc:MenuBarItem.ItemTemplate>
  </mucx:MenuBarItem>
</muxc:MenuBar>
Was this page helpful?
0 / 5 - 0 ratings