问题标签 [windows-composition-api]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
148 浏览

uwp - 如何在 CanvasGeometry 上添加效果

在我看来,Win2D 中可用的所有效果都是用于绘制图像的。

怎么样CanvasGeometry?我如何绘制CanvasGeometry使用,比如说发光效果?

谢谢。

0 投票
1 回答
58 浏览

uwp - 无法检索合成动画的缺失变量

我正在尝试使用 Composition Api 和 Expression Builder 来应用指针动画。我找到了我需要的样本,但代码不完整,我无法弄清楚如何获取变量centerdistanceToCenter的值。原始文档和示例在这里:

https://docs.microsoft.com/en-us/windows/uwp/composition/pointer-input-animations

示例代码(稍作修改):

0 投票
1 回答
71 浏览

animation - 旋转时如何使 Windows Composition UI ElementVisual 的背面与正面不同?

我有一个 uwp xaml 应用程序,在 UI 中有一系列按钮。

我正在使用 Windows 组合可视层 API 为 Button 的视觉对象之一的 RotationAngleInDegrees 设置动画。

按钮的内容在我预期的正面是可见的,但是当视觉对象的背面旋转到视图中时,它也是可见的(尽管反转)。

期望的结果是按钮看起来类似于被翻转的扑克牌,其中内容从正面可见,但在卡片翻转时隐藏。

我尝试了很多事情,包括:

  • 修改按钮模板以将内容演示者嵌套在父边框控件中,认为从后面查看时包含可能会遮挡前面

  • 将 Visual 的 BackfaceVisibility 属性设置为 CompositionBackfaceVisibility.Visible

  • 摆弄按钮背景颜色和视觉效果的不透明度设置

但是,Visual 元素似乎仍然是透明的,并且内容显示在旋转的视觉对象的两个面上。

这是 Windows 组合 API 中的限制还是错误?是否有一种简单的解决方法可以使视觉效果的背面显示的内容与正面显示的内容不同?

以下是生成动画的旋转代码的基础知识:

被翻转的按钮是一个默认的 xaml 按钮,最初的样式非常简单:

我的一项实验涉及修改默认按钮模板以将内容呈现器嵌套在几个边框容器中:

特别是部分修改部分是

这帮助我确认将按钮内容放在边框容器中并不会阻止视觉在旋转时被看到。

0 投票
0 回答
186 浏览

c# - 是否可以控制合成 XAML ElementVisual 剪辑?

我正在使用 UWP 并使用 Composition API 以编程方式缩放嵌套在典型 XAML 层次结构中的子文本视觉对象。我们应用程序中的文本块包含在边框之类的东西中,其中许多边框是 GridView 中包含的项目。

在许多情况下,我都遇到了相关文本视觉对象的剪切,因为它缩放到比托管元素的某些 XAML 容器大,我希望视觉对象在缩放到大于其父级时不会被剪切。

这是一个准系统示例,演示了我看到的一些问题……</p>

我的测试应用程序以空白 UWP 应用程序开始,我页面的根网格包含以下 Gridview:

代码隐藏文件包含以下附加 using 语句、变量声明、页面构造函数中的变量初始化和此事件处理程序:

当您运行应用程序并单击每个字符串时,您最初应该注意到第一个字符串的行为与其他两个字符串不同。

第一个字符串在边框的边界框被裁剪,而其他两个字符串没有。另请注意,其他两个字符串似乎超出了最后一项的边界并进入页面,但这可能是由于 gridview 自动调整大小以填充页面。

第一个字符串与其他两个字符串的区别在于边框上设置了圆角半径属性。我们在我们的应用程序中使用cornerradius 设置,因此很高兴知道是否有一种方法可以覆盖或控制此行为,以便它不会在缩放时剪切视觉对象。

导致我们出现问题的另一个行为是,在 GridView 边界是视觉对象在缩放时剪辑的另一个边界。如果您在 Gridview 上设置任何属性(如 Horizo​​ntalAlignment="Center"),使其自身大小调整为所需大小,则视觉对象会在控件边界处被裁剪。

组合 API 中是否有任何东西可以让我阻止或影响这种剪裁行为?

0 投票
2 回答
436 浏览

c# - Windows Composition Visual 的偏移值未正确初始化

