当前位置:网站首页>win10 uwp 使用 ScaleTransform 放大某个元素
win10 uwp 使用 ScaleTransform 放大某个元素
2022-08-04 19:57:00 【林德熙】
本文告诉大家如何通过 ScaleTransform 放大元素 放大一个元素的方法有很多个,通过 ScaleTransform 放大是比较清真的
在 UWP 中 ScaleTransform 是属于 RenderTransform 的内容,所有的 UIElement 都有 RenderTransform 属性,通过设置这个属性可以做到在运行的时候修改渲染的元素
如新建一个简单的 UWP 程序,里面就放一个按钮
<Button VerticalAlignment="Center" HorizontalAlignment="Center" Content="Click" Click="Button_OnClick">
</Button>
如果想要将按钮显示放大两倍,简单的方法是使用 ScaleTransform 设置两个方向放大
修改一下代码
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button Margin="10,10,10,10" Content="放大前按钮">
</Button>
<Button VerticalAlignment="Center" HorizontalAlignment="Center" Content="放大的按钮">
<Button.RenderTransform>
<ScaleTransform x:Name="ScaleTransform" ScaleX="2" ScaleY="2"></ScaleTransform>
</Button.RenderTransform>
</Button>
</StackPanel>
代码请看 github
从上面看到 ScaleTransform 支持两个方向的放大,可以设置两个方向为不同的值
其实 ScaleTransform 还可以设置放大中心,也就是从那个点为中心放大
默认没有设置是从 (0,0) 点也就是左上角的点开始放大,放大之后会保持左上角的坐标不变
很多时候会使用到的是从中心放大,从中心放大需要设置放大元素的中心点,请看代码,在按钮点击的时候放大,中心点是按钮中心
<Button VerticalAlignment="Center" HorizontalAlignment="Center" Content="放大的按钮" Click="Button_OnClick">
<Button.RenderTransform>
<ScaleTransform x:Name="ScaleTransform" ScaleX="1" ScaleY="1"></ScaleTransform>
</Button.RenderTransform>
</Button>
private void Button_OnClick(object sender, RoutedEventArgs e)
{
var button = (Button) sender;
ScaleTransform.CenterX = button.ActualWidth / 2;
ScaleTransform.CenterY = button.ActualHeight / 2;
ScaleTransform.ScaleX = 1.5;
ScaleTransform.ScaleY = 1.5;
}
对比一下不设置的从左上角放大
private void Button_OnClick(object sender, RoutedEventArgs e)
{
ScaleTransform.ScaleX = 1.5;
ScaleTransform.ScaleY = 1.5;
}
那么如何做缩放动画
下面我使用一个没有一点优点的方法做动画,请小伙伴不要学习这个写法
private void Button_OnClick(object sender, RoutedEventArgs e)
{
Task.Run(async () =>
{
while (true)
{
await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
{
ScaleTransform.ScaleX++;
ScaleTransform.ScaleY++;
});
await Task.Delay(100);
}
});
}
我开启一个线程,使用一个无限循环,在里面使用 Task.Delay 做延迟
因为在 UWP 不是主线程是不能访问主线程的元素,所以就需要通过 Dispatcher.RunAsync 让代码在主线程运行
那么清真一点的方法是如何做呢?通过 xaml 写动画倒是一个不错的方法
<Button VerticalAlignment="Center" HorizontalAlignment="Center" Content="放大的按钮" Click="Button_OnClick">
<Button.Resources>
<Storyboard x:Key="Storyboard">
<DoubleAnimation Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleX" To="1.5" Duration="0:0:1"></DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleY" To="1.5" Duration="0:0:1"></DoubleAnimation>
</Storyboard>
</Button.Resources>
<Button.RenderTransform>
<ScaleTransform x:Name="ScaleTransform" ScaleX="1" ScaleY="1"></ScaleTransform>
</Button.RenderTransform>
</Button>
这时通过点击按钮拿到资源,运行动画
private void Button_OnClick(object sender, RoutedEventArgs e)
{
var button = (Button) sender;
var storyboard = (Storyboard) button.Resources["Storyboard"];
storyboard.Begin();
}
边栏推荐
- 【Attention 演变史】RNN的产生、架构、推广、问题(第一弹)
- visual studio 与 visual studio code
- 如何使用 jMeter Parallel Controller - 并行控制器以及一些常犯的错误
- Unreal 本地化 国家化 多语言
- C#将对象转换为Dictionary字典集合
- 【CAS:2306109-91-9 |胺-PEG4-脱硫生物素】价格
- How to monitor code cyclomatic complexity by refactoring indicators
- How to use the Chrome DevTools performance tab
- 用“绿色计算“技术推动算力可持续发展
- How to manually download and install SAP Fiori tools - Extension Pack for Visual Studio Code
猜你喜欢
笔记本WIFI无法上网(无Internet访问权限)
SIGIR 2022 | 邻域建模Graph-Masked Transformer,显著提高CTR预测性能
PriorityQueue类的使用及底层原理
使用.NET简单实现一个Redis的高性能克隆版(二)
The list of Kubernetes - watch mechanism
【Attention演变史】翻译模型seq2seq (第二弹)
The book "The Essence of Alipay Experience Design", a record of knowledge related to testing
二叉树的遍历
getBoundingClientRect
面试官:JVM运行时数据区包含哪几部分?作用是啥?
随机推荐
【Web漏洞探索】跨站脚本漏洞
《支付宝体验设计精髓》一书,跟测试相关性知识记录
简易数据缓存层的建立
动态数组底层是如何实现的
AWS SES 的监控和告警
vehemently condemn
微信小程序云开发 | 赠、删、改城市名称信息的应用实现
How to promote the implementation of rural revitalization
KubeSphere简介,功能介绍,优势,架构说明及应用场景
Use "green computing" technology to promote sustainable development of computing power
Quantitative trading robot system development
nr部分计算
【着色器实现Glitch单项故障闪烁效果(与Television效果不同)_Shader效果第十四篇】
c sqlite ... ...
How to use the Chrome DevTools performance tab
搭建MyCat2双主双从的MySQL读写分离
Latex分章节、分段落编译:input{}与include{}的区别
多用户同时远程登录连接到一台服务器
刷题-洛谷-P1319 压缩技术
新式茶饮,卷完水果还能卷什么?