Windows 8实用窍门系列:10.Windows 8的基本变换和矩阵变换以及AppBar应用程序栏

简介:

在Windows 8中有几种基本变换和矩阵变换和Silverlight中的使用方法都是一样。

  包括: RotateTransform:旋转变换

      ScaleTransform:缩放变换

      SkewTransform:倾斜变换

      TranslateTransform:移动变换

      TransformGroup:变换组

      MatrixTransform:矩阵变换

  这些变换的意义和使用都可以看我之前写过的两篇文章:

  Silverlight实用窍门系列:53.Silverlight中的5种基本变换RotateTransform、ScaleTransform、SkewTransform、TranslateTransform、TransformGroup

  Silverlight实用窍门系列:54.详解Silverlight中的矩阵变换MatrixTransform,实现其余各种变换

  AppBar应用程序栏是在Windows 8程序在右击程序下方或者手指从下往上滑动弹出的一个消息栏。在这个栏里可以做一些自定义的操作如:卸载程序,添加信息,搜索等操作。

  基本变换和矩阵变换

复制代码
       <!--RotateTransform变换-->
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"
               Margin="48,49,0,0" Name="image11"
        Stretch="Fill"  Width="50" Source="iPhone_001.png"  Opacity=".3"/>
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"
               Margin="48,49,0,0" Name="image1"
        Stretch="Fill"  Width="50" Source="iPhone_001.png" >
            <Image.RenderTransform>
                <RotateTransform CenterX="0" CenterY="0" Angle="45"></RotateTransform>
            </Image.RenderTransform>
        </Image>

        <!--ScaleTransform变换-->
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"
               Margin="139,49,0,0" Name="image21"
        Stretch="Fill" Width="50" Source="iPhone_002.png"  Opacity=".3"/>
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" 
               Margin="139,49,0,0" Name="image2"
        Stretch="Fill" Width="50" Source="iPhone_002.png">
            <Image.RenderTransform>
                <ScaleTransform CenterX="0" CenterY="0" ScaleX="0.6" ScaleY="0.6"></ScaleTransform>
            </Image.RenderTransform>
        </Image>

        <!--SkewTransform变换-->
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"
               Margin="226,49,0,0" Name="image31"
        Stretch="Fill" Width="50" Source="iPhone_003.png" Opacity=".3"/>
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" 
               Margin="226,49,0,0" Name="image3"
        Stretch="Fill" Width="50" Source="iPhone_003.png" >
            <Image.RenderTransform>
                <SkewTransform CenterX="0" CenterY="0" AngleX="45" AngleY="0"></SkewTransform>
            </Image.RenderTransform>
        </Image>

        <!--TranslateTransform变换-->
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"
               Margin="331,49,0,0" Name="image41"
        Stretch="Fill" Width="50" Source="iPhone_004.png" Opacity=".3"/>
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"
               Margin="331,49,0,0" Name="image4"
        Stretch="Fill" Width="50" Source="iPhone_004.png" >
            <Image.RenderTransform>
                <TranslateTransform X="10" Y="50"></TranslateTransform>
            </Image.RenderTransform>
        </Image>

        <!--TransformGroup变换-->
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"
               Margin="426,49,0,0" Name="image51"
        Stretch="Fill" Width="50" Source="iPhone_005.png" Opacity=".3"/>
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"
               Margin="426,49,0,0" Name="image5"
        Stretch="Fill" Width="50" Source="iPhone_005.png" >
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="-1"/>
                    <TranslateTransform Y="100"/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>


        <!--RotateTransform变换-->
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"
               Margin="48,249,0,0" Name="image1166"
                Stretch="Fill"  Width="50" Source="iPhone_001.png"  Opacity=".3"/>
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"
               Margin="48,249,0,0" Name="image166"
                Stretch="Fill"  Width="50" Source="iPhone_001.png" >
            <Image.RenderTransform>
                <MatrixTransform Matrix="0 1 -1 0 0 0"></MatrixTransform>
            </Image.RenderTransform>
        </Image>

        <!--ScaleTransform变换-->
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"
               Margin="139,249,0,0" Name="image2166"
                Stretch="Fill" Width="50" Source="iPhone_002.png"  Opacity=".3"/>
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"
               Margin="139,249,0,0" Name="image266"
                Stretch="Fill" Width="50" Source="iPhone_002.png">
            <Image.RenderTransform>
                <MatrixTransform Matrix="0.6 0 0 0.6 0 0"></MatrixTransform>
            </Image.RenderTransform>
        </Image>

        <!--SkewTransform变换-->
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"
               Margin="226,249,0,0" Name="image3166"
                Stretch="Fill" Width="50" Source="iPhone_003.png" Opacity=".3"/>
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"
               Margin="226,249,0,0" Name="image366"
                Stretch="Fill" Width="50" Source="iPhone_003.png" >
            <Image.RenderTransform>
                <MatrixTransform Matrix="1 0 1 1 0 0"></MatrixTransform>
            </Image.RenderTransform>
        </Image>

        <!--TranslateTransform变换-->
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"
               Margin="331,249,0,0" Name="image4166"
               Stretch="Fill" Width="50" Source="iPhone_004.png" Opacity=".3"/>
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" 
               Margin="331,249,0,0" Name="image466"
               Stretch="Fill" Width="50" Source="iPhone_004.png" >
            <Image.RenderTransform>
                <MatrixTransform Matrix="1 0 0 1 10 50"></MatrixTransform>
            </Image.RenderTransform>
        </Image>

        <!--TransformGroup变换-->
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"
               Margin="426,249,0,0" Name="image5166"
               Stretch="Fill" Width="50" Source="iPhone_005.png" Opacity=".3"/>
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" 
               Margin="426,249,0,0" Name="image566"
               Stretch="Fill" Width="50" Source="iPhone_005.png" >
            <Image.RenderTransform>
                <MatrixTransform Matrix="1 0 0 -1 0 0"></MatrixTransform>
            </Image.RenderTransform>
        </Image>
        <TextBlock HorizontalAlignment="Left" Margin="10,121,0,0" 
                   TextWrapping="Wrap" Text="采用多种方式对图片进行旋转"
                   VerticalAlignment="Top" Height="16" Width="206"/>
        <TextBlock HorizontalAlignment="Left" Margin="10,321,0,0" 
                   TextWrapping="Wrap" Text="采用MatrixTransform方式对图片进行旋转"
                   VerticalAlignment="Top" Height="16" Width="206"/>
        <TextBlock HorizontalAlignment="Left" Margin="550,271,0,0"
                   TextWrapping="Wrap" Text="" Name="tbText"
                   VerticalAlignment="Top" Width="232"/>
