我尝试在一个宽度200高度200的 Canvas 放了一个宽度 300 高度 300 的元素,这个元素会不会被 Canvas 裁剪了?

经过我的测试,发现默认是不会被裁剪

火火问了我一个问题,如果有一个元素超过了 Canvas 的大小,会不会被 Canvas 裁剪。我在自己的项目写了一下,发现会被裁剪,于是就告诉他。

但是这时walterlv师傅拿了一个呆磨,发现不会被裁剪,请看下面代码

        <Canvas Height="200" Width="200" HorizontalAlignment="Center" VerticalAlignment="Center" Background="DarkCyan">
<Ellipse Height="300" Width="300" Fill="Blue" Margin="100,100,100,100" />
</Canvas>

这里的 Canvas 的颜色是 DarkCyan 而里面放一个宽度和告诉都比 Canvas 大的元素,而且颜色是蓝色,这时就看可以看到会不会被裁剪,运行可以看到下面界面

如图,可以看到超过 Canvas 的元素不会被裁剪

那么为什么本渣的设备使用了超过 Canvas 的元素就会被裁剪?

因为我使用的是以前的项目里面写的,这个项目里面是因为使用了Clip的原因,修改清真的代码请看下面

        <Canvas Height="200" Width="200" HorizontalAlignment="Center" VerticalAlignment="Center" Background="DarkCyan">
<Canvas.Clip>
<RectangleGeometry Rect="0,0,200,200"></RectangleGeometry>
</Canvas.Clip>
<Ellipse Height="300" Width="300" Fill="Blue" Margin="100,100,100,100" />
</Canvas>

原先项目之所以没有发现 Clip 是因为我把他写在了样式,所以就没找到,运行项目可以看到下面界面

那么在 WPF 是怎样呢?

在 WPF 默认也是不会裁剪,请看下面代码

        <Canvas Height="200" Width="200" HorizontalAlignment="Center" VerticalAlignment="Center" Background="DarkCyan">
<Ellipse Height="300" Width="300" Fill="Blue" Margin="100,100,100,100" />
</Canvas>

可以看到在 WPF 的代码和在 UWP 的代码是完全一样的,这时运行一下,和 UWP 界面一样

我搭建了自己的博客 https://lindexi.gitee.io/ 欢迎大家访问,里面有很多新的博客。只有在我看到博客写成熟之后才会放在csdn或博客园,但是一旦发布了就不再更新

如果在博客看到有任何不懂的,欢迎交流,我搭建了 dotnet 职业技术学院 欢迎大家加入

因为最近七牛云修改了测试域名可访问的方式,所以如果在看到博客的图片无法访问了,那么请到我搭建的博客 https://lindexi.gitee.io/ 阅读


本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接:http://blog.csdn.net/lindexi_gd ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系

