UWPでItemsSourceを持ったMenuFlyoutを作る

MenuFlyout

UWPのMenuFlyoutですがItemsSourceがないので自分の好きなコレクションをメニューに配置することが難しいです。 そこで代用できるのが通常のFlyout + ItemsControlです。

実装

驚くほど簡単です

<Flyout>
    <ItemsControl ItemsSource="{x:Bind ViewModel.Collection, Mode=OneWay}">
        <ItemsControl.ItemTemplate>
            <DataTemplate x:DataType="hoge:HogeViewModel">
                <MenuFlyoutItem Text="{x:Bind Text, Mode=OneWay}" Command="{x:Bind HogeCommand}" CommandParameter="{x:Bind FugaParameter, Mode=OneWay}"/>
            </DataTemplate>
    </ItemsControl>
</Flyout>

ただ単にこのコードをコピペすると左右に隙間が空いて以下のようになってしまいます。

以下のコードをApp.xamlに仕込むかFlyoutPresenterのStyleをコピーしてPaddingを好きなようにいじると似せることが可能です。

<Thickness x:Key="FlyoutContentThemePadding">0,8</Thickness>

以下のようになります

MenuFlyoutとの違いはマウス操作時でもタッチ時でもMenuFlyoutItemの大きさが同じところと要素が多すぎるときに表示しきれなくなるところですね。 前者はともかく後者はScrollViewerとかを駆使すれば簡単にどうにかできそうです。