我正在使用 UWP 并使用 Composition API 以编程方式在屏幕上滑动项目,我发现当应用程序第一次启动时,许多元素的初始滑动都无法正确执行。经过进一步检查,我发现我用于计算和设置动画初始位置和目标位置的 ElementVisual 的偏移属性有时会在第一个动画上为 X、Y、Z 值提供全零值。只要应用程序继续运行,我就可以说从那时起该元素的所有动画都可以正常工作。

我正在开发的应用程序更加复杂和有趣,但我创建了一个简化的测试应用程序来演示我遇到的问题。

从一个新的空白 UWP 项目中,我将以下 GridView 和 Button 添加到页面的根网格:

在代码隐藏文件中,我添加了以下附加 using 语句、变量声明和此事件处理程序:

我还在 MainPage() 构造函数中初始化了合成器:

然后我从 Visual Studio 以调试模式运行项目。按下按钮会在我的即时窗口中产生以下输出(为清楚起见,在编辑中添加了分隔线)

请注意,三个元素中的第一个在第一张幻灯片上确实有动画,但其他两个没有,并且它们的 Offset 值都是零值。

在每张幻灯片上,所有三个元素都从它们之前的位置开始动画,尽管第一张幻灯片动画的副作用仍然存在。

我试图找到一种方法来强制我们应用程序中的元素更新它们的偏移值,以便每个元素的初始幻灯片动画正常工作,包括在实际预期动画之前插入一个虚拟的 WarmUp 动画,这很快告诉我,但没有成功元素要么从其当前位置移动到相同的位置,要么稍微修改开始位置到它的实际当前位置。

我猜这是 Windows 组合 API 中的一个错误,但我希望有人能提出一个简单有效的解决方法,这将迫使 ElementVisual 在加载后正确初始化。

0 投票
2 回答
174 浏览

c# - 如何改进 ListViewBase 动画?

我正在创建一个基于合成的动画,我想在加载每个 ListViewItem 时对其进行缩放。我有以下示例代码:

在此处输入图像描述

我的问题是事件的时间安排。单击按钮时,会立即加载项目的新闻集,并在非常快速的暂停后启动动画。是否有任何其他事件或我可以更改的东西,以便在动画开始之前项目不可见?

这是示例源代码的链接。

0 投票
2 回答
144 浏览

animation - Windows 合成 API 是否支持 2.5D 投影旋转?

我已经开始在 UWP 应用程序中使用 Windows 组合 API 来为 UI 的元素设置动画。

视觉元素公开 RotationAngleInDegrees 和 RotationAngle 属性以及 RotationAxis 属性。

当我围绕 Y 轴为矩形对象的 RotationAngleInDegrees 值设置动画时,矩形会按预期旋转,但在 2D 应用程序窗口中,它似乎没有显示为 2.5D 投影。

有没有办法使用组合 api 获得旋转的 2.5D 投影效果?

0 投票
1 回答
509 浏览

c# - UWP - 如何创建具有重复图案的 CompositionSurfaceBrush

我想要一个带有背景的面板,显示重复的图案(例如,点,均匀地分开 30 个像素)。

到目前为止,我设法创建了 XamlCompositionBrushBase 的子类,它允许我们创建自己的形状(例如单个点)。但我不明白如何重复这种模式。

这是我的自定义画笔:

如何使循环无限期地复制,而不是作为单个实例?

0 投票
0 回答
106 浏览

c# - UWP:如何将 LayerVisual 指定为面板的第一个子项

我通过调用将 a 添加LayerVisual到 aPanel

不幸的是,使用ElementCompositionPreview.SetElementChildVisual()我有两个问题:

  1. 我一次只能设置LayerVisual一个
  2. 这样LayerVisual放置在所有其他元素之上(我希望它在背景中)

因此,我很高兴有一个像这样的解决方案

但不幸的layerVisual是不是一个UIElement

我怎样才能达到这个结果?

0 投票
1 回答
74 浏览

uwp - 剪辑合成动画?

我有这个问题我有一个控件,我想通过使用合成 API 偏移扩展方法来动画移动其宽度到右侧的距离。到目前为止,一切都很好。

但我也希望所有滑出其原始边界的内容都被剪掉。所以它基本上向右滑动并消失。我该如何做到这一点?我有一个模糊的概念,我可能需要使用 InsetClip,但我不确定如何将它与动画结合起来......