UWP 开发入门小笔记(2)
链接:[ 全文章目录 ]
一、理解相对布局(Relative Panel)[p17]
这一部分主要讲Layout Control API
quarrel:
应用顶部和左侧,这些区域用于提供应用内的导航和服务,
这种导航模式称为汉堡导航/抽屉导航[hamburger navigation]
(一)Relative Panel,一种非线性UI的控件
定义了一块用于仿制,对齐子元素与控件的区域
附加属性[Attach Property]:
1.面板对齐关系[Panel Alignment Relationship]:将控件与面板对齐
2.同级对齐关系[Sibling Alignment Relationship]:同级元素的对齐
3.同级位置关系[Sibling Position Relationship]:用于放置同级元素
编程顺序:
1.对齐到面板,对齐面板的左侧或右侧
2.同级对齐,控件间对齐
3.同级相对位置
RelativePanel.Below="RedRectangle" //在红色矩形下面
RelativePanel.LeftOf="RedRectangle" //红色矩形的左端对齐
RelativePanel.AlignRightwith="RedRectangle" //图形右端对齐红色矩形右端
RelativePanel.AlignLeftwith="RedRectangle" //图形左端对齐绿色矩形左端
RelativePanel.AlignVerticalCenterWith="RedRectangle" //红色矩形垂直方向居中对齐
RelativePanel.AlignRightWithPanel="True" //面板右对齐
RelativePanel.AlignHorizontalCenterWithPanel="True" //RelativePanel水平方向居中对齐
二、理解SplitView,实现汉堡菜单[p18]
创建一个可以隐藏的面板(带动画)
(一)DisplayMode
Inline推出效果
Overlay覆盖效果
*CompactPaneLength:Pane默认露出多少,默认为0
*OpenPaneLength:Pane暂时时露出多少(过小会导致Pane显示不全)
(二)Pane——(分)隐藏在展示部分旁边的部分
SplitView.Pane
(三)Content——(总)推开的用于展示的部分
SplitView.Content
三、导航功能(多界面)让应用更加丰富[p19]
界面切换(前进、回退、回到主页)、界面间的数据传递
App结构:application、window、frame、mainpage
App.xaml.cs~全局变量
OnNavigatedTo
四、基本XAML控件(1)[p20]
输入控件
(一)复选框[checkbox]
(二)单选按钮[radio button]
允许加入多个变量,组成组名称[group names]
(三)组合框[comb box]
(四)列表框[list box]
(五)图像控制[imagine control]
Stretch:
None时,为原大小
Fill时,为拉伸填满
Uniform时,为缩放(会留空)
UniformToFill
(六)切换按钮[ToggleButton]
(七)拨动开关[toggle switch]
五、简单汉堡导航[p21]
button图标设置:
1.在性质FontFamily中按照(字符映射表中的)字体设置
图标名称可以通过系统搜索字符映射表找到
2.把性质Content按照字符映射表的名字填进去
这课看到第20p打下基础差不多了。