企业智能化解决方案服务商

Visual Studio系列教程:如何创建自定义样式(三)——使用控制模板制作奇特的滑块

翻译 使用教程 | 编辑:Elyn | 2019-03-14 11:16:09| 阅读 0 有用 (0) 评论 (0) 收藏


概述:Visual Studio是一款完备的工具和服务,可帮助您为Microsoft平台和其他平台创建各种各样的应用程序。在本教程中,我们将学习到如何自定义HTML的UI,创建自定义样式。

Visual Studio是一款完备的工具和服务,可帮助您为Microsoft平台和其他平台创建各种各样的应用程序,同时还可以将您所有的项目、团队和利益干系人联系在一起。

本教程将为你介绍在Visual Studio中如何自定义HTML的UI,创建自定义样式。本章将继续带你学习如何使用控制模板制作奇特的滑块。

第3部分:使用控制模板制作奇特的滑块

在第1部分教程中我们知道了如何在滑块后面添加形状使其看起来很酷。其实,我们还有另一个更好的方法达到相同的效果。

  1. “解决方案资源管理器”面板中,双击 DetailPage.xaml
  2. 接下来,我们将使用滑块的默认控件模板作为起点,将此 XAML 添加到 “Page.Resources” 元素中。(控件模板是项强大的功能,下面的XAML或许有些长)

  3. 在刚添加的“ControlTemplate” 中,查找名为 “HorizontalTemplate”的网格控件。此网格定义我们想要更改的模板部分。

  4. 创建一个多边形,此多边形就像你在第 1 部分中为曝光滑块创建的多边形一样。 在右“Grid.RowDefinitions”标记后面添加多边形。 将“Grid.Row”设置为“0”,将“Grid.RowSpan”设置为“3”,并将“Grid.ColumnSpan”设置为“3”

    之前

    之后

  5. 删除“Polygon.Fill”设置。 将“Fill”设置为“{TemplateBinding Background}”。 这样,设置滑块的“Background”属性时便会设置多边形的“Fill”属性。

    之前

    之后

  6. 在我们添加的多边形后面,有一个名为“HorizontalTrackRect”的矩形。删除此矩形的“Fill”设置,以便矩形将不可见并且不会阻碍我们的多边形。(我们不想完全删除矩形,因为控件模板还会将其用于交互视觉对象,如悬停。)

    之前

    之后

    至此,我们就完成了我们所需的模板,接下来就将其应用于我们的滑块。

  7. 更新曝光滑块
    • 将滑块的 “Template” 属性设置为“{StaticResource FancySliderControlTemplate}”
    • 删除滑块的 Background="Transparent" 设置。
    • 将滑块的背景设置为从黑色过渡到白色的线性渐变。
    • 删除我们在第 1 部分中创建的背景多边形。

    之前

    之后

  8. 对温度滑块进行更新。

    之前

    之后

  9. 对色调滑块进行更新。

    之前

    之后

  10. 编译并运行应用。

那么,现在我们就完成了第3部分的教程内容,我们就基本掌握了在Visual Studio中创建自定义样式的方法,创如果你遇到困难或者想要 Visual Studio其他相关教程,记得关注收藏我们哦~


本站文章除注明转载外,均为本站原创或翻译。
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
文章转载自: https://docs.microsoft.com/zh-cn/windows/uwp/design/basics/xaml-basics-style

用户评论: 您的宝贵经验,能为更多人带来帮助,登录后才能评论。
评论加载中...


    相关产品
    相关商家

    在线客服 在线QQ 电话咨询
    400-700-1020