XAML에 대한 기본 지식과 UWP에서 사용하는 Tool에 대해 알아보기

오프라인에서 다루고자하는 주제에 대해서 이야기를 주세요~라고 했더니 Xaml 사용법에 대해서 알고 싶다고 하셔서 간단하게 정리하도록 하겠습니다.

 

 

 

 

1. XAML에서 namespace 사용하기 줄여서 xmlns

 

xmlns는 XML Namespace를 정의한 것을 의미하며, 일종의 Prefix로 사용합니다. 만약, 여러분이 만든 클래스를 사용하려면, 반드시 xmlns를 이용해서 Prefix를 정한 후에야 사용이 가능합니다.

 

namespace App1.Test
{
    public class NameSpaceTestClass : DependencyObject
    {
        public string Name { get; set; }
    }
}

 

위와 같은 클래스를 만들고 xaml에서 불러서 사용하려면 App1.Test라는 namespace를 대체할 것이 필요합니다.

빌드를 하고 XAML에서 xmlns를 입력 후 =를 입력하면, 입력할 수 있는 내용이 목록으로 출력되고, App1을 선택 후 . 을 눌러주면 Test가 표시 됩니다. 그 후에 이 녀석의 Prefix를 test로 지정 합니다.

 

 

그 이 후에 <test:을 입력하면, 해당 네임스페이스에 있는 클래스를 사용할 수 있게 됩니다. 예제로 만든 NameSpaceTestClass는 의존성 객체(DependencyObject)로 리소스(Resources)에 등록해서 사용할 수 있습니다.

 

 

 

2. x: 뒤에 사용하는 내용들에 대해서

 

 

1) x:Key :

리소스에 등록되는 객체를 다른 곳에서 사용하기 위해서 입력합니다.

 

    <UserControl.Resources>
        <test:NameSpaceTestClass x:Key="TestClass" Name="Hello x:Key"/>
    </UserControl.Resources>
   
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Text="{Binding Name, Source={StaticResource TestClass}}"
                   VerticalAlignment="Center" FontSize="20" HorizontalAlignment="Center"/>
    </Grid>

 

 

2) x:Name :

컨트롤을 코드 비하인드에서 사용하기 위해 작성 합니다.

 

    <UserControl.Resources>
        <test:NameSpaceTestClass x:Key="TestClass" Name="Hello x:Key"/>
    </UserControl.Resources>
   
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock Text="{Binding Name, Source={StaticResource TestClass}}" FontSize="20" Foreground="Green" />
            <TextBlock x:Name="Block"  FontSize="20" Foreground="Blue"/>
        </StackPanel>
    </Grid>

 

 

    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            //텍스트 입력
            Block.Text = "Hello x:Name";
        }
    }

 

 

3) x:Class :

XAML의 클래스 명을 입력합니다.

 

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:test="using:App1.Test"
    mc:Ignorable="d">

 

 

4) x:DataType :

WinRT에서 사용하는 컴파일 바인딩을 하기위해 Data의 형을 지정하는 것입니다.

 

public class BindModel
{
    public Windows.UI.Color Color { get; set; }
}

<DataTemplate x:Key="test" x:DataType="local:BindModel">
    <TextBlock>
        <TextBlock.Foreground>
            <SolidColorBrush Color="{x:Bind Color}"></SolidColorBrush>
        </TextBlock.Foreground>
    </TextBlock>
</DataTemplate>

 

 

5) x:DeferLoadStrategy :

성능 향상을 위한 속성으로 이 속성을 사용하면 화면 출력되는 아이템들을 지연 시킬 수 있습니다. 다만, 이 내용을 구현하기 위해 각 항목 당 600 bytes의 메모리를 더 차지 합니다.

 

<object x:DeferLoadStrategy="Lazy" .../>

 

 

 

6) x:FieldModifier :

정확하게 어떤 동작을하는지..모르겠내요 아래 페이지를 참고하세요

https://msdn.microsoft.com/ko-kr/library/aa970905(v=vs.110).aspx

 

 

7) x:Phase :

ListView 및 GridView 의 아이템 내부에 항목들을 랜더링하는 방법을 정의해서, 빠른 스크롤 이동에 대응 하기위한 속성

 

