windows phone (15) UI变换上

原文:windows phone (15) UI变换上

在wp中只要是继承自UIElement 的任何对象都可以应用变换,当然包含Textblock,Rectangle等所有的元素,下面我们使用Textblock进行案例演示,这里会介绍到7中变换分别是:

TransLateTransForm移动位置,包含水平移动和垂直移动

ScaleTransform缩放变换 对UI进行放大缩小 包含X轴上的缩放和Y轴上的缩放

RotateTransform旋转 根据定义的旋转点设置角度进行旋转

SkewTransform对UI进行一定角度的倾斜

MatrixTransfrom 矩阵变换,一句标准矩阵表示的变换

TransformGroup 复合变换按照指定顺序将多个变换复合为一个变换

CompositeTransform 组合变换按照固定顺序组合一系列变换

 

 这里使用变换需要用到UIElement定义的RenderTransform属性进行设置变换

 

TransLateTransForm

 代码示例:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <TextBlock x:Name="tb1" FontSize="72" HorizontalAlignment="Center" VerticalAlignment="Center" Text="变换文字示例"  Foreground="Cyan"></TextBlock>
            <TextBlock x:Name="tbShow" FontSize="72" VerticalAlignment="Center" HorizontalAlignment="Center" Text="变换文字示例"  Foreground="Cyan">
                <TextBlock.RenderTransform>
                    <TranslateTransform X="-2" Y="3"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
        </Grid>

 从上面xaml文件中可以看到定义的移动位置,X表示在x轴上移动多少,此值为正表示向右移动相应位置,为负表示向左移动相应位置;Y表示在Y轴上移动多少,同理Y值为正向上移动相应位置,为负向下移动相应位置;效果图见下:

 

 

ScaleTransform

代码示例:

 

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <TextBlock x:Name="tbShow"  VerticalAlignment="Center" HorizontalAlignment="Center" Text="变换文字示例"  Foreground="Cyan">
                <TextBlock.RenderTransform>
                    <ScaleTransform ScaleX="2"  ScaleY="2" CenterX="20" CenterY="30" ></ScaleTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
        </Grid>

 

 在这里ScaleTransform设置了四个属性,CenterX 和CenterY表示设置变换的点这里的点坐标是(20 30),ScaleX和ScaleY表示的是在X和Y方向上缩放的倍数,这里可以是小数,当设置的数值大于0时会实现缩放功能,但是等于0的时候文字就消失不见了,都小于0的时候效果是文字进行左右和上下倒置

上面代码的效果 ,使textblock元素高和宽都增大两倍

 

 当我们把ScaleX和ScaleY都改为负值的时候会是这样子

 

 

RotateTransform

 

代码示例:

 

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <TextBlock x:Name="tb1" FontSize="72" HorizontalAlignment="Center" VerticalAlignment="Center" Text="变换文字示例1"  Foreground="Cyan">
                <TextBlock.RenderTransform>
                   <RotateTransform Angle="30" CenterX="1" CenterY="1"></RotateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock x:Name="tbShow" FontSize="72" VerticalAlignment="Center" HorizontalAlignment="Center" Text="变换文字示例2"  Foreground="Cyan">
                <TextBlock.RenderTransform>
                   <RotateTransform Angle="-30" CenterX="1" CenterY="1"></RotateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
        </Grid>

 

 这里的CenterX 和CenterY也表示定义的变换点,Angle表示定义的角度,上面可以看出角度是分正负值的,当为0时也就是没角度,无任何变换,实现的效果:

 

SkewTransform

 

 代码示例:

 

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <TextBlock x:Name="tbShow" FontSize="72" VerticalAlignment="Center" HorizontalAlignment="Center" Text="变换文字示例"  Foreground="Cyan">
                <TextBlock.RenderTransform>
                    <SkewTransform AngleX="20" AngleY="20"></SkewTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
        </Grid>

 

 

SkewTransform 表示基于某个变换点,在X轴和Y轴上的倾斜角度,上面设置的两个属性AngleX表示在X轴上的倾斜角度,AngleY表示在Y轴上的倾斜角度,变换点默认为(0 0);就像上一个示例代码一样,角度也是分正负值的,等于0时没有任何角度变换,效果图:

 

话说这个还是比较实用的;

你会发现基于某个点的变换,他们都会跑出Grid内容区域;好了写到这里下一篇继续···

 

 

 

 

 

                                                                                                                                                                          跬步积千里

 

时间: 2024-11-01 02:36:17

windows phone (15) UI变换上的相关文章

背水一战 Windows 10 (2) - UI: 概述, 启动屏幕, 屏幕方向