复制代码

  AppBar代码如下:

复制代码
    <Page.BottomAppBar>
        <AppBar>
            <Grid Background="Green" HorizontalAlignment="Left" Width="1355">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="425*">
                    </ColumnDefinition>
                    <ColumnDefinition Width="248*"/>
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                    <Button x:Name="appBarAdd"  Content="添加" Click="appBarAdd_Click"/>
                    <Button x:Name="appBarDelete"  Content="删除" Click="appBarDelete_Click"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                    <Button x:Name="AppBarMore" Content="更多" Click="AppBarMore_Click"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>
复制代码
复制代码
        private void appBarAdd_Click(object sender, RoutedEventArgs e)
        {
            this.tbText.Text = "点击了添加按钮!";
        }

        private void appBarDelete_Click(object sender, RoutedEventArgs e)
        {
            this.tbText.Text = "点击了删除按钮!";
        }

        private void AppBarMore_Click(object sender, RoutedEventArgs e)
        {
            this.tbText.Text = "点击了更多按钮!";
        }
复制代码

  最后效果如下两图,并且如需源码请点击 Win8Control.rar 下载。



本文转自程兴亮博客园博客,原文链接:http://www.cnblogs.com/chengxingliang/archive/2012/12/03/2797501.html,如需转载请自行联系原作者


 

