专栏首页林德熙的博客win10 uwp 使用 LayoutTransformer

win10 uwp 使用 LayoutTransformer

如果需要使用旋转,那么很容易把图片旋转的布局被裁剪。如果需要旋转的控件还在指定的 Grid 内,就需要使用布局的旋转。本文告诉大家如何使用 LayoutTransformer。需要知道,uwp是没有 LayoutTransformer ,这个类是仿照 wpf 的 LayoutTransformer 写的。

请看下面的图片,如果直接使用 Transformer 旋转,那么在元素布局完成再进行旋转,于是这时元素就的显示在布局之外。如果是 LayoutTransformer ,是先把元素旋转,然后进行布局。

原图:

使用 RenderTransform 进行旋转

使用 LayoutTransformer 旋转

可以看到,有时候需要元素旋转之后还在固定的大小内,那么就需要使用这个方法。

如果需要使用 LayoutTransformer 那么需要先创建一个类,这个类用于旋转控件。

public sealed class LayoutTransformer : ContentControl
{

}

因为这个类很长,所以我就不直接在这里写了。这个类的代码我放在文章最后。在添加完成这个类,然后打开 App.xaml 添加下面的代码,这样就可以定义一个控件,这个控件支持旋转图片。

    xmlns:common="using:Common"

    <Application.Resources>
        <Style TargetType="common:LayoutTransformer">
            <Setter Property="Foreground" Value="#FF000000"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="common:LayoutTransformer">
                        <Grid x:Name="TransformRoot" Background="{TemplateBinding Background}">
                            <ContentPresenter
                                x:Name="Presenter"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>

然后就可以在xaml使用旋转,需要先引用。

           xmlns:common="using:Common"

            <common:LayoutTransformer x:Name="jnuTphpltg">
                <common:LayoutTransformer.LayoutTransform>
                    <RotateTransform Angle="-90" />
                </common:LayoutTransformer.LayoutTransform>
                <Image Margin="10,10,10,10" Source="Assets/158839197671.jpg" RenderTransformOrigin="0.5,0.5">

                </Image>
            </common:LayoutTransformer>

如果需要在代码进行旋转,可以使用下面的代码

		   jnuTphpltg.LayoutTransform = new RotateTransform()
            {
                Angle = 90
            };

参见:http://igrali.com/2012/09/17/layout-transform-in-windows-8-winrt-xaml/

LayoutTransformer 代码

如果无法看到上面的代码,请看https://gitee.com/lindexi/codes/lrjpk87owdt5nmu1qsa3c36


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Mobius 一个运行在 .NET Core 上的 .NET 运行时

    一个 .NET 应用仅仅只是一块在 .NET 运行时上面运行的二进制代码。而 .NET 运行时只是一个能执行这项任务的程序。当前的 .NET Framework...

    林德熙
  • win10 uwp win2d 入门 看这一篇就够了

    本文主要翻译,可能带有一定的主观性和局限性,说的东西可能不对或者不符合每个人的预期。如果觉得我有讲的不对的,就多多包含,或者直接关掉这篇文章,但是请勿生气或者发...

    林德熙
  • WPF 使用 RenderTargetBitmap 快速截图出现 COMException 提示

    本文告诉大家一个最简单步骤让 RenderTargetBitmap 出现 COMException 提示

    林德熙
  • Electron 使用 Webpack2 预编译 Electron 和 Browser targets

    kongxx
  • Hive表类型(存储格式)一览

    Hive支持的表类型,或者称为存储格式有:TextFile、SequenceFile、RCFile、ORC、Parquet、AVRO。

    十里桃花舞丶
  • 编写自己的python3安装脚本

    python在Linux集群运维时需要统一python版本,简单的编写python安装脚本,以便统一安装,需要机器有安装包源环境(网络源/本地源)python源...

    py3study
  • [享学Netflix] 九、Archaius配置管理库:初体验及基础API详解

    Netflix是一家互联网流媒体播放商,是美国视频巨头,随着Netflix转型为一家云计算公司,它也开始积极参与开源项目,并且提供了众多好用的开源产品,比如耳熟...

    YourBatman
  • pandas的基本用法——处理缺失数据

    Tyan
  • Service in roscpp

    Service是一种请求-反馈的通信机制。请求的一方通常被称为客户端,提供服务的一方叫做服务器端。Service机制相比于Topic的不同之处在于:

    小飞侠xp

扫码关注云+社区

领取腾讯云代金券