What's New in XAML for Universal Windows Apps 정리하기와 PivotCS 셈플로 살펴보기

Build 2015에서 발표되었던 세션 2-629 What's New in XAML for Universal Windows Apps 정리하기와 PivotCS 셈플로 살펴보기

ps. 마이크로소프트 엣지로 포스트를 작성하고 있는데..글 작성하는 것 까지는 문제가 없는데..사진 올리는 것이 않된다. 으흠;;;

목표!

Windows 10 Goal: Increase reach and opportunity
UWP Goal: Reduce developer cost to deliver on the increased opportunity

개발자에게 개발에 들어가는 비용을 줄이는데 목표가 있다고 하는데..으흠..최종적으로는 잘 사용하는 경우에..라는 단서를 달고 싶다..머 하나씩 다시 배우다보면 언젠가는 개발 비용이 줄어들겠지..쿨럭 그러다가, 내년에 다시 추가 기능 나오면 또 배우고..

 

개발툴 설치

Windows 10 developer tools preview

https://dev.windows.com/en-US/downloads/windows-10-developer-tools?OCID=insider

Visual Studio 2015 RC 설치 페이지에서

VS 2015 RC를 다운받으려면 왼쪽, 이미 설치가 되어있으면 오른쪽을 눌러서 추가 Tool을 설치한다.

https://dev.windows.com/en-us/downloads/install-dev-tools-visual-studio-2015

 

새 컨트롤들

 

셈플을 통해서 아래 각 항목들을 자세하게 살펴 보도록 하자.

Windows 10 Technical Preview universal app samples

http://microsoft.github.io/windows/

 

예제를 실행하기 위해서는 개발자 모드가 활성화 되어야한다.

그런데, 지금은 개발자 모드를 활성하려고 하더라도 오류가 발생하는데, 아래 링크에서 해결 방법을 찾을 수 있다.

 

 

Enable your device for development

https://msdn.microsoft.com/library/windows/apps/xaml/dn706236.aspx#GroupPolicy

 

앞으로는 간단한 방법으로 개발자 모드를 활성화 할 수 있다고 하니 참고하자..쿨럭

 

 

 

1. Pivot

이 녀석은 윈폰에서는 있었는데..윈8에는 없었던 녀석이다. 그래서 새 컨트롤이라고 하는 것인가?

중요한 컨트롤로 체크~

 

2. ContentDialog

MessageBox로 사용하던 녀석인데..이름이 변경된 것인지...사용해 봐야 알 것 같다.

3. AutoSuggestBox

새로 추가되기는 했는데..이전 버전에서 SearchBox라는 녀석이 있었는데, 그 녀석은 사라지고 이녀석이 새로 추가되었다. 앞으로 이걸 사용하라고 한다.

추천 단어 목록을 어떻게 뿌려주는지는 확인해 봐야겠다.

4. Maps

기존에도 Bing Map을 이용하면 지도를 표시할 수 있었다. 그런데 이번에는 그냥 Map이라는 거 봐서는 Bing 이란 글씨를 뺀것 같다.

한국지도를 지원한다고 해서 잘 사용해 보아야 겠다.

5. SplitView

컨트롤 중에 핵심에 해당하는 녀석이다. 화면의 크기에 따라서 디자인을 변경해야하는 것이 이번 앱의 특징이기 때문에 햄버거 메뉴를 어떻게 표시하고, 네비게이션 처리를 어떻게 할 것인지를..이 녀석과 이야기를 해 보아야 한다.

잘 부탁한다..쿨럭

6. AdaptiveTrigger/Setter

반응형 뷰에서 꼭 필요한 것 중에 하나로, 화면의 크기에 따른 VisualState를 변경하는데 사용된다.

7. RelativePanel

아이템 템플릿의 구성을 기존에는 Grid나 StackPanel로 만들었었는데..이제는 RelativePanel을 이용해서 구성해야 할 것 같다..

약간 머리 아플듯..

8. x:Bind

이번에 바인딩 성능 증가를 위해서, 바인딩을 컴파일러에서 처리하는 기능이 추가되었다. 성능의 향상과 이벤트까지 바인딩을 사용할 수 있어서 더 좋아 질 것 같다. 하지만, 모든 Binding을 커버하지는 못하고 사용하지 못하는 몇가지 경우가 존재한다.

