首页 文章

弹出与流畅的设计系统 - UWP应用程序

提问于
浏览 次
0

我在Microsoft / Windows Store中有一个UWP应用程序，我想添加一个弹出窗口 . 单击按钮时会出现此弹出窗口 . 弹出窗口是否可以使用Fluent设计系统（透明背景）？

c# xaml uwp uwp-xaml fluent-design

1 回答

  • 0

    是的 . 以下示例取自其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将设置为Acrylic背景（这是在为其视觉状态之一定义的NavigationView模板中的Acrylic Brush资源） .

    或者您始终可以创建自己的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设置为完全不透明蓝色 .

    结果：

    enter image description here

    如果你想将 Background 属性定义为任何控件的 Acrylic brush ，如果你的目标是使用Falls Creator更新的应用程序，我认为这个问题应该是另一种方式：我在哪里无法利用新发布的功能？

    回复于

相关问题