原文:背水一战 Windows 10 (2) - UI: 概述, 启动屏幕, 屏幕方向 [源码下载] 背水一战 Windows 10 (2) - UI: 概述, 启动屏幕, 屏幕方向 作者:webabcd 介绍背水一战 Windows 10 之 UI UI 设计概述 启动屏幕(闪屏) 屏幕方向 示例1.UI 设计概述UI/Summary.xaml <Page x:Class="Windows10.UI.Summary" xmlns="http://schemas.mic

背水一战 Windows 10 (15) - 动画: 缓动动画

原文:背水一战 Windows 10 (15) - 动画: 缓动动画 [源码下载] 背水一战 Windows 10 (15) - 动画: 缓动动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 缓动动画 - easing 示例演示缓动(easing)的应用Animation/EasingAnimation.xaml <Page x:Class="Windows10.Animation.EasingAnimation" xmlns="http://s

微软:日后将推出一个完整支持Windows 8“Modern UI”的Office版

正如之前的报道,微软新发布的Office 2013将作为Windows 8商店里桌面应用的一部分,大多数新的Office套件应用仍会在Windows 8和Windows RT的桌面模式下运行.因此,在Windows 8和RT的"Modern"界面上运行的Office到哪去了?在Mashable的采访中,微软管理Office项目的副总裁PJ Hough表示,该公司确实有提供类似产品的计划. PJ Hough说,"我们致力于为客户提供一套有着完整Windows 8体验的Offic

测试运行: 使用Windows PowerShell实现UI自动化

尽管问世时间相对较短,但 Windows PowerShellTM 已经成为我最喜爱的工具之一.我最近发现,Windows PowerShell 拥有创建小型库所需的全部功能,您可以使用这些功能编写超轻型的 UI 自动化代码. 在本月的专栏中,我将介绍如何创建一个小型的自定义 Windows PowerShell cmdlet 集合,以执行 Windows UI 自动化任务.其中包括获得应用程序和控件的句柄.操作控件以及检查应用程序状态.在本次讨论中,我将假设您对 Windows PowerSh

Android 仿Windows Metro 界面UI

布局采用LinearLayout来实现(比较喜欢这个布局,在UI之前要有全局考虑的思想,操作起来比较简单),每一个菜单都是一个Linear块,内部是一个ImageView和一个TextView:一共做了两个界面点击互相切换,下面是效果截图:            由于每个Linear块的属性配置都差不多很相似,所以提取出来做成了统一的style,在XML文件中引用则更方便一些   下面是UI设计的布局文件代码片段: <?xml version="1.0" encoding=&qu

Windows系统显示字体变虚怎么办?

  Windows系统显示字体变虚怎么办? 最近我为自己的系统安装了一个美化包以后,发现其他方面完全没问题,但是在液晶显示器中, Windows系统的字体发虚现象特别严重,请问能否在不还原系统的情况下让我的系统字体重新清晰?  如果想单独解决字体发虚这一问题,可以使用Mactype这款字体渲染软件,点击窗口中的"添加新配置"按钮,在弹出的对话桂中选择"创建新配置"按钮,在弹出窗口根据向导进行设立操作,在出现"字体是否需要进行微调"一栏询问时,选择

背水一战 Windows 10 (3) - UI: 窗口全屏, 窗口尺寸

原文:背水一战 Windows 10 (3) - UI: 窗口全屏, 窗口尺寸 [源码下载] 背水一战 Windows 10 (3) - UI: 窗口全屏, 窗口尺寸 作者:webabcd 介绍背水一战 Windows 10 之 UI 窗口全屏 窗口尺寸 示例1.窗口全屏UI/FullScreen.xaml <Page x:Class="Windows10.UI.FullScreen" xmlns="http://schemas.microsoft.com/winfx/

背水一战 Windows 10 (4) - UI: 多窗口

原文:背水一战 Windows 10 (4) - UI: 多窗口 [源码下载] 背水一战 Windows 10 (4) - UI: 多窗口 作者:webabcd 介绍背水一战 Windows 10 之 UI 多窗口 示例1.自定义帮助类,用于简化 SecondaryView 的管理UI/MultipleViews/SecondaryViewHelper.cs /* * SecondaryViewHelper - 自定义的一个帮助类,用于简化 SecondaryView 的管理 */ using

与众不同 windows phone (15) - Media(媒体)之后台播放音频

原文:与众不同 windows phone (15) - Media(媒体)之后台播放音频 [索引页][源码下载] 与众不同 windows phone (15) - Media(媒体)之后台播放音频 作者:webabcd 介绍与众不同 windows phone 7.5 (sdk 7.1) 之媒体 通过 AudioPlayerAgent 实现在后台播放音频 示例演示如何通过后台代理的方式来实现音频在后台的播放1.后台代理MyAudioPlayerAgent/AudioPlayer.cs /*