WinUWP应用构建UI篇( 1)—— 亚克力板界面

这篇具有很好参考价值的文章主要介绍了WinUWP应用构建UI篇( 1)—— 亚克力板界面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、亚克力背景

1、设置控件背景为亚克力

为控件的Background属性添加亚克力画笔(AcrylicBrush)
Gird

<Grid FocusVisualPrimaryBrush="Black">
	<Grid.Background>
		<AcrylicBrush BackgroundSource="HostBackdrop"/>
	</Grid.Background>
</Grid>

其中:

<AcrylicBrush BackgroundSource="HostBackdrop"/>

BackgroundSource属性的"HostBackdrop"说明来自应用窗口后边,除此之外,填写"Backdrop"表示来自应用内容中

填入"HostBackdrop"的效果如图
WinUWP应用构建UI篇( 1)—— 亚克力板界面
这样就美观许多了

2、将亚克力背景延伸到标题栏

如上图所示,这样的标题栏仍然不够美观。

这里,我们写一个方法来实现拓展亚克力效果到标题栏

private void ExtendAcrylicIntoTitleBar() {
	CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
	ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
	titleBar.ButtonBackgroundColor = Colors.Transparent;
	titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
	titleBar.ButtonForegroundColor = Colors.Black;
}

(使用 Visual Studio 可自动 using 缺少的命名空间)

将其在App.xmal.csOnLaunch中调用即可

看一下最终效果

WinUWP应用构建UI篇( 1)—— 亚克力板界面

注意:这个原理是将标题栏右上角三个按钮的背景设置为白色,同时将应用内容延伸到标题栏。因此标题栏之所以能有亚克力背景,是因为我们把Gird设置成了亚克力背景的同时将其拓展到标题栏。

二、带有深度变化的亚克力背景

先看一下效果

WinUWP应用构建UI篇( 1)—— 亚克力板界面
可以看到,在按下按钮后仿佛背景中的沙糖桔被“拿远了”,同时亚克力变模糊。

其实,这是一个组合动画

当按钮第一次按下时:

  • 背景沙糖桔图片被缩小(看起来仿佛被拿远)
  • 亚克力前景的不透明度从0增大到100%

当按钮再次按下时:

  • 背景沙糖桔图片被放大到原来的1.1倍
  • 亚克力前景的不透明度从100%减小到0

就像这样:
WinUWP应用构建UI篇( 1)—— 亚克力板界面

注意:接下来的操作使用了Microsoft.Toolkit.Uwp.UI.Animations
 
此包需要自行手动安装!!!安装方法如下
 
1、右键工程,点击NuGet程序包。WinUWP应用构建UI篇( 1)—— 亚克力板界面
2、搜索Microsoft.Toolkit.Uwp.UI.Animations并安装。WinUWP应用构建UI篇( 1)—— 亚克力板界面

先声明xaml命名空间:

<Page
	....
	xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"
	xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
	....>

	....

</Page>

我们在XMAL上放一个背景图片<Image />(或其他)和用作亚克力前景的<Gird />(或其他)

<Image x:Name="img" HorizontalAlignment="Left" Height="388" VerticalAlignment="Top" Width="546" 
	Source="你要添加的图片元素.jpg" FocusVisualSecondaryBrush="#99FFFFFF" FocusVisualPrimaryBrush="Black"
	ui:VisualExtensions.CenterPoint="258.5,194,0">

    <animations:Implicit.Animations>
        <animations:ScaleAnimation Duration="00:00:0.8" />
    </animations:Implicit.Animations>
</Image>

<Grid x:Name="acrylicGird" HorizontalAlignment="Left" Height="388" VerticalAlignment="Top" Width="517">
	<Grid.Background>
		<AcrylicBrush BackgroundSource="Backdrop" TintColor="#CCA3A3A3" TintOpacity="0" Opacity="1" AlwaysUseFallback="False"/>
	</Grid.Background>
	
	<animations:Implicit.ShowAnimations>
		<animations:OpacityAnimation Duration="0:0:0.8" To="1.0"></animations:OpacityAnimation>
	</animations:Implicit.ShowAnimations>
	
	<animations:Implicit.HideAnimations>
		<animations:OpacityAnimation Duration="0:0:0.8" From="1.0" To="0"></animations:OpacityAnimation>
	</animations:Implicit.HideAnimations>
	
	<TextBlock x:Name="text2" HorizontalAlignment="Center" Margin="0,206,0,0" TextWrapping="Wrap" Text="是否保存更改?" VerticalAlignment="Top" FontSize="24" Foreground="White"></TextBlock>
</Grid>

<animations:Implicit.HideAnimations />表示隐藏时的隐式动画,<animations:Implicit.ShowAnimations />表示出现时的隐式动画。
<animations:Implicit.Animations />表示其他隐式动画。如上文<Image />上的 <animations:ScaleAnimation /> 是缩放时的隐式动画。

隐式动画:由系统代你执行的动画。不需要你显式写代码控制。例如上文的隐藏时和出现动画,当你改变View的Visibility属性时会自动执行动画

至此,我们声明了所有需要的隐式动画,只需要在代码中变化相应的属性即可。

///暂存img的可使性
private bool imgVisibility = true;

private void Button_Click_1(object sender, RoutedEventArgs e)
{
    if(imgVisibility == true)
    {
        acrylicGird.Visibility = Visibility.Collapsed;
        imgVisibility = false;
        var visual = ElementCompositionPreview.GetElementVisual(img);
        visual.Scale = new Vector3(1.2f, 1.2f, 1);
    }
    else
    {
        acrylicGird.Visibility = Visibility.Visible;
        imgVisibility = true;
        var visual = ElementCompositionPreview.GetElementVisual(img);
        visual.Scale = new Vector3(1.0f, 1.0f, 1);
    }
}

