当前位置:网站首页>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();
}
边栏推荐
- How to monitor code cyclomatic complexity by refactoring indicators
- SQL Server 遇到报错解决办法--更新中
- 【着色器实现Glitch单项故障闪烁效果(与Television效果不同)_Shader效果第十四篇】
- 搭建MyCat2一主一从的MySQL读写分离
- Chrome 开发者工具 performance 标签页的用法
- The establishment of simple data cache layer
- Embrace the Cmake child is simple and practical, but inflexible
- 密码学系列之:PEM和PKCS7,PKCS8,PKCS12
- 高效目标检测:动态候选较大程度提升检测精度(附论文下载)
- The list of Kubernetes - watch mechanism
猜你喜欢
随机推荐
Aura clock chip generation configuration file script
奥拉时钟芯片生成配置文件脚本
【ASP.NET Core】 中间件
Spark提交参数说明和常见优化
致-.-- -..- -
Polygon zkEVM 基本概念
awk statistical average max min
web 应用开发最佳实践之一:避免大型、复杂的布局和布局抖动
高效目标检测:动态候选较大程度提升检测精度(附论文下载)
【Attention 演变史】RNN的产生、架构、推广、问题(第一弹)
vehemently condemn
visual studio 与 visual studio code
简单理解 JS 事件循环
v-model的使用
jMeter Thread group 对应的 constant timer
七夕福利!中奖名单:书籍免费送!
Quantitative trading robot system development
多商户商城系统功能拆解22讲-平台端分销商品
刷题-洛谷-P1319 压缩技术
IIC驱动OLED