(XAML)Using Resources and Styling Controls

Copyright

이 모든 내용은 Pluralsight에 Kevin Dockx가 올린 'XAML Jumpstart : Getting Started With XAML' 이라는 강의의 7번째 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/xaml-jumpstart/table-of-contents). 강의 원작자분께 게시허가도 받았습니다.

Content

1. Basic Elements, Shapes, Brushes, and Masks

2. Control Basics and Interacting with them

3. Panels and the Layout System

4. Data Binding Essentials

5. Working with ItemsControls

6. Using Resources and Styling Controls

7. Debugging and Analyzing XAML

8. Choosing the Right Tool for the Job

Resources

Any object can be defined as a resource, effectively making it a reusable asset

Often-used are (Data)Templates, Brushes and Styles

Resources에 x:Key를 정의해야 접근할 수 있다. x:Key is a key to gets in the dictionary. The corresponding value is the resource itself.

They are defined in a Resource Dictionary. Framework(Content)Element에는 Resources property(of type ResourceDictionary)가 정의되있다.

The StaticResource markup  extension is used to access the resource. (The StaticResource markup extension processes key by looking up the value for that key in all available resource dictionaries. This happens during loads, which is the point in time when the loading process needs to assign the property value that takes the StaticResource reference. So that's how it ties together.)

=>Define Resource in a ResourceDictionary, give it a key through x:Key, access it with the StaticResource markup extension providing set resource key.

ex   <Page.Resources>

        <SolidColorBrush x:Key="redColorBrush" Color="#FFFF1111" />

</Page.Resources>

<TextBlock Foreground="{StaticResource redColorBrush}" Text="first" />

Resource Scope

The scope of a resource depends on the resource dictionary it's defined in. ex Define it on a Grid(or Page), then it's accessible by all child elements on that Grid(or Page).

Full app as scope(the app root) => an app can be found in App.xaml's resource dictionary. It's the root of application. so if resources defined here are scoped to the complete application.

Resource Dictionaries in a separate file

Using separate files offers advantages - Better separation, More control, More reuse

=> make .xaml document starting with ResourceDictionary tag

=> Add the dictionary to the Resources tag where you want it scoped (App.xaml on page level or at element level...)

or merge multiple resource dictionaries through ResourceDictionary.MergedDictionaries syntax

#ResourceDictionary.MergedDictionaries syntax를 사용할 땐 hierarchy에 주의할 것, It the DataTemplates use a brush defined in the brush ResourceDictionary, we need to add that one first before the DataTemplates dictionary is added

ex   //Create Brushes.xaml as ResourceDictionary and add...

<SolidColorBrush x:Key="redColorBrush" Color="#FFFF1111" />

//add above ResourceDictionary to App.xaml

<Application.Resources>

        <ResourceDictionary Source="Style/Brushes.xaml"/>

</Application.Resources>

//then redColorBrush was added to application-wide scope and can be used everywhere

ex   //Create DictionaryWithDataTemplate.xaml as ResourceDictionary and add...

<DataTemplate x:Key="dtPerson">

<StackPanel Orientation="Vertical">

          <TextBlock Text="{Binding Name}"/>

          <TextBlock Text="{Binding Age}" Foreground="{StaticResource redColorBrush}"/>

</StackPanel>

</DataTemplate>

//add App.xaml...

<Application.Resources>

        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <ResourceDictionary Source="Style/Brushes.xaml" />        //ResourceDictionary의 배치 순서에 주의할 것

                <ResourceDictionary Source="Resource/Templates/DictionaryWithDataTemplate.xaml" />

            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>

</Application.Resources>

Styles

A Style is a convenient way to apply a set of property values to more than one element

Styles are defined in a Resource Dictionary

Through TargetType, we specify the type of target for the Style (eg : TextBlock, Button etc)

Every Style must have a key (x:Key), and Syles are assigned through StaticResource

implicit styling

Implicit styling allows us to specify a style that will be applied to all elements of a specific type

Through TargetType, we specify the type of target for the Style

We don't set a key : this is implicit

We no longer have to assign the Style explicitly

eg  <Style x:Key="textBlockStyle" TargetType="TextBlock">

            <Setter Property="FontSize" Value="40"/>

            <Setter Property="HorizontalAlignment" Value="Left"/>

            <Setter Property="Foreground" Value="Blue"/>

</Style>

<TextBlock

                Style="{StaticResource textBlockStyle}"

                Text="Hello world!" />

위의 Style에서 x:Key를 지우면 implicit style이 되고 이 Page내의 모든 TextBlock(target type)의 Style로 지정된다.

Style Inheritance

When most property values in different style sets are the same, we can inherit a base style to base the more specific styles on

1. Define a base Style, and give it a key

2. Define an inheriting Style, and set the BaseOn property to that Style through StaticResource

3. Inheritance depth is not limited, but multiple inheritance isn't allowed

eg  <Style x:Key="textBlockStyle" TargetType="TextBlock">

            <Setter Property="FontSize" Value="40"/>

            <Setter Property="HorizontalAlignment" Value="Left"/>

            <Setter Property="Foreground" Value="Blue"/>

      </Style>

      <Style x:Key="newTextBlockStyle" TargetType="TextBlock"

               BasedOn="{StaticResource textBlockStyle}">

            <Setter Property="Margin" Value="20"/>

      </Style>

//Implicit Style을 상속받기 위해선 BaseOn="{StaticResource {x:Type TextBlock}}"과 같이 x:Type을 사용하면 되는 것 같으나 UWP에서는 지원되지 않는 기능으로 보인다. (https://stackoverflow.com/questions/33562864/xtype-missing-in-uwp-how-override-base-control-style)

Summery (생략)

출처

이 모든 내용은 Pluralsight에 Kevin Dockx가 올린 'XAML Jumpstart : Getting Started With XAML' 이라는 강의의 7번째 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/xaml-jumpstart/table-of-contents). 제가 정리한 것보다 더 많은 내용과 Demo를 포함하고 있으며 최종 Summary는 생략하겠습니다. Microsoft 지원을 통해 한달간 무료로 Pluralsight의 강의를 들으실 수도 있습니다.