tmytのらくがき

個人の日記レベルです

MenuFlyoutとかを透けてる感じにしたい

16299で追加されたAcrylicBrushを使って、MenuFlyoutとかを透けてる感じにしたい。いろいろ試した結果、こうなりました。

<Grid>
  <Grid.Resources>
    <Style x:Key="FlyoutPresenterStyle" TargetType="FlyoutPresenter">
      <Setter Property="Background" Value="{ThemeResource SystemControlChromeMediumLowAcrylicElementMediumBrush}" />
    </Style>
    <Style x:Key="MenuFlyoutPresenterStyle" TargetType="MenuFlyoutPresenter">
      <Setter Property="Background" Value="{ThemeResource SystemControlChromeMediumLowAcrylicElementMediumBrush}" />
    </Style>
  </Grid.Resources>
  <Grid.ContextFlyout>
    <MenuFlyout MenuFlyoutPresenterStyle="{StaticResource MenuFlyoutPresenterStyle}">
      <MenuFlyoutItem Text="Item 1"/>
      <MenuFlyoutItem Text="Item 2"/>
    </MenuFlyout>
  </Grid.ContextFlyout>
  <Button HorizontalAlignment="Center" VerticalAlignment="Center" Content="Click me">
    <Button.Flyout>
      <Flyout FlyoutPresenterStyle="{StaticResource FlyoutPresenterStyle}">
        <TextBlock Text="Flyout Text" FontSize="64" />
      </Flyout>
    </Button.Flyout>
  </Button>
</Grid>

Flyoutと、MenuFlyoutは画面にインスタンス化されるとき、FlyoutPresenterを親とするポップアップになるけど そこの背景色を上書きするにはひとつづつスタイルを当てていかないとうまくいかなかった。

Generic.xamlとかで一気に上書きできるとよかったんだけど、そうもいかないみたいなので面倒だけどひとつずつ。。。