이 부분에 대해서도 자세하게 보아야 할 것같다.

9. PerspectiveTransform3D

윈8때 Transform3D가 빠졌었는데, 이번에 다시 추가되었다. 음..UI를 3차원으로 보여줄 수 있다는 장점이 있다. 머 얼마나 사용할지는 잘 모르겠지만..

10. Windowing

윈도우의 타이틀바의 색을 변경하거나, 몇가지 추가작업을 할 수 있다. 기존 윈8 앱에서는 전혀 손을 대지 못하던 부분이다.

11. InkCanvas

손글씨를 입력 받는 잉크 켄버스가 추가되었다. 쉽게 손글씨를 입력 받을 수 있다.

12. Drag and Drop 지원

드래그 드롭을 지원한다...열심히 사용해 보자.

13. WebView

기존에 IE에서 Edge로 변경된 것 같다.

14. 기타

CommandBar Updates
Vector Fonts
Property Change Improvements
New Content Presenter APIs
IME Composition Events
Directional Navigation
ListView Enhancements
Framework Element Loading Event
Improved Animation Experiences
Improved XAML/DX Interopability
Software Bitmap Source
Silverlight memory improvements
Printing APIs on Mobile
Improved BiDi handling
Improved ScrollViewer APIs
Casting in media elements

PivotCS 셈플로 살펴보기

xaml_pivot > CS

PivotCS

 

MainPage.xaml

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

</Page>

</Page>

 

메인 페이지에서 평소에 보여야 하는 녀석 중에 않보이는 것이 DesignWidth, DesignHeight이다.

음..빌드에서도 이야기 했듯이 화면 사이즈를 콤보박스에서 선택하도록 되어 있기 때문에 필요가 없어서 인듯 하다.

 

 

 

그래서, 콤보박스를 눌러보니 다양한 스케일이 존재하는데..세로가 720이 제일 작다.

 

 

첫화면 xaml를 열고 내용을 살펴보니 약간 난감한 것 같다.

 

우선 비주얼스테이트를 살펴 보았는데, 새로 추가된 AdaptiveTrigger, Setter 등은 Timeline에 표시가 되지 않는다.

이 것은 아마도 스토리보드로 처리하는 것이 아니라 비주얼스테이트 자체의 액션이기 때문인 것 같은데...

나중에는 표시가 되겠지? 이 부분은 복사해서 사용하는 것으로 넘어가자

 

 

 

비주얼스테이트가 Grid 내부에 존재하는 것도 약간 특이한 것 같다. Page에 존재해도 될 것 같은데..왜 여기 있는 것일까??

 

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="wideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="641" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="Splitter.DisplayMode" Value="Inline"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="narrowState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="Splitter.DisplayMode" Value="Overlay"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

 

기본 상태가 narrowState이고 화면 너비가 641이 되면 wideState가 적용된다. 그런데..Setter에 있는 TargetPropertyPath가 뭘까?? 도대체 어떤 넘의 벨류를 변경하란 거냐!!

 

정상적으로 동작하는 코드를 찾아서 변경했다.!

 

우선은 아래 내용만 참고하고 넘어 가도록 한다.

 

TargetPropertyPath class

https://msdn.microsoft.com/en-us/library/windows.ui.xaml.targetpropertypath.aspx

 

 

SplitView 부분을 살펴 보니 대략 아래의 구조를 가지고 있다.

 

        <SplitView x:Name="Splitter" IsPaneOpen="True" Grid.Column="1">
            <SplitView.Pane>

                 <!--햄버거 버튼을 눌렀을 때 튀어 나오는 부분-->
            </SplitView.Pane>

 

            <RelativePanel>

              <!--메인 화면-->
            </RelativePanel>
        </SplitView>

 

햄버거 버튼은 SplitView에 딸려있는 녀석이 아니였다!..난 여태 같은 놈인 줄알았는데..쿨럭;; 그넘은 ToogleButton으로 만든것으로 버튼을 클릭하면 SplitView에 IsPaneOpen을 열어주는 역할을 한다.

 

화면의 구분은 아래 이미지를 참고하자.

 

 

 

이제 Pivot을 살펴 보자

