XAML的控件们

Wed 17 July 2019 / In categories Library

WinRT, XAML

从Microsoft Store可以下载一个App,叫做XAML Controls Library,里面例举了许多WinUI中定义的XAML控件。可以逐一浏览。另一个用于展示WindowsCommunityToolkit的App叫做Windows Community Toolkit Sample App,也可以下载浏览。

如何给这些控件们分类是一个有学问的问题。控件那么多,用的时候选哪个呢?这需要了解每个控件的作用和意图。

有些控件的作用独特,很容易可以把它们与其他控件区分出来:

  • WebView,显示Web内容
  • InkCanvas,用于笔迹输入
  • PersonPicture,用于显示账户头像
  • Image,用来显示图片
  • MediaElement和MediaPlayerElement,用来播放视频
  • AnimatedVisualPlayer,用来显示Adobe AfterEffects创建的动画
  • ProgressBar和ProgressRing,用来显示进度
  • ToolTip,用来显示提示信息
  • DatePicker和TimePicker,用来选择日期和时间
  • CalendarView,用来显示日历
  • CalendarDataPicker,从日历上挑选一个日期
  • ColorPicker,颜色选择器

触屏相关:

  • PullToRefresh,以下拉方式刷新列表或者井格内容,估计是为了方便触屏操作
  • SwipeControl,指划控制

样式相关:

  • Acrylic,透薄效果
  • Reveal,许多控件的默认效果,鼠标靠近时会有视觉上的突出效果
  • Reveal Focus,用于突出具有Tab焦点的控件
  • Compact Sizing,将大小减小一号

文字显示和处理相关的控件

  • TextBlock,显示一段文字
  • RichTextBlock,显示一段文字,可以带超链接、图片等等
  • TextBox,用来输入一段文字
  • RichTextBox,用来处理富文本的编辑
  • PasswordBox,密码输入框
  • AutoSuggestBox,带下拉候选框的文字输入框

选项相关的控件

  • CheckBox,按键的目的主要是让用户选取一至多个选项
  • ComboBox,以弹出列表的方式来展示选项,而不是像CheckBox那样将选项完全罗列出来
  • RadioButton,和CheckBox类似,但是只能多选一
  • RatingControl,用作星级评价
  • Slider,用滑杆来选取值
  • ListBox,以一个列表的方式显示用户可以选择的选项

按键是任何UI界面都必不可少的组成部分,因此种类也五花八门

  • Button,最简单的按键,按下后触发一个动作
  • RepeatButton,一个能够记住自己被按下次数的按键
  • ToggleButton,有开关状态的按键
  • ToggleSwitch,ToggleButton的另一种形式
  • DropdownButton,和ComboBox有点像,但是是触发动作而不是选择内容
  • SplitButton,是DropdownButton的扩展,能够带一个目标对象作为额外参数
  • ToggleSplitButton,能够在SplitButton中显示类似ToggleButton的开关状态
  • HyperlinkButton,显示超链接

内容组织:

  • SemanticZoom,能够显示一个大纲,让用户选择需要跳转的内容
  • ListView,以列表方式显示内容
  • TreeView,以嵌套列表的方式显示内容
  • GridView,以横列方式显示内容
  • DataGrid,属于WindowsCommunityToolkit,主要是以表格的方式显示数据
  • FlipView,以横幅的方式来显示诸如图片之类的内容

滚动,如果内容比显示区域大的时候,就会用到滚动:

  • ScrollViewer,以滚动方式显示内容
  • Hub,横向滚动显示内容

页面组织:

  • Pivot,以组标签的方式组织内容
  • NavigationView,提供可缩放的边栏菜单,用于访问顶层元素

弹出内容:

  • ContentDialog,弹出一个模态对话框
  • Flyout,在原地弹出一个消息框
  • TeachingTip,在某个地方弹出一个消息框

菜单和工具栏

  • CommandBar,工具栏
  • CommandBarFlyout,工具栏飞页
  • AppBarButton,工具栏图标
  • AppBarSeparator,工具栏分隔线
  • AppBarToggleButton,工具栏触发按键
  • MenuBar,菜单栏
  • MenuFlyout,菜单栏飞页
  • StandardUICommand,常用菜单或者工具栏命令
  • XamlUICommand,可以用来定义命令的外观呈现

布局相关:

  • Border,边框
  • Canvas,画布,支持用坐标来描述子元素的位置
  • Grid,以横列方式显示子元素
  • RelativePanel,子元素可以使用彼此之间的关系来布局
  • SplitView,在内容左边或者右边制造出一个面板
  • StackPanel,将多个子元素横向或者竖向堆叠在一起
  • VariableSizedWrapGrid,表格方式组织子元素,单个子元素可以跨多行或者多列
  • ViewBox,一个具有缩放特性的容器

动态效果:

  • Parallax,可以让背景随着内容滚动,产生视察效果
  • Animation interop,在鼠标移入移出时加入Q弹效果
  • Connected Animation,用渐变效果增加前后联系
  • Earsing Functions,加快或者减弱动画效果
  • Implicit Transitions,根据权属来调整动画效果
  • Page Transitions,调整换页效果,有点类似PPT换页
  • Theme Transitions,主题中带的一套变换

数据驱动:

  • ItemsRepeater,用来呈现大量数据条目

(完)

Load Disqus Comments