带有 Fluent Design System 的弹出窗口 - UWP 应用答案

【问题标题】：Popup with Fluent Design System - UWP app带有 Fluent Design System 的弹出窗口 - UWP 应用
【发布时间】：2018-06-14 14:06:29
【问题描述】：

我在 Microsoft/Windows 应用商店中有一个 UWP 应用，我想添加一个弹出窗口。单击按钮时会出现此弹出窗口。弹窗是否可以有 Fluent Design System（透明背景）？

【问题讨论】：

标签： c# xaml uwp uwp-xaml fluent-design

【解决方案1】：

是的，是的。以下示例取自其 Microsoft 的 Popup 类文档here：

代码隐藏：

// 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>

只需将Border 对象的Background 依赖属性更改为：

Background="{StaticResource ApplicationPageBackgroundThemeBrush}"

到

Background="{StaticResource NavigationViewExpandedPaneBackground}"

您的 Popup 将设置一个亚克力背景（这是在 NavigationView 的模板中为其一种视觉状态定义的亚克力画笔资源）。

或者您可以随时创建自己的亚克力画笔资源：

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

这样，您可以将 Border Background 属性设置为您的自定义资源，如下所示：

Background="{StaticResource myacrylicbrush}"

并调整设置以获得您所追求的外观。 BackgroundSource 设置为 HostBackDrop，为了使用您的 Background Acrylic，Tint 覆盖层设置为一个相当透明的值，而 TintColor 设置为完全不透明的蓝色。

结果：

如果您想将Background 属性定义为任何控件的Acrylic brush，如果您的目标是具有 Falls Creator 更新的应用程序，我认为问题应该是相反的：Where am我无法使用新发布的功能？

【讨论】：