Всплывающее окно с Fluent Design System - приложение UWP

Question

У меня есть приложение UWP в Microsoft/Windows Store, и я хочу добавить всплывающее окно. Это всплывающее окно появляется, когда я нажимаю кнопку. Возможно ли для всплывающего окна использовать Fluent Design System (прозрачный фон)?

Answer 1

Да, это. Следующий пример взят из документации по классу Popup их Microsoft, здесь:

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>

Просто меняя Background свойство зависимости Border объект из:

Background="{StaticResource ApplicationPageBackgroundThemeBrush}" 

в

Background="{StaticResource NavigationViewExpandedPaneBackground}"

ваше всплывающее окно будет иметь акриловый фон (этот ресурс представляет собой акриловую кисть в шаблоне NavigationView, определенного для одного из его визуальных состояний).

Или вы всегда можете создать свой собственный ресурс Acrylic Brush:

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

И с этим вы можете установить свойство Border Background для вашего пользовательского ресурса, например так:

Background="{StaticResource myacrylicbrush}"

И отрегулируйте настройки, чтобы получить внешний вид, к которому вы стремитесь. Для BackgroundSource задано значение HostBackDrop, для использования фонового акрила для слоя наложения "Оттенок" установлено значение, которое будет довольно прозрачным, а для цвета TintColor - полностью непрозрачный синий.

Результат:

Если вы хотите определить Background собственность как Acrylic brush Как бы то ни было, если вы нацеливаетесь на приложение с обновлением Falls Creator, я думаю, что вопрос, вероятно, должен быть наоборот: где я не могу использовать новые выпущенные функции?