CODEWITHSUNDEEP
c#xamluwp
Asem Khen
Asem Khen

Reputation: 361

Add Acrylic effect on Button Flyout

In Xaml, I have simple Flyout windows like the ones described below:

<Button Content="Clickable">
  <Button.Flyout>
    <Flyout>
      <TextBlock Text="My Flyout have several text elements"/>
    </Flyout>
  </Button.Flyout>
</Button>

How can I apply the Windows 10 acrylic effect on the Flyout panel?

Upvotes: 1

Views: 392

Answers (1)

Shubham Sahu
Shubham Sahu

Reputation: 2015

<Button Content="Clickable" Height="55" Width="255" HorizontalAlignment="Center" Style="{ThemeResource ButtonRevealStyle}">
    <Button.Flyout>
        <Flyout>
            <Flyout.FlyoutPresenterStyle>
                <Style TargetType="FlyoutPresenter">
                    <Setter Property="Background" Value="{ThemeResource SystemControlAcrylicElementMediumHighBrush}" />
                </Style>
            </Flyout.FlyoutPresenterStyle>
            <TextBlock Text="My Flyout have several text elements"/>
        </Flyout>
    </Button.Flyout>
</Button>

Screenshot

You Should Check this app to view more about controls and for more customize acrylic brush

Upvotes: 2

Related Questions