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 条评论
登录 后参与评论

相关文章

来自专栏河湾欢儿的专栏

表单

form 表单 <input type="…… " name="" value="" /> text 文本框 passwor...

972
来自专栏小白安全

0基础HTML

一、什么是HTML HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标...

2695
来自专栏HTML5学堂

SVG - 动画制作

SVG - 动画制作 HTML5学堂:SVG - 动画制作。上一篇文章讲解了SVG的基本属性,大家能够利用SVG的基本属性进行绘制图像,那么如何让绘制好的图像动...

54910
来自专栏十月梦想

css的position定位详解

iii.  父级元素定位(绝对定位absolute)的子元素absolute定位情况:都不保留原文档流空白

803
来自专栏偏前端工程师的驿站

当css属性width设为100%时

  平常在写页面html代码时,经常会使用到width:100%来使控件宽度为父控件的内容宽度。但如果父控件为body,而且没有明确设置body的宽度,那么就会...

2175
来自专栏柠檬先生

jquery 层级选择器

关于层级选择器。 $("parent > child") 选择所有指定“parent”元素中指定的“child”的直接子项元素。 parent :...

19110
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:如何快速实现按钮组功能

最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便

1184
来自专栏Nian糕的私人厨房

CSS 布局_3 Position元素定位

我们之前已经介绍过行元素,块元素及行内块元素的属性了,能够知道它们是具有自己默认的显示方式的,即元素会按照文档流 (document flow) 的方式,自上而...

1374
来自专栏菜鸟前端工程师

html+css学习笔记006-伪类

1292
来自专栏菜鸟计划

CSS布局(五) 网页布局方式

网页实质是块与块之间的位置,块挨着块,块嵌套块,块叠着块。 三种关系:相邻,嵌套,重叠。 下面介绍网页布局的常用几种方式 ? 1.一列布局: 一般都是固定的宽高...

3926

扫码关注云+社区

领取腾讯云代金券