首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

UWP在导航视图中使用Acrylic

UWP(Universal Windows Platform)是微软推出的一种应用程序开发框架,旨在为不同设备上的Windows操作系统提供统一的应用程序体验。UWP应用程序可以在各种Windows设备上运行,包括PC、手机、平板电脑、Xbox等。

导航视图(NavigationView)是UWP中常用的一种用户界面控件,通常用于创建具有导航功能的应用程序。它提供了一个侧边栏菜单和一个主内容区域,用户可以通过点击菜单项来切换不同的页面或视图。

Acrylic是UWP中的一种特效效果,它可以为应用程序的背景和元素添加半透明的模糊效果,使应用程序看起来更加现代和吸引人。Acrylic效果可以应用于导航视图的背景、菜单项、标题栏等部分,以增强应用程序的视觉吸引力。

使用Acrylic效果可以为导航视图提供更加美观和吸引人的外观,提升用户体验。具体使用Acrylic效果的步骤如下:

  1. 在导航视图的XAML代码中,可以通过设置Background属性为AcrylicBrush来应用Acrylic效果。例如:
代码语言:txt
复制
<NavigationView Background="{ThemeResource AcrylicBackgroundBrush}">
    <!-- 导航视图的内容 -->
</NavigationView>
  1. 可以通过设置PaneBackground属性为AcrylicBrush来为导航视图的侧边栏菜单应用Acrylic效果。例如:
代码语言:txt
复制
<NavigationView PaneBackground="{ThemeResource AcrylicBackgroundBrush}">
    <!-- 导航视图的内容 -->
</NavigationView>
  1. 可以通过设置Header属性为AcrylicBrush来为导航视图的标题栏应用Acrylic效果。例如:
代码语言:txt
复制
<NavigationView>
    <NavigationView.Header>
        <Grid Background="{ThemeResource AcrylicBackgroundBrush}">
            <!-- 标题栏的内容 -->
        </Grid>
    </NavigationView.Header>
    <!-- 导航视图的内容 -->
</NavigationView>

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云服务器(CVM):提供可扩展的云服务器实例,适用于各种应用场景。产品介绍链接
  • 腾讯云数据库(TencentDB):提供高性能、可扩展的云数据库服务,包括关系型数据库和NoSQL数据库。产品介绍链接
  • 腾讯云CDN(Content Delivery Network):提供全球加速的内容分发网络,加速静态和动态内容的传输。产品介绍链接
  • 腾讯云人工智能(AI):提供丰富的人工智能服务,包括图像识别、语音识别、自然语言处理等。产品介绍链接
  • 腾讯云物联网(IoT):提供全面的物联网解决方案,帮助连接和管理物联网设备。产品介绍链接

请注意,以上推荐的腾讯云产品仅供参考,具体选择和使用需根据实际需求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何使用Fluent Design System (上)

至于UWP要做成怎么样,怎么做,可以参考这个视频: Build Amazing Apps with Fluent Design - Build 2017 视频中使用BuildCast这个示例应用详细展示了...简单来说Acrylic只是一个Brush,UWP提供了一组Acrylic Brush给开发者使用,通过ThemeResource找到资源名字包含“Acrylic”的Brush即可轻松应用中使用Acrylic...2.4 Motion UWP控件自带的动画已经不少,Connected animations则更进一步。Connected animations通常用于导航引导视觉,定位操作对象。 ?...Fall Creators Update升级应用 Fall Creators Update只需要修改导航及标题栏,应用的UI即可有大幅提升。 ?...3.1 使用NavigationView更新导航菜单 以前很多教程都专门讲解了怎么制作汉堡包菜单,现在UWP终于提供了默认方案。

2.4K30

使用Acrylic(亚克力)

使用Acrylic 2.1 XAML中使用Acrylic UWP提供了一组已定义好的Acrylic Brush供开发者使用,通过ThemeResource找到资源名字包含“Acrylic”的Brush...Acrylic具体来说包含两种: Background acrylic 透视整个应用UI,可以看到应用窗体后的其它应用或桌面(ThemeResource名称包含 -AcrylicWindow-)。...In-app acrylic 只透视套用了acrylic brush的元素(ThemeResource名称包含 -AcrylicElement-)。 ? ?...Background acrylic常见的应用场景包括: 作为导航菜单的背景: ? Widget或轻量级应用可以整个应用的背景使用Acrylic,像计算器那样: ?...有些应用在导航、弹出提示或最大化/还原时会让窗口一时失去焦点,这样就造成使用了background acrylic的地方(通常是整个导航菜单)意外地闪烁了一下。老是这样还挺烦人的要谨慎处理。 6.

