Popup with Fluent Design System - UWP app

Question

I have an UWP app in Microsoft/Windows Store, and I want to add a popup. This popup appears when I click a button. Is it possible for the popup to have the Fluent Design System (transparent background)?

Answer 1

Yes, it is. The following example, is taken from their Microsoft's Popup class documentation, here:

Code-Behind:

// Handles the Click event on the Button inside the Popup control and 
// closes the Popup. 
private void ClosePopupClicked(object sender, RoutedEventArgs e)
{
    // if the Popup is open, then close it 
    if (StandardPopup.IsOpen) { StandardPopup.IsOpen = false; }
}

// Handles the Click event on the Button on the page and opens the Popup. 
private void ShowPopupOffsetClicked(object sender, RoutedEventArgs e)
{
    // open the Popup if it isn't open already 
    if (!StandardPopup.IsOpen) { StandardPopup.IsOpen = true; }
} 

XAML:

<Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1">
    <StackPanel>
        <Button Content="Show Popup (using Offset)" Click="ShowPopupOffsetClicked"/>
    </StackPanel>
    <Popup VerticalOffset="10" HorizontalOffset="200" x:Name="StandardPopup">
        <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" 
                Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
                BorderThickness="2" Width="200" Height="200">
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                <TextBlock Text="Simple Popup" FontSize="24.667" HorizontalAlignment="Center"/>
                <Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center"/>
            </StackPanel>
        </Border>
    </Popup>
</Grid>

By simply changing the Background dependency property of the Border object from:

Background="{StaticResource ApplicationPageBackgroundThemeBrush}" 

to

Background="{StaticResource NavigationViewExpandedPaneBackground}"

your Popup will be set with an Acrylic Background (this one is an Acrylic Brush resource in the template of the NavigationView defined for one of its visual state).

Or you can always create your own Acrylic Brush resource:

<Grid.Resources>
<AcrylicBrush x:Name="myacrylicbrush" BackgroundSource="HostBackdrop"
                          TintColor="#FF0000FF"
                          TintOpacity="0.4"
                          FallbackColor="#FF0000FF"/>
</Grid.Resources>

And with this you can set the Border Background property to your custom resource, like this:

Background="{StaticResource myacrylicbrush}"

And adjust the settings to get the look your are striving for. BackgroundSource is set to HostBackDrop, to use your Background Acrylic, the Tint overlay layer is set to a value which will be rather transparent, while the TintColor is set to full opaque blue.

Result:

If you want to define the Background property as an Acrylic brush of any control, if you are targeting an app with Falls Creator update, I think the question should probably be the other way around: Where am I not able to utilize the new released features?