UWP 开发初阶 Chapter 7 - 简单介绍 Style 与 Resource 在 XAML 中的应用,还有一些控件基本属性的介绍

上篇回顾

上篇讲述了如何通过 C# 来对于 XAML 控件的属性进行更改。其实大致思路很简单,首先我们需要给这个控件一个名字,这样我们才可以在 C# 中找到该控件。然后再通过 controlName.propertyname 的形式获取或者赋值。

本篇正文

今天我们简单讲述一下 Style 和 Resource 这两个概念。顺带也补充一下 MarginPadding 这两个常用属性(之前忘记介绍了 :smile:),这次先介绍概念性的东西,然后加以示范!

概念介绍

  1. Resource

    Resource 顾名思义,就是资源。然而在 XAML 中这个所谓的资源有代表着什么意思呢?其实就是表示一些你已经在程序里面定义的,或者微软帮你定义好的资源。

    在 XAML 中 Resource 有好多类,比如 StaticResource , ThemeResource , CustomeResource , RelativeResource 等等,今天我们着重将前两个,分别是 StaticResourceThemeResource

    • StaticResource

      直译那就是静态资源,那什么是静态资源呢?就是说这个资源在初次编译的时候解析后,就不再改变了,即使你在软件运行时(俗称 Runtime)改变这个资源,那软件上是看不出变化的,除非你重新打开软件,再次编译。

    • ThemeResource

      看起来这个比较抽象,什么是主题资源?其实这个 ThemeResource 可以粗略理解为和 StaticResource 相反,因为 ThemeResouce 会在 runtime 改变,而不是一旦编译完成,就不变化了。但随之也伴随着性能损耗。这种 ThemeResource 在你想要在运行过程中改变软件的主题的时候就比较有用了,这也是这名字的由来。

  2. Style

    顾名思义,样式!这个和写逻辑代码的时候,注意包裹(encapsulate)的好处是一致的。如果你在几个控件上应用相同的样式,那么样式可以帮你省去很多重复代码。同时,也使得你的代码更易更改,因为你只需要在定义 Style 的地方进行更改,省去了一整个项目为了同一个东西四处更改的麻烦。