相关文章
|
3月前
|
Linux C++ Windows
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
|
1天前
|
安全 前端开发 Windows
Windows Electron 应用更新的原理是什么?揭秘 NsisUpdater
本文介绍了 Electron 应用在 Windows 中的更新原理,重点分析了 `NsisUpdater` 类的实现。该类利用 NSIS 脚本,通过初始化、检查更新、下载更新、验证签名和安装更新等步骤,确保应用的更新过程安全可靠。核心功能包括差异下载、签名验证和管理员权限处理,确保更新高效且安全。
11 4
Windows Electron 应用更新的原理是什么?揭秘 NsisUpdater
|
1月前
|
开发框架 .NET API
Windows Forms应用程序中集成一个ASP.NET API服务
Windows Forms应用程序中集成一个ASP.NET API服务
85 9
|
23天前
|
XML 缓存 前端开发
Electron-builder 是如何打包 Windows 应用的?
本文首发于微信公众号“前端徐徐”,作者徐徐深入解析了 electron-builder 在 Windows 平台上的打包流程。文章详细介绍了 `winPackager.ts`、`AppxTarget.ts`、`MsiTarget.ts` 和 `NsisTarget.ts` 等核心文件,涵盖了目标创建、图标处理、代码签名、资源编辑、应用签名、性能优化等内容,并分别讲解了 AppX/MSIX、MSI 和 NSIS 安装程序的生成过程。通过这些内容,读者可以更好地理解和使用 electron-builder 进行 Windows 应用的打包和发布。
94 0
|
1月前
|
数据可视化 程序员 C#
C#中windows应用窗体程序的输入输出方法实例
C#中windows应用窗体程序的输入输出方法实例
40 0
|
3月前
|
Unix Linux Ruby
在windows和linux上高效快捷地发布Dash应用
在windows和linux上高效快捷地发布Dash应用
|
3月前
|
Linux iOS开发 开发者
跨平台开发不再难:.NET Core如何让你的应用在Windows、Linux、macOS上自如游走?
【8月更文挑战第28天】本文提供了一份详尽的.NET跨平台开发指南,涵盖.NET Core简介、环境配置、项目结构、代码编写、依赖管理、构建与测试、部署及容器化等多个方面,帮助开发者掌握关键技术与最佳实践,充分利用.NET Core实现高效、便捷的跨平台应用开发与部署。
157 3
|
3月前
|
PHP Windows
【Azure App Service for Windows】 PHP应用出现500 : The page cannot be displayed because an internal server error has occurred. 错误
【Azure App Service for Windows】 PHP应用出现500 : The page cannot be displayed because an internal server error has occurred. 错误
|
3月前
|
vr&ar C# 图形学
WPF与AR/VR的激情碰撞:解锁Windows Presentation Foundation应用新维度,探索增强现实与虚拟现实技术在现代UI设计中的无限可能与实战应用详解
【8月更文挑战第31天】增强现实(AR)与虚拟现实(VR)技术正迅速改变生活和工作方式,在游戏、教育及工业等领域展现出广泛应用前景。本文探讨如何在Windows Presentation Foundation(WPF)环境中实现AR/VR功能,通过具体示例代码展示整合过程。尽管WPF本身不直接支持AR/VR,但借助第三方库如Unity、Vuforia或OpenVR,可实现沉浸式体验。例如,通过Unity和Vuforia在WPF中创建AR应用,或利用OpenVR在WPF中集成VR功能,从而提升用户体验并拓展应用功能边界。
64 0
|
3月前
|
存储 开发者 C#
WPF与邮件发送:教你如何在Windows Presentation Foundation应用中无缝集成电子邮件功能——从界面设计到代码实现,全面解析邮件发送的每一个细节密武器!
【8月更文挑战第31天】本文探讨了如何在Windows Presentation Foundation(WPF)应用中集成电子邮件发送功能,详细介绍了从创建WPF项目到设计用户界面的全过程,并通过具体示例代码展示了如何使用`System.Net.Mail`命名空间中的`SmtpClient`和`MailMessage`类来实现邮件发送逻辑。文章还强调了安全性和错误处理的重要性,提供了实用的异常捕获代码片段,旨在帮助WPF开发者更好地掌握邮件发送技术,提升应用程序的功能性与用户体验。
55 0
下一篇
无影云桌面