Scenario1을 보면 가장 기본적인 모양이다.

            <Pivot Grid.Row="1">
                <PivotItem Header="Mouse Support">
                </PivotItem>
                <PivotItem Header="Keyboard Support">
                </PivotItem>
                <PivotItem Header="Header Behaviors">

                </PivotItem>
                <PivotItem Header="Header Content">
                </PivotItem>
                <PivotItem Header="Pivot Styling">
                </PivotItem>
            </Pivot>

 

 

 

Scenario2를 보면 Pivot 컨트롤의 헤더 부분이 약간 특이하다.

        <Pivot>

            <Pivot.LeftHeader>
                <AppBarButton Icon="Back" Click="BackButton_Click" />
            </Pivot.LeftHeader>

            <Pivot.RightHeader >
                <Grid>
                    <AppBarButton Icon="Find" x:Name="CompactSearchBox" Visibility="Collapsed"
                                  VerticalAlignment="Stretch">
                        <AppBarButton.Flyout>
                            <Flyout>
                                <AutoSuggestBox 
                                VerticalAlignment="Center" Width="250" Margin="4,4,8,4"
                                QueryIcon="Find" PlaceholderText="enter a search term"
                                TextChanged="AutoSuggestBox_TextChanged"
                                QuerySubmitted="AutoSuggestBox_QuerySubmitted"
                                SuggestionChosen="AutoSuggestBox_SuggestionChosen"
                                ItemsSource="{x:Bind Suggestions}"/>
                            </Flyout>
                        </AppBarButton.Flyout>
                    </AppBarButton>

                    <AutoSuggestBox x:Name="SearchBox" 
                                VerticalAlignment="Center" Width="250" Margin="4,4,8,4"
                                QueryIcon="Find" PlaceholderText="enter a search term"
                                TextChanged="AutoSuggestBox_TextChanged"
                                QuerySubmitted="AutoSuggestBox_QuerySubmitted"
                                SuggestionChosen="AutoSuggestBox_SuggestionChosen"
                                ItemsSource="{x:Bind Suggestions}"/>
                </Grid>
            </Pivot.RightHeader>

            <PivotItem Header="New">
            </PivotItem>
            <PivotItem Header="Flagged">
            </PivotItem>
            <PivotItem Header="All">
            </PivotItem>
        </Pivot>

 

해더 왼쪽부분과 오른쪽 부분에 대해서 정의를 할 수 있고, 오른쪽은 AutoSuggestBox를 이용해서 검색을 할 수 있는 기능이 있다.

 

 

 

Scenario3 PivotItem의 헤더를 커스터 마이징 할 수 있고, Tab처럼 사용할 수 있다는 것을 알 수 있다.

                <Pivot Style="{StaticResource TabsStylePivotStyle}">
                    <PivotItem>
                        <PivotItem.Header>
                            <local:TabHeader Label="item 1" Glyph="&#xE719;" />
                        </PivotItem.Header>
                        <TextBlock Text="Content content content" />
                    </PivotItem>
                    <PivotItem>
                        <PivotItem.Header>
                            <local:TabHeader Label="item 2" Glyph="&#xE721;" />
                        </PivotItem.Header>
                        <TextBlock Text="Content content content" />
                    </PivotItem>
                    <PivotItem>
                        <PivotItem.Header>
                            <local:TabHeader Label="item 3" Glyph="&#xE723;" />
                        </PivotItem.Header>
                        <TextBlock Text="Content content content" />
                    </PivotItem>
                </Pivot> 

 

윈폰용 Pivot 컨트롤에 비해 약간 발전된 모습을 볼 수 있었다.

 

 

마지막으로 ContentDialog를 사용하는 것도 확인해 보자

 

            var MyDialog = new ContentDialog();

            if (model != null)
            {
                var MyImage = new Image();
                MyImage.Source = new BitmapImage(new Uri(model.ImagePath));
                MyImage.HorizontalAlignment = HorizontalAlignment.Stretch;
                MyImage.VerticalAlignment = VerticalAlignment.Stretch;
                MyImage.Stretch = Windows.UI.Xaml.Media.Stretch.UniformToFill;
                MyDialog.Title = String.Format("You have selected {0}", model.ToString());
                MyDialog.Content = MyImage;
            }
            else
            {
                MyDialog.Title = "No item found";

            }

            MyDialog.PrimaryButtonText = "OK";

            Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () => MyDialog.ShowAsync());

 

여기서 약간 이상한 부분은 왜 Dispatcher를 이용해서 열었을까? 음음..