win10 uwp 在 Canvas 放一个超过大小的元素会不会被裁剪的更多相关文章

  1. 2018-8-10-win10-uwp-在-Canvas-放一个超过大小的元素会不会被裁剪

    title author date CreateTime categories win10 uwp 在 Canvas 放一个超过大小的元素会不会被裁剪 lindexi 2018-08-10 19:16 ...

  2. Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App

    安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...

  3. Win10 UWP系列:关于错误 0x80073CF9及一个小bug的解决

    最近一直在开发XX的uwp版本,也是边摸索边做,最近遇到几个比较奇怪的问题,记录于此. 1.项目可用部署到PC,但无法部署到手机,提示以下错误: 错误 : DEP0001 : 意外错误: Instal ...

  4. Win10 UWP开发系列:实现Master/Detail布局

    在开发XX新闻的过程中,UI部分使用了Master/Detail(大纲/细节)布局样式.Win10系统中的邮件App就是这种样式,左侧一个列表,右侧是详情页面.关于这种 样式的说明可参看MSDN文档: ...

  5. win10 uwp 毛玻璃

    毛玻璃在UWP很简单,不会和WPF那样伤性能. 本文告诉大家,如何在 UWP 使用 win2d 做毛玻璃. 毛玻璃可以使用 win2D 方法,也可以使用 Compositor . 使用 win2d 得 ...

  6. win10 uwp 简单MasterDetail

    中文 English 本文主要讲实现一个简单的界面,可以在窗口比较大显示列表和内容,窗口比较小时候显示列表或内容.也就是在窗口比较小的时候,点击列表会显示内容,点击返回会显示列表. 先放图,很简单. ...

  7. win10 uwp 俄罗斯方块

    俄罗斯方块是一个很经典的游戏,做一个UWP俄罗斯方块没有什么用,我想说的是移植,把经典游戏移植到UWP. 我的所有博客都是抄别人的,这个才是我自己写的.后台很多代码还是抄别人的,我想说的是我们之前有很 ...

  8. win10 uwp 萤火虫效果

    原文:win10 uwp 萤火虫效果 本文在Nukepayload2指导下,使用他的思想用C#写出来. 本文告诉大家,如何使用 win2d 做出萤火虫效果. 安装 win2d 安装win2d的方法请使 ...

  9. win10 uwp win2d CanvasVirtualControl 与 CanvasAnimatedControl

    本文来告诉大家 CanvasVirtualControl ,在什么时候使用这个控件. 在之前的入门教程win10 uwp win2d 入门 看这一篇就够了我直接用的是CanvasControl,实际上 ...

随机推荐

  1. Excel按照某一列的重复数据设置隔行变颜色效果

    问题:如图所示,想按照A列中的重复数据设置隔重复行变颜色的效果,能否通过条件格式命令实现. 方法1:(最佳答案) 条件格式公式:=MOD(SUMPRODUCT(--($A$1:$A1<>$ ...

  2. !important覆写css行内样式

    <div class="block"> <span style="font-weight: bold; color: red;">Hel ...

  3. java 将word转为PDF (100%与word软件转换一样)

    jdk环境:jdk_8.0.1310.11_64    (64位) 1.引入pom文件 <!-- word转pdf(依赖windows本地的wps) --> <dependency& ...

  4. pytest相关资源收集

    pytest官网 https://docs.pytest.org/en/latest/getting-started.html 官网推荐的plugin https://docs.pytest.org/ ...

  5. jquery.dataTables的探索之路-服务端分页配置

    最近闲来无事想研究下数据表格,因为之前接触过layui和bootstrap的数据表格,本着能学多少学多少的学习态度,学习下dataTables的服务端分页配置.特与同学们一块分享下从中遇到的问题和解决 ...

  6. 1.Golang开山篇,GO就是NB!

    目录:GO就是NB GO sb吗 安装环境 GO就是NB,K2R三位大佬写的GO,学GO不吃亏! (1)我们为什么要学 高并发 深度 || 广度 (2)go学习思路和目标 多打多练 掌握go语言 做一 ...

  7. 2017校赛 问题 D: 我知道了,你知道了吗?【递归】

    题目描述 Alice和Bob走在去学校的路上,听到两个路人的对话: 路人甲:我知道了, 你知道了吗? 路人乙:我知道你知道了,你知道了吗? 路人甲:我知道你知道我知道了,你知道了吗? 路人乙:我知道你 ...

  8. python 缓冲区 subprocess 黏包 黏包解决方案

    一.缓冲区 二.两种黏包现象 两种黏包现象: 1 连续的小包可能会被优化算法给组合到一起进行发送 黏包现象1客户端 import socket BUFSIZE = 1024 ip_prort = (' ...

  9. TIJ——Chapter Nine:Interfaces

    A class containing abstract methods is called an abstract class. If a class Contains one of more abs ...

  10. 【NS2】NS2机制浅显分析一下(转载)

    [我在之前看的是以ping协议为实例来理解TclCL机制和分裂对象模型] 本文以channel实例的创建过程为例,试图说明ns2的分裂机制,请在阅读本文前阅读<The NS Manual> ...