注意:控制<Image />缩放的时候并没有直接改变img.Scale属性,而是获取了img对象的Visual,对Visual操作的缩放。

(使用动画的时候直接操作img.Scale属性会抛出异常,导致应用退出)

var visual = ElementCompositionPreview.GetElementVisual(img);
visual.Scale = new Vector3(1.0f, 1.0f, 1);

这样就有了此节开头动态图的效果文章来源地址https://www.toymoban.com/news/detail-448553.html

到了这里,关于WinUWP应用构建UI篇( 1)—— 亚克力板界面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 界面控件DevExtreme中文使用指南——如何构建 & 应用模板

    DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序,该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。 模板允许您自定义DevExtreme UI组件,本文概述Dev

    2024年02月08日
    浏览(39)
  • 【Unity】实用功能开发(一)实现在UI中用RawImage实时展示3D模型(背景透明,并通过UI防止3D场景遮挡)并可以通过分层完成:游戏中的人物状态展示界面,小地图,人物实时头像状态等功能

    有时由于项目效果需要,部分功能的实现受到阻碍,这里收集一些已实现的思路和方法,每次会记录大致需求和遇到的问题,如果有更好的想法,欢迎评论区讨论!!! 目录 功能描述: 需求描述: 实现步骤: ①为需要展示的内容区分层级: ②在场景中添加一个摄像机,并

    2024年02月04日
    浏览(48)
  • Fabulous: 构建可配置的声明式 UI 应用

    Fabulous 是一个基于 F# 的声明式 UI 框架,它允许开发者以简洁、高效的方式构建跨平台的应用程序。在本文中,我们将了解什么是 Fabulous,它可以用来做什么,以及它的主要特点。 Fabulous 是一款用于构建 Xamarin.Forms 和 GTK# 用户界面(UI)的应用框架。它基于 Elm 编程范例,采用

    2024年04月23日
    浏览(29)
  • 界面控件DevExpress WinForm中文教程 - 如何应用Windows 11 UI?

    DevExpress WinForm拥有180+组件和UI库,能为 Windows Forms 平台创建具有影响力的业务解决方案。 DevExpress WinForm 能完美构建流畅、美观且易于使用的应用程序,无论是Office风格的界面,还是分析处理大批量的业务数据,它都能轻松胜任! DevExpress WinForm组件允许开发人员轻松地引入受

    2024年02月08日
    浏览(54)
  • 【PyQt5】构建强大的Python图形用户界面应用程序 -- 入门指南

      作者主页: 爱笑的男孩。的博客_CSDN博客-深度学习,活动,python领域博主 爱笑的男孩。擅长深度学习,活动,python,等方面的知识,爱笑的男孩。关注算法,python,计算机视觉,图像处理,深度学习,pytorch,神经网络,opencv领域. https://blog.csdn.net/Code_and516?type=blog 个人简介:打工人。 持续分

    2024年02月15日
    浏览(54)
  • Kendo UI,一个加速Web应用界面开发的JavaScript组件库!

    Kendo UI是什么? 首先,Kendo UI是一个由四个JavaScript UI库组成的包,这些库是专为jQuery、Angular、React和Vue原生构建的,每一个都是用一致的API和主题构建的。所以无论开发者怎么选择,所开发的Web应用始终保持了现代的应用界面,响应迅速、可访问且速度快! 为什么要选择Ke

    2024年02月15日
    浏览(56)
  • ChatGPT在智能人机交互界面和UI设计中的应用如何?

    在智能人机交互界面和UI设计领域,ChatGPT可以发挥重要作用,为用户提供更加智能、自然和个性化的交互体验。其自然语言处理和生成能力使其成为创新的工具,可以改变用户与系统之间的互动方式,以下将详细探讨ChatGPT在这个领域的应用。 **1. 聊天式用户界面**:ChatGPT可以

    2024年02月11日
    浏览(43)
  • 探索Streamlit中强大而灵活的 st.write() 函数(五):构建丰富多样的应用界面

    在这篇博文中,我们将着重介绍Streamlit中一个核心而重要的函数,那就是st.write()。在之前的三篇文章(《Streamlit 讲解专栏(一):安装以及初步应用》、《Streamlit 讲解专栏(二):搭建第一个应用》和《 Streamlit 讲解专栏(三):两种方案构建多页面》)中,我们已经对S

    2024年02月14日
    浏览(44)
  • 界面控件Telerik UI for WPF——Windows 11主题精简模式提升应用体验

    Telerik UI for WPF拥有超过100个控件来创建美观、高性能的桌面应用程序,同时还能快速构建企业级办公WPF应用程序。Telerik UI for WPF支持MVVM、触摸等,创建的应用程序可靠且结构良好,非常容易维护,其直观的API将无缝地集成Visual Studio工具箱中。 随着最近R2 2023的发布,Telerik

    2024年02月10日
    浏览(56)
  • 界面开发框架DevExpress XAF v24.1新版预告 - 跨平台应用UI(二)

    DevExpress XAF是一款强大的现代应用程序框架,允许同时开发ASP.NET和WinForms。XAF采用模块化设计,开发人员可以选择内建模块,也可以自行创建,从而以更快的速度和比开发人员当前更强有力的方式创建应用程序。 本文中的内容概述了XAF跨平台.NET应用UI和DevExpress .NET App、Web A

    2024年04月23日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包