윈도우 앱개발을 향하여

Copyright

이 모든 내용은 Pluralsight에 Kevin Dockx가 올린 'XAML Jumpstart : Getting Started With XAML' 이라는 강의의 8번째 챕터를 듣고 정리한 것입니다(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

Debugging XAML

Setting breaakpoints in XAML isn't possible (except in Silverlight), but can use the output window to check for data binding errors

Output window를 통해서 대부분의 Data Binding error를 찾아낼 수 있다.

Analyzing XAML

After a while, it can become quite hard to find the source of a UI-related mistake in a XAML document, especially when you start creating custom templates

XAML Spy, develped by Koen Zwikstra, provides a real time view of your app state.From here, we can examine and modify properties of any element on the fly and see the changes reflected immediately in the running app.(www.xamlspy.com)

XAML Tips

How you write your XAML can have a tremendous impact on application performance

1. Minimize element count

eg. Use Background on Grid instead of filling the Grid with a Rectangle to achieve the same, Rectangle uses memory more!

2. Reuse resources

Resources you reuse are only created once

eg. specific brush that you're using throughout your application, create that brush, put it in a resource dictionary, and refer to it through StaticResource rather than setting the brush manually each time you use it. Not only is it a lot easier to change the brush afterwards, but the resource only has to be created once so you get one instance of that brush in memory instead of having multiple instances of that brush in memory.

3. Avoid unnecessary overdraw (specially important!)

Every pixels needs to be drawn, even if it's fully overlaid by another pixel. UWP app that has to run on a low-end ARM device, the maximum amount of overdraw that can take is about 4 pixels, and that's not a lot.

Memory profiing

Performance-related problems often arise in XAML applications, and contrary to what might look obvious, memory profiling is one of the best ways to locate the source of those problems. (You typically do not use a performance profiler to fix these issues because memory profiler is actually one of the best ways to locate the source of those problems. That's because a lot of those performance-related problems actually stem from bad memory management)

Telerik(http://telerik.com/)

JetBrains(http://jetbrains.com/)

Visual studio build in memory profiler

Summary (생략)

출처

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

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의 강의를 들으실 수도 있습니다.

Copyright

이 모든 내용은 Pluralsight에 Kevin Dockx가 올린 'XAML Jumpstart : Getting Started With XAML' 이라는 강의의 6번째 챕터를 듣고 정리한 것입니다(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

ItemsControl (<-- Control)

One of the content model classes (http://empisterian.tistory.com/10)

Base class for ListBox, ComboBox, etc

Exposes ItemsSource, a property to assign the collection(IEnumerable) to generate content

ItemsPanel

ItemsPanel of type ItemsPanelTemplate. ItemsPanelTemplate은 생성된 item들을 담는 panel을 정의한다. Control을 상속하는 각 ItemsControl은 default ItemsPanel을 가진다(ex ListBox의 디폴트 ItemsPanel은 StackPanel이고 이 속성을 통해 변경이 가능하다.)

ItemContainer

For each item in the data collection we set this ItemsSource, and ItemContainer is created behind the scenes, which holds the item. Each ItemsControl type has a corresponding ItemContainer type(ex For ListBox the ItemContainers are ListBoxItem controls. For ComboBox they are ComboBoxItem controls, and so on). They are automatically generated by the specific ItemsControl for each item the ItemsControl needs to display and they contain the data for that item.

ItemTemplate

This property should be set to something of type DataTemplate, which is what will define how each data object will be visualized.

ex   <ListBox Width="300" Height="300"

                     HorizontalAlignment="Center" VerticalAlignment="Center"

                     ItemsSource="{x:Bind personRepo.Peaple, Mode=OneWay}">

              <ListBox.ItemsPanel>

                    <ItemsPanelTemplate>

                        <StackPanel Orientation="Horizontal"/>     //Set Horizontal StackPanel in ItemsPanel

                    </ItemsPanelTemplate>

              </ListBox.ItemsPanel>

              <ListBox.ItemTemplate>

                   <DataTemplate x:DataType="model:Person">   //Set TextBlocks to visualize collection data

                        <StackPanel Orientation="Vertical">

                            <TextBlock Text="{x:Bind Name}"/>

                            <TextBlock Text="{x:Bind Age}"/>

                        </StackPanel>

                   </DataTemplate>

              </ListBox.ItemTemplate>

       </ListBox>

DataTemplateSelector

DataTemplateSelector로 collection의 각 item들에게 서로 다른 DataTemplate를 적용시켜 다르게 시각화시킬 수 있다.

1. DataTemplateSelector를 상속하는 클래스를 만든다.

2. Override and implement the SelectTemplate method

3. Assign an instance of it to the ItemTemplateSelector property of the ItemsControl

ex   public class PersonDataTemplateSelector : DataTemplateSelector

{

          public DataTemplate UnderThirtyTemplate { get; set; }

          public DataTemplate ThirtyOrOlderTemplate { get; set; }

          protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)

//item = data item

          {

              var person = item as Models.Person;

              if(person.Age < 30) return UnderThirtyTemplate;

              else return ThirtyOrOlderTemplate;

          }

}

<Page.Resources>

      <DataTemplate x:Key="dtYoungerThenThirty">

            <StackPanel Orientation="Vertical">

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

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

            </StackPanel>

      </DataTemplate>

      <DataTemplate x:Key="dtOlderThenThirty">

            <StackPanel Orientation="Vertical">

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

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

            </StackPanel>

      </DataTemplate>

      <helper:PersonDataTemplateSelector x:Key="personDTS"

                                           ThirtyOrOlderTemplate="{StaticResource dtOlderThenThirty}"

                                           UnderThirtyTemplate="{StaticResource dtYoungerThenThirty}"/>

 </Page.Resources>

<ListBox Width="300" Height="300"

                     HorizontalAlignment="Center" VerticalAlignment="Center"

                     ItemTemplateSelector="{StaticResource personDTS}"

                     ItemsSource="{x:Bind personRepo.Peaple, Mode=OneWay}">

 </ListBox>

Notifying the UI : Collections

The collection should implement the INotifyCollectionChanged interface to be notified by changes of collection

This interface exposes a CollectionChanged event that should be invoked when the UI should be notified

There is a building collection that already implements this interface, the ObservableCollection<T>.

Summary(생략)

출처

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