代码与展示

  1. Resource

    • 如何使用微软已经在 SDK 中定义的 Resource (防止部分初学朋友不知道 SDK,全称 Software Development Kit,即 软件开发套件)

      举个例子,见如下代码与效果:

      • 代码:

        <Grid Background="{StaticResource SystemControlAccentAcrylicWindowAccentMediumHighBrush}">
        </Grid>
        
      • 效果预览:

      下面解释
      这里面,我在 Background 里面设置一个微软预先设定好的背景颜色,这个背景颜色里面会根据你系统的颜色变化而变化(上图我用的是蓝色的系统色),同时大家在图片里面可能看不清,这个背景还是采用了亚克力模糊效果的。

      加入我们系统换了其他的主题色(比如红色),那么效果如下:

      使用 Resource 的语法其实都是这样 PropertyName="{StaticResource ResourceName}" ,即便是 ThemeResource 也是这样子的语法,比如如下代码(其中 myResourceName 指代资源的名字):

      Background="{ThemeResource myResourceName}"
      

    • 如何使用自己定义的 Resource

      下面我们举个例子,我们定义一个亚克力背景色的资源!

      • 第一步

        MainPage.xaml 里面新建如下代码:

        <Page.Resources>
           <ResourceDictionary>
                    
           </ResourceDictionary>
        </Page.Resources>
        

        完整代码如下图所示:

      • 第二步

        在刚才新建的 ResourceDictionary 里面编写如下代码:

        <Page.Resources>
           <ResourceDictionary>
               <AcrylicBrush x:Key="myAcrylicBrush"
                             TintColor="White"
                             TintOpacity="0.3"
                             BackgroundSource="HostBackdrop"
                             FallbackColor="White"/>
           </ResourceDictionary>
        </Page.Resources>
        

        解释:这个 AcrylicBrush 就是微软先前发布的 Fluent Design 里面重要的元素之一,亚克力。而第一行 x:Key 有点类似于 Name ,用于后面引用,只不过 Resource 都是根据 x:Key 来引用的。第二行的 TintColor 就是用于模糊的颜色,这里面是白色。第三行的 TintOpacity 指的便是透明度,值在 0 - 1 之间,越接近于 0,越透明。第四行的 BackgroundSource 表示背景虚化的对象,其中 HostBackDrop 表示模糊软件背后的背景,而 BackDrop 表示模糊应用内背景。第五行 FallbackColor 表示的是,当你切换到其他软件,或者电脑进入省电模式的时候,显示的颜色。

      • 第三步

        这时候,我们其实已经编写好了一个 Resource,而我们现在要去使用它。我们在 Grid 中设置如下的 Background

        <Grid Background="{StaticResource myAcrylicBrush}">
        
        </Grid>
        
      • 最后,我们编译一下,效果如下:

  2. Style

    • 如何使用 SDK 内定义好的 Style?

      举个例子,我们常规新建一个 Button 是没有光影效果的,而需要我们引用一个 Style。现在,我们新建一个 Button ,然后引用一个叫 ButtonRevealStyleStyle 代码如下:

      <Button Content="Demo show how to use Style in XAML"
              Style="{StaticResource ButtonRevealStyle}"
              Height="300"
              Width="300"/>
      

      解释:为了让大家更方便看到 Reveal (光影效果),因此我通过 HeightWidth 将这个按钮变得比较大。

      编译后效果如下:

    • 如何自定义 Style ?

      这里举个例子,通过 Style 来定义一个 Textblock 的字号,字体颜色和对齐方式。

      • 首先,在之前写的 ResourceDictionary 里面增加下面的代码(和刚才新建的 AcrylicBrush 并列):

        <Style x:Key="myStyle"
               TargetType="TextBlock">
                        
        </Style>
        

        解释:其中 x:Key 概念上面解释过了,而 TargetType 是指代你要做用于控件的类型,这里面我们是要改变 TextBlock ,因此如上面所示。

      • 然后,我们在新建的 Style 里面,加上 Setter,完整代码如下:

        <Style x:Key="myStyle"
               TargetType="TextBlock">
            <Setter Property="FontSize" Value="30"/>
            <Setter Property="Foreground" Value="Blue"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
        </Style>
        

        解释:每个 Setter,都是用来设定相应的属性。Property 里面就是你要更改的属性,Value 就是你要设置的值,比如第一个 Setter 里面,我们就是将 FontSize 改为 30,其他类似。

      • 然后,我们新建一个 TextBlock ,并且使用 Style,代码如下:

        <TextBlock Text="This is a demo text around Style"
                   Style="{StaticResource myStyle}"/>
        
      • 最后,我们编译,看一下使用效果!效果如下:

补充知识:Margin 和 Padding

Margin 和 Padding 都是表示边缘空出的大小,只是 Margin 表示向外空出,而 Padding 表示向内空出。

语法:

以下以 Button 为例

  • Margin:

    <Button Content="Demo to show margin"
            Margin="10,10,10,10"/>
    
  • Padding:

    <Button Content="Demo to show padding"
            Padding="10,10,10,10"/>
    

    解释:其中四个数字分别表示左、上、右、下四个方向的空出大小,向上面这种特殊情况,左上右下四个数一样的话,那你也可以直接只输入一个数字,例如:Margin="10"

运行效果:

以下为了显示效果建立了多个 Button

  • Margin:

    • 无 Margin:

    • 有 Margin:

  • Padding:

    • 无 Padding:

    • 有 Padding:

提示:Margin 和 Padding 也可以设置负数,效果大家可以自己去试一试哈!

总结

好啦!今天就到此为止啦!今天的量可能比较大,希望大家好好理解吧!

下次会给大家介绍一下 ListView 和 其他一些控件。很快就要带领大家去真正走进 C# 的世界了,XAML 的知识复杂的还有很多,我可能会在中阶课程内做更深入的介绍。

下篇见哈!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,723评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,003评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,512评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,825评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,874评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,841评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,812评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,582评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,033评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,309评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,450评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,158评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,789评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,409评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,609评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,440评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,357评论 2 352

推荐阅读更多精彩内容