<DataTemplate x:Key="PhasedFileTemplate" x:DataType="model:FileItem">
    <Grid Width="200" Height="80">
        <Grid.ColumnDefinitions>
           <ColumnDefinition Width="75" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Image Grid.RowSpan="4" Source="{x:Bind ImageData}" MaxWidth="70" MaxHeight="70" x:Phase="3"/>
        <TextBlock Text="{x:Bind DisplayName}" Grid.Column="1" FontSize="12"/>
        <TextBlock Text="{x:Bind prettyDate}"  Grid.Column="1"  Grid.Row="1" FontSize="12" x:Phase="1"/>
        <TextBlock Text="{x:Bind prettyFileSize}"  Grid.Column="1"  Grid.Row="2" FontSize="12" x:Phase="2"/>
        <TextBlock Text="{x:Bind prettyImageSize}"  Grid.Column="1"  Grid.Row="3" FontSize="12" x:Phase="2"/>
    </Grid>
</DataTemplate>

 

 

8) x:Shared="false" :

리소스에만 사용이 가능하며, 리소스를 호출하는 경우 각 개별 인스턴스를 만들어서 전송합니다. 기본값은 true입니다. 그런데 WPF에서만 사용이 가능합니다;; 왜 UWP에서도 튀어나오는거얌;;

https://msdn.microsoft.com/ko-kr/library/aa970778(v=vs.110).aspx

 

<ResourceDictionary>
  <object x:Shared="false".../>
</ResourceDictionary>

 

사용하면 아래와 같은 오류 메시지가 출력됩니다.

 

Severity Code Description Project File Line Suppression State
Error  XBF generation error code 0x09c4. App1 C:\Sample\App1\App1\MainPage.xaml 12 

 

 

9) x:Subclass

기본적으로 partial 클래스 선언을 지원하지 않는 언어를 위한 것으로 UWP앱에서는 사용할 필요가 없습니다.

 

 

10) x:TypeArguments

음 거의 사용하지 않는것 같은데..자세한 설명은 아래 링크를 참고하세요

https://msdn.microsoft.com/ko-kr/library/ms750476(v=vs.110).aspx

 

 

11) x:Uid

지역화 리소스를 XAML에서 사용하기 위한 키를 입력합니다. 하지만, 이걸로 리소스를 사용하면 마니 힘듭니다...

https://msdn.microsoft.com/ko-kr/library/bb613571(v=vs.110).aspx

 

 

3. UWP Tool 소개

 

1) WinRTXamlToolkit UWP 버전

 

옛날 옛날 윈도 망고 폰이 나왔을 때부터 계속 버전업을 하면서 꾸준히 관리되는 툴킷으로 무료 컴포넌트 툴킷 중 최고라고 할 수 있습니다.

 

설치

 

프로젝트 페이지

https://github.com/xyzzer/WinRTXamlToolkit

 

소스를 다운로드 받아서 데모를 확인하면서 컨트롤 사용법 확인합니다.

 

 

2) Telerik UI for Universal Windows Platform

유명한 텔레릭 사의 컴포넌트 입니다. 텔레릭 컴포넌트도 상당히 오래부터 계속 만들어지고 있으며 좋은 성능을 가지고 있어서, 상용 앱을 만들 때 사용하면 좋습니다.

http://www.telerik.com/universal-windows-platform-ui

 

 

3) ComponentOne Studio UWP Edition

과거 FarpointSpread라는 컴포넌트를 만들었던 회사로 UWP 앱 개발 컴포넌트도 정식 출시 했습니다.

https://www.componentone.com/Studio/Platform/UWP

 

 

4) DevExpress Windows 10 Apps

국내에 많은 회사들이 사용하는 DevExpress의 Windows 10 용 컴포넌트 입니다.

https://www.devexpress.com/Products/NET/Controls/Win10Apps/

 

 

4. XAML이 WinForm과 다른 점..

 

Winform 개발 환경에서는 고객의 입맛에 맞게 컴포넌트 자체를 커스터 마이징을 하는 것이 한계가 있습니다. 하지만, XAML 환경에서 사용하는 컴포넌트들은 대부분 보이는 대부분의 내용을 수정이 가능하기 때문에 요즘 프로젝트들이 WPF를 사용하고 있다고 생각합니다.

 

정말 원하는 모양의 원하는 기능의 컴포넌트가 필요하다면, 자신이 직접 만들고 다듬어보는 것도 개발의 재미있는 요소가 아닐까 생각합니다.