1.1K20
  • 如何使用Fluent Design System (下)

    4.1 使用HamburgerMenu代替NavigationView UWP Community Toolkit的HamburgerMenu是以前制作汉堡包导航菜单最常用的方案,升级到2.0版本以后它会判断运行的...5.2 错误使用Acrylic Acrylic有些难用,一般来说Acrylic只应该作为背景使用在菜单、弹出遮罩或Flyout等,程序的主体区域的背景不可以使用Acrylic。...作为例外,Widget或轻量级应用可以整个应用的背景使用Acrylic,像计算器应用那样。 ?...文档方面,Material Design有很详细的使用规范、指导原则,而且有面向设计师的文档,而FDS还太过空泛,文档主要是面向开发者的,各种规范分布UWP的开发文档。...当年也曾热衷于桌面上使用Metro,但现在对WPF上使用FDS没什么兴趣。何况这个主题是讨论UWP额FDS,不太想涉及WPF。

    1.2K20

    WindowsXamlHost: WPF 中使用 UWP 控件库的控件

    WindowsXamlHost: WPF 中使用 UWP 的控件(Windows Community Toolkit) 一文,我们说到了 WPF 引入简单的 UWP 控件以及相关的注意事项...创建一个 UWP 控件库 建议专门为你复杂的 UWP 控件创建一个 UWP 控件库。在这个控件库的开发就像普通 UWP 应用一样。...image.png ▲ 创建一个 UWP 控件库 image.png ▲ 选择 SDK 版本 对 WPF 项目的准备工作 你依然需要阅读 WindowsXamlHost: WPF 中使用...不过现在来看,还不能如此方便地使用。 编辑 UWP 项目文件 是的,你需要手工编写 UWP 的项目文件。... WPF 项目中使用 UWP 控件库的控件 这时, WindowsXamlHost 中就可以添加 UWP 控件库的 MainPage 了。

    5.9K20

    就会发现 WinUI 3 没有设计视图

    Native wrapper生成好之后会保存到方法的Method::_from_compiled_entry属性。...工作遇到阻滞时,越是投入工作越是找不到解决方案,这时候把目光从屏幕挪开,说不定在一边洗澡一边玩着小黄鸭时,一边发呆一边看着窗外时,一边睡觉一边扣肚子时,遴选真题解决问题的灵感突然就掉进了脑海里。...没有 Background acrylic 和 RevealBoraderBrush,Win2D 也缺了 CanvasAnimatedControl,这些东西的缺失提高了从 UWP 迁移到 WinUI...创建好项目后就会发现 WinUI 3 没有设计视图(以后应该也不会有),所以这时候最好还是再创建一个 UWP 项目, UWP 项目中把 XAML 遴选真题设计好再复制到 WinUI 3 项目。...迁移过程需要将大部分 Windows.* 命名空间替换成 Microsoft.*。不过 Win2D 里还在用 Windows.* 命名空间,所以搞得有些混乱。

    1.6K20

    用 WinUI 3 开发了一个摸鱼应用

    简单来说,WinUI 3 将 UWP 的 UI 层分离出来给 Win32 Windows App 使用。...3 没有设计视图(以后应该也不会有),所以这时候最好还是再创建一个 UWP 项目, UWP 项目中把 XAML 设计好再复制到 WinUI 3 项目。...所有代码完成后,最后一步是发布到商店,幸好发布流程和 UWP 的基本一致,现在已经可以商店下载这款 App。 4. 遇到的问题 没有设计视图,这是个很严重的问题。...文档混乱,几乎所有 UWP 和 Windows App SDK 的文档合并了,这就要命了,真的要命,例如 WinUI 3 的文档有指向 Mica 的导航,明明 WinUI 3 都不支持 Mica。...没有 Background acrylic 和 RevealBoraderBrush,Win2D 也缺了 CanvasAnimatedControl,这些东西的缺失提高了从 UWP 迁移到 WinUI

    2.2K30

    win10 uwp 使用 Geometry resources xaml

    经常会遇到 xaml 使用矢量图,对于 svg 的矢量图,一般都可以拿出来写在 Path 的 Data ,所以可以写为资源,但是写出来的是字符串,如何绑定 Geometry 到字符串资源?...那么如何在用户控件使用资源的字符串 可以使用绑定,如果无法转换,可以写一个转换 先创建一个转换类 public class GeometryConvert : IValueConverter {...targetType, object parameter, string language) { throw new NotImplementedException(); } } 然后使用绑定的地方使用转换...所以,需要绑定字符串,可以使用这个方法。...有人说,绑定到字符串可以不使用转换,他可以做到,直接使用绑定,但是我暂时没法 https://stackoverflow.com/a/45142555/6116637 ----

    44620

    win10 uwp 使用 Geometry resources xaml

    经常会遇到 xaml 使用矢量图,对于 svg 的矢量图,一般都可以拿出来写在 Path 的 Data ,所以可以写为资源,但是写出来的是字符串,如何绑定 Geometry 到字符串资源?...43.006,53.0074L 49.0068,53.0074L 49.0068,36.005L 38.0053,26.9204 Z 然后发现使用的是...可以使用绑定,如果无法转换,可以写一个转换 先创建一个转换类 public class GeometryConvert : IValueConverter { public object Convert...targetType, object parameter, string language) { throw new NotImplementedException(); } } 然后使用绑定的地方使用转换...有人说,绑定到字符串可以不使用转换,他可以做到,直接使用绑定,但是我暂时没法 https://stackoverflow.com/a/45142555/6116637

    34730

    PasswordVault —— UWP 应用安全地保存密码

    PasswordVault —— UWP 应用安全地保存密码 2018-06-15 13:43 只要你做过自动登录,一定会遇到密码的安全问题...---- 我 ERMail 应用的开发中就遇到了这样的问题,作为一款邮件客户端,IMAP 协议下的自动登录依然要在用户的本地保存密码。...Docs,使用起来也是非常简单的。...每一个 UWP 应用之间的 PasswordVault 是独立且互相不可访问的,普通用户也无法直接获取到密码;对于黑客,如果无法黑掉用户账户,也是无法解密出密码的,所以一般使用场景下,安全性是够的。... ERMail ,考虑到多数代码是跨平台的,所以我使用 IPasswordManager 接口来隔离这种 UWP 平台特定的方法。

    1.6K30

    ASP.NET Core 5.0 MVC视图分类及使用——布局视图、启动视图、导入视图、详细视图、分部视图

    创建MVC应用程序   创建后的项目 启动视图 _ViewStart.cshtml 顾名思义,就是View开始执行之前执行,而且是每一个View, 它的预设内容是 @{ Layout =..."_Layout"; } 我们可以在这个页面,添加一些全局性的内容,比如全局变量等,然后具体View页面使用这些变量值 导入视图_ViewImports.cshtml, 它的作用是放一些要引用的命名空间...布局视图_Layout.cshtml 它的作用是让所有的视图页保持一致的外观,比如说 统一的 左侧目录、统一的头部导航、头部轮廓图、统一底部官网链接等。它的预设内容是 <!...运行效果 将下面这些数据,加到各自页面,运行Index页面观察效果 _ViewStart.cshtml页面 <h2 style="color:green...<em>在</em>Index相同的目录下新建<em>视图</em>页_PartialIndex,并加入一些数据   2.

    37010

    怎么 Laravel 移除核心服务-视图

    create-project laravel/laravel=7.* laravel-demo 然后我们直接使用内置的服务运行 cd laravel-demo && php artisan serve...code' => 200, 'msg' => 'hello' ]; }); 然后再访问8000端口 Laravel 然后我们开始注释config/app.php视图提供者...不过在想这两个并没有什么关系,后面排查了一会,终于找到问题所在 Laravel Laravel 其实是这个web中间组里的ShareErrorsFromSession, 从Session获取错误...($request, $exception); } 再次访问页面就可以看到自定义的错误了 错误 More 上面已经说了如果移除服务,但是项目API和admin混合,admin需要使用视图...这种时候我的建议是config/app.php增加一个配置enable_admin, 然后判断当前环境是API移除掉不必要服务提供者,也不要启动后台的服务,具体可查看减少服务提供者的启动加速你服务的性能

    12110

    Swift创建可缩放的图像视图

    本教程,我们将建立一个可缩放、可平移的图像视图来实现这一功能。 计划 他们说,一张图片胜过千言万语--但它不一定要花上一千行代码!对于我们的可缩放图像视图,我们要做的是让它成为一个可缩放的视图。...medium.com/media/afad3… commonInit(),我们将图像视图居中,并设置它的高度和宽度,而不是把它固定在父视图上。这样一来,滚动视图就会从图像视图中获得其内容大小。...设置滚动视图 我们需要实际设置我们的滚动视图,使其可缩放和可平移。这包括设置最小和最大的缩放级别,以及指定用户放大时使用的UIView(我们的例子,它将是图像视图)。...接下来,选择该视图导航到身份检查器,并将该类设置为PanZoomImageView。...试试平移和缩放(如果你使用的是模拟器,按住 "option "键)--你会对你的图像有一个全新的视角 以编程方式初始化视图 使用界面生成器时,这很好--但如果你想以编程方式初始化视图呢?

    5.7K20

    推荐一款很Fluent Design的bilibili UWP客户端 : 哔哩

    UWP已经有好几个Bilibili的客户端,最近又多了一个: 哔哩 - Microsoft Store ? 作者云之幻是一位很擅长设计的UWP开发者,我也从他那里学到了很多设计方面的技巧。...它还是一位Bilibili的Up主,主打PowerPoint和UWP教学。 云之幻的个人空间 - 哔哩哔哩 ( ゜- ゜)つロ 乾杯~ ?...既然是一位设计方面的专家,这个UWP客户端当然有出色的设计。...和过去几个同类应用不同,它整个UI经过全新设计,包含UWP各种时髦的设计元素,例如acrylic、reveal、connected-animation等都用上了,可以说是十分Fluent Design。...还有“打开新窗口”这个功能,可以新的窗口中打开正在播放的视频,这样就可以同时看两个视频,达到双倍的快乐: ?

    2.9K50

    WPF 程序应用 Windows 10 真•亚克力效果

    不过相比于 UWP 来说,可定制性会差很多。 本文介绍如何在 WPF 程序应用 Windows 10 真•亚克力效果。(而不是一些流行的项目里面自己绘制的亚克力效果。)...---- API 需要使用的 API 是微软的文档并未公开的 SetWindowCompositionAttribute。...我另一篇博客中有介绍此 API 各种用法的效果,详见: 使用 SetWindowCompositionAttribute 来控制程序的窗口边框和背景(可以做 Acrylic 亚克力效果、模糊效果、主题色效果等...) - walterlv 当然,使用此 API 也可以做 Windows 10 早期的模糊效果,比如: Windows 10 上为 WPF 窗口添加模糊特效(就像开始菜单和操作中心那样) - walterlv...- Stack Overflow 本文会经常更新,请阅读原文: https://blog.walterlv.com/post/using-acrylic-in-wpf-application.html

    48510

    WindowsXamlHost: WPF 中使用 UWP 的控件(Windows Community Toolkit)

    以前可以 WPF 中使用有限的 UWP 控件,而现在有了 WindowsXamlHost,则可以使用更多 UWP 原生控件了。...配置 WPF 项目能访问 UWP 的类型 因为我们即将开始使用UWP 的控件类型,所以需要配置项目能够访问到 Windows Runtime 的类型。 ?...▲ 添加 Windows.Foundation.FoundationContract.winmd 开始 WPF 中使用 UWP 的控件 你可以像使用普通 WPF 控件一样将 WindowsXamlHost...因为我们不是原生的 UWP,而是 Host WPF UWP 控件,所以会没有 Application。这在 UWP 控件初始化内部已经 catch 了,所以你可以忽略。...阅读以下文章了解更多: WindowsXamlHost: WPF 中使用 UWP 控件库的控件 - walterlv ---- 参考资料 WindowsXAMLHost control - Windows

    4.7K20
    领券