博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
UWP 开发初阶 Chapter 13 - ScrollViewer 与 Image 两个 XAML 控件的使用与介绍
阅读量:7173 次
发布时间:2019-06-29

本文共 1850 字,大约阅读时间需要 6 分钟。

上篇回顾

先前三篇连续讲了数据绑定,这些显然并不是数据绑定的全部技巧与内容,比如还有转换器(Converter)等等的知识点没有提及。目前打算在中阶的课程里面再补充一些。

本篇正文

这一次我们来讲一下 XAML 控件中另外两个常用控件。分别是 ScrollViewerImage

  1. ScrollViewer 就是滚轮可滑动的区域,毕竟实际开发中,很多内容不可能一页就能显示完全的。需要我们来滚动实现。举个例子,ListViewGridView 中就本身内置了滚轮。但如果碰到例如 TextBlock,那我们就需要自己加一个 ScrollViewer

    • 基本语法

      Place the control you wanted in here
      复制代码
    • 例子

      这里我们举个栗子,我们有一个很多文字的 TextBlock ,通过之前的知识,应该知道如果横向 TextBlock 里面的文字超出了应用的边界,我们可以通过 TextWrapping 来设置。但如果本身设置了这个属性,但是这时候,纵向文字又超出了应用的边界,那么我们就需要 ScrollViewer

      • ScrollViewer 包裹 TextBlock,如下:

        **解释:**其中为了便于演示,讲字体调大了。两个 TextBlock 标签之前是一长串文字

      • 然后运行,就能看到效果,如下图:

    • 常用属性:

      • VerticalScrollBarVisibilityHorizontalScrollBarVisibility

        两个分别是 垂直方向滑动条 和 水平方向滑动条的可见性。对应的值分别有 AutoDisableHiddenVisible。举个例子,比如你觉得滚动条太丑了,你可以这里面设置为 Hidden

        默认情况下都为 Auto

      • VerticalScrollModeHorizontalScrollMode

        两个分别是 垂直方向 和 水平方向的滚动模式。对应的值分别有 AutoDisableEnable。比如在一些特定情况下,你不想让它滚动,就设置为 Disable 即可。

        默认情况下都为 Auto

    • 注意事项

      • StackPanelScrollViewer 是无效的。反之,ScrollViewer 中放 StackPanel 是可以的,如下:

      • Grid 中行高或列高为 Auto 的格子内 ScrollViewer 是无效的。反之,是可以的,如下:

  2. Image 顾名思义,就是放图片的控件。

    • 基本语法

      复制代码

      解释:Source 里面的链接就是 Project 里面的导入本地文件的地址,文件位置如下图:

      如果想要引用网络上的图片,将链接直接写入 Source 里面,如下:

      复制代码
    • 常用属性

      • Stretch

        这个属性可以改变图片的填充方式,对应的值有 FillNoneUniformUniformToFill。其中 Fill 就是简单的填满,Uniform是保持图片比例为原来的比例,但是很多情况下会留下黑边。UniformToFill就是相对来说比较常用的,等比例拉伸图片,充满应用框。

      • NineGrid

        这个属性我不多做介绍了,这里引用 XAML Control Gallery 里面的例子:

    • 通过 C# 来设置 Source

      • 项目内文件:

        MyImage.Source = new BitmapImage(new Uri("ms-appx:///Assets/Test.jpg"));复制代码

        **解释:**需要在之前的链接之前加上 ms-appx:// 以表示我们引用的是项目内部的文件。

      • 网络图片:

        MyImage.Source = new BitmapImage(new Uri("https://rawgit.com/totoroyyb/UWP-Develop-Tutorial/master/pic/level1/chapter12/1.png"));复制代码

        **解释:**引用网络图片的话,可以直接填入。当然,你还可以设置 Uri 的类型,存在对应的函数重载。

结语

今天讲了这两个比较简单,但是很常用的控件。这 13 篇文章以来,其实大家已经完全可以进行简单的基本开发了。接下来几篇,将补全之前的控件知识,剩下的就是简单的打包与上传发布了。很快大家就能搭建自己简单的 UWP 啦!

好啦!

我们下篇见!

转载地址:http://trbzm.baihongyu.com/

你可能感兴趣的文章
grafana使用详解
查看>>
linux 文件同步 rsync+crontab
查看>>
git如何删除远程仓库的某次错误提交
查看>>
LAMP架构讲解(续一)
查看>>
51la图片做网店流量统计
查看>>
压力测试工具JMeter入门教程
查看>>
MySQL 百万级分页优化 数据库优化
查看>>
np.concatenate 拼接
查看>>
PHP编译错误解决:Don't know how to define struct flock on this system, set --enable-opcache=no...
查看>>
Linux命令(6):more命令
查看>>
HTTPD配置文件MPM(非7.0以上版本)
查看>>
Upgrade GI/CRS 11.1.0.7 to 11.2.0.2. Rootupgrade.sh Hanging
查看>>
nginx的高级配置(5)——访问控制
查看>>
DG_Oracle DataGuard Switchover主备节点切换(案例)
查看>>
CentOS7系统常用命令
查看>>
10.2.0.1 db console启动失败问题一例
查看>>
linux下查看文件编码及修改编码
查看>>
VC中的延时
查看>>
算法与数据结构知识点
查看>>
在单位成功实验的PIX配置
查看>>