XAML or HTML

[번역] 아름다운 UWP 앱을 디자인하기 위한 5가지 팁

번역


원문 : 5 Tips for Designing Beautiful UWP Apps

 

블로그 포스트는 Property Manager 코드 예제 UWP 버전의 디자인 아이디어와 해법들을 다루고 있습니다 (최근 포스트 : https://github.com/microsoftgraph/xamarin-csharp-propertymanager-sample). 코드 예제는 Microsoft Graph 활용한 크로스 플랫폼 솔루션이며, 기본 사용자 경험에 촛점을 맞추고 있습니다. 코드 예제에 대해 알아보길 원한다면, 다음 블로그 포스트를 방문해보세요 : http://simonjaeger.com/a-xamarin-native-sample-for-the-microsoft-graph/

 

코드 예제에 사용된 윈도우 10 어플리케이션(설정, 메시지)들에서는 많은 유사점을 발견할 있습니다 - 바로 그런 점들을 정리하려고 했습니다. 블로그 포스트는 크게 5가지의 토픽으로 나누어져 있습니다. 그것들은 윈도우 10 한몸인 것처럼 느껴지는 사용자 경험을 만드는데 도움이 됩니다.

 

    1. 누구나 애니메이션을 좋아합니다.

       

      플랫폼의 상징적인 기능중 몇가지는 바로 애니메이션과 트랜지션입니다. 기능들은 좋게도 거의 모든 운영체제에서 동작합니다 - UWP 앱에서 기능들을 사용하는 방법 매우 간단합니다. 코드 구현은 간단한 일일 있습니다. 그에 반해 사용자 경험에 끼치는 영향력은 대단합니다. 기능들을 추가하면 사용자 경험은 더욱 세련되어지고 상호작용은 즐겁게 됩니다.

       

      매우 간단한 형태의 NavigationThemeTransition XAML 페이지에 추가합니다. NavigationThemeTransition 구성하면, 시스템이 페이지 간의 콘텐츠 애니메이션을 처리합니다. 방법은 기존 마크업에 다른 속성을 추가하거나 수정할 필요가 없습니다.


      1
      2
      3
      4
      5
      6
      7
      8
      9
      <views:MvxWindowsPage.Transitions>
          <TransitionCollection>
              <NavigationThemeTransition>
                  <NavigationThemeTransition.DefaultNavigationTransitionInfo>
                      <ContinuumNavigationTransitionInfo/>
                  </NavigationThemeTransition.DefaultNavigationTransitionInfo>
              </NavigationThemeTransition>
          </TransitionCollection>
      </views:MvxWindowsPage.Transitions>


      시스템이 어떻게 애니메이션을 동작해야 하는지 알기 위해서는 몇 가지 트랜지션 정보를 제공해야 합니다. 아래 코드 예제는 빌트인 ContinuumNavigationTransitionInfo 개체를 사용합니다. 이 개체는 Windows 10에 대부분 사용되는 네비게이션 애니메이션의 트랜지션 정보를 포함하고 있습니다.

       

      ­


        2. 일관된 타이포그래피를 활용하세요.

           

          정교하게 사용된 타이포그래피는 원하는 곳에 주목하게 만드는 가장 좋은 방법입니다. Windows 10 앱은 Segoe 글꼴 모음을 주로 사용합니다 (영문 OS). 여러분은 아마도 그냥 글꼴 모음을 계속 사용하려고 것입니다. 하지만 주의를 환기시키고 적절한 곳으로 유도할 있는 몇 가지 해법들이 있습니다.

           

          • Font weights: 가늘거나 굵게 표현합니다.

           

          • Font sizes: 머릿말과 제목은 주로 크기로 강조합니다. 본문과 단락은 작게 표현합니다.

           

          • Colors (RGB and A): 특이하고 강조가 필요한 곳에는 강조 색을 이용합니다. 또한 일부 특정 콘텐츠는 중요도를 낮추기 위해 투명도를 이용합니다.

           

          여기서 핵심은 다른 영역에 비해 중요도가 높은 영역이 주목을 끌어야 한다는 점입니다. 일부 콘텐츠는 사용자에게 흥미로울 있지만, 이와 동시에 일부 콘텐츠는 네비게이션 및 동작에 절대적으로 중요할 수 있습니다. 예를 들어, 중요도가 떨어지는 콘텐츠는 위의 방법 중 하나를 이용해 톤 감소될 수 있습니다.

          일관성을 유지하세요. 글꼴 스타일을 설정할 패턴을 지정하세요. 스타일을 정적으로 구성하고 XAML 페이지 전반에 걸쳐 재사용 할 있는 좋은 방법입니다. 코드 예제에서는 Styles.xaml 같은 리소스 딕셔너리에 재사용 가능한 모든 스타일을 포함시킵니다.


          1
          2
          3
          4
          5
          6
          7
          8
          9
          <Style x:Key="FadedBodyTextBlock" TargetType="TextBlock">
              <Setter Property="Opacity" Value="0.6"/>
              <Setter Property="FontSize" Value="14"/>
          </Style>
           
          <Style x:Key="HeaderTextBlock" TargetType="TextBlock">
              <Setter Property="FontSize" Value="24"/>
              <Setter Property="FontWeight" Value="SemiLight"/>
          </Style>


            3. 반응형으로 만들어야 합니다.
            4. 반복적인 구성 요소는 Custom UserControl 만듭니다.

               

              여러 XAML 페이지에서 반복해서 사용되고 있는 부분들을 발견했다면 Custom

              ­UserControl 만들어  부분에 사용하는 것이 좋을 있습니다. 장기적으로 시간을 절약할 있을 뿐만 아니라, 솔루션 전반에 일관된 경험 또한 확립할 있습니다.

               

              아래 코드 예제에서는 PointerTextBlock이라고 이름 붙여진 Custom TextBlock 사용되었습니다. 커서가 레이블을 가리킬 레이블을 강조하고 커서는 핸드 포인터로 변경합니다. 이렇게 하려면 일부 코드를 연결해야 합니다. UserControl의 XAML과 코드-비하인드, 둘의 재사용은 건전한 접근법을 만들어 냅니다. 이와 동시에 TextBlock UserControl 안에 포함되고, Text 속성은 DependencyProperty 통해 외부로 노출됩니다.

               

              UserControl 다음처럼 구현됩니다 :



              1
              2
              3
              4
              5
              6
              7
              8
              9
              10
              11
              12
              13
              14
              15
              16
              17
              18
              19
              20
              21
              22
              23
              24
              25
              26
              27
              28
              29

               
              public sealed partial class PointerTextBlock : UserControl
              {
                  private static readonly CoreCursor HandCursor = new CoreCursor(CoreCursorType.Hand, 1);
                  private static readonly CoreCursor ArrowCursor = new CoreCursor(CoreCursorType.Arrow, 1);
                  public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
                      "Text", typeof (string), typeof (PointerTextBlock), new PropertyMetadata(default(string)));
                  public string Text
                  {
                      get { return (string) GetValue(TextProperty); }
                      set { SetValue(TextProperty, value); }
                  }
                  public PointerTextBlock()
                  {
                      InitializeComponent();
                  }
                  private void OnPointerEntered(object sender, PointerRoutedEventArgs e)
                  {
                      Window.Current.CoreWindow.PointerCursor = HandCursor;
                      Opacity = 0.7;
                  }
                  private void OnPointerExited(object sender, PointerRoutedEventArgs e)
                  {
                      Window.Current.CoreWindow.PointerCursor = ArrowCursor;
                      Opacity = 1;
                  }
              }

               

              그런 후에 XAML 페이지 전반에 걸쳐 쉽게 재사용됩니다.


              1
              <controls:PointerTextBlock Text="Edit details" Foreground="{StaticResource AccentColorBrush}" Margin="0,15,0,0" Tapped="OnEditDetailsButtonTapped"/>


              ­


               

                5. 변형이 필요하다면 DataTemplateSelector 도움이 있습니다.


                  리스트 콘트롤에 다른 유형의 항목들을 함께 보여주고 싶으면 DataTemplateSelector라는 것을 구현할 있습니다. 그것이 하는 역활은 꽤나 직관적입니다. 부모 컨트롤의  리스트 항목이 사용할 템플릿을 선택하는 로직을 작성하는 일입니다. 다음 코드 예제는 주고 받은 대화 목록 다른 사용자가 보낸 메시지를 위한 템플릿 선택자(ConversationMessageTemplateSelector) 구현합니다. 여기서 템플릿은 다르게 정렬된 메시지 박스(다른 사람의 메시지는 좌측, 메시지는 우측) 말합니다. DataTemplateSelector 다음과 같이 구현됩니다.


                  1
                  2
                  3
                  4
                  5
                  6
                  7
                  8
                  9
                  10
                  11
                  12
                  13
                  14
                  15
                  16
                  17
                  18

                  public class ConversationMessageTemplateSelector : DataTemplateSelector
                  {
                      protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
                      {
                          var conversation = item as ConversationModel;
                          if (conversation == null)
                          {
                              return base.SelectTemplateCore(item, container);
                          }
                             
                          var resources = Application.Current.Resources;
                          if (conversation.IsOwnedByUser)
                          {
                              return resources["ConversationMessageRightTemplate"] as DataTemplate;
                          }
                          return resources["ConversationMessageLeftTemplate"] as DataTemplate;
                      }
                  }

                   

                  그런 다음 XAML 페이지 전반에 걸쳐 접근 가능하도록 Styles.xaml 파일에 배치시킵니다.

                   

                  1
                  <controls:ConversationMessageTemplateSelector x:Key="ConversationMessageTemplateSelector"/>

                   

                  마지막으로 리스트 컨트롤 (GridView)의 DataTemplateSelector 속성 ItemTemplateSelector 참조하면, 마법은 연결됩니다.


                  1
                  2
                  3
                  4
                  5
                  6
                  7
                  8
                  9
                  10
                  <GridView x:Name="ConversationsGridView" Grid.Row="0"
                            ItemsSource="{Binding Conversations}"
                            Style="{StaticResource GridViewStyle}"
                             ItemTemplateSelector="{StaticResource ConversationMessageTemplateSelector}">
                      <GridView.ItemsPanel>
                          <ItemsPanelTemplate>
                              <StackPanel Orientation="Vertical"/>
                          </ItemsPanelTemplate>
                      </GridView.ItemsPanel>
                  </GridView>


                   

                  만약 여러분이 버그 수정 또는 개선할 점등 발견한다면 알려주세요. 직접 구현할 없으면, GitHub 저장소에 이슈를 생성해주세요. 그러면 보게 것입니다. 만약 구현이 가능하다면 개선사항을 만들어 리퀘스트를 보내주세요. 그러한 일 코드 예제를 더욱 좋아지게 만들겁니다. 감사합니다!

                   

                  https://github.com/microsoftgraph/xamarin-csharp-propertymanager-sample

                   

                  Simon Jaeger

                  Micorosoft에서 여러 분야의 기술 에반젤리스트로 일하고 있습니다.

                  Technical Evangelist @Microsoft
                  #MicrosoftGraph #Xamarin #UWPDev #Office365Dev

                  simonjaeger.com



                  권영철

                  Microsoft Windows Development MVP 권영철입니다. C#과 XAML을 나름 열심히 공부하고 개발하고 있습니다. 번역을 허락해준 Simon Jaeger에게 감사드립니다.
                  Thank
                  s!



                  B818 Creating Beautiful UX in a Real-World App with Visuals, Animations and Effects

                  번역

                  출처: <https://channel9.msdn.com/Events/Build/2016/B818>

                     

                  안녕하세요. 마이크로소프트 MVP 권영철입니다. build 2016이 끝이 났습니다. 저는 주로 UWP 앱의 UI/UX 개발과 관련된 영상을 가장 먼저 시청할 계획입니다. 아래 정리한 내용은 발표자의 발표 내용 해석이 주가 되겠지만 때로는 이해를 돕기 위해 용어 변경 및 사견이 첨언될 수 있습니다. 그리고 오역도 포함될 수 있으니 가볍게 훑어 보시는 용도로 활용하시고 좀 더 정확한 내용은 직접 시청을 하시기를 권해드립니다.

                     

                  페이스북 윈도우 앱 개발 그룹의 박문찬 MVP님의 빌드정리 엑셀 문서에도 계속해서 업데이트하겠습니다. 박문찬 build 2016 UWP 동영상 링크 정리 엑셀 바로가기

                     

                  최고의 아이디어를 선정하는 일은 좋은 앱을 만들기 위한 일의 절반에 불과합니다. 사용자의 감정을 자극하는 장난과 유혹하는 매력과 멋진 경험을 가진 앱을 보장하는 일은 그 앱을 사용하는 고객을 신나게 하는 일입니다. 멋진 경험은 사용자를 기쁘게 하고, 그 앱을 계속해서 사용하게 합니다. 그리고 다른 사람에게 그런 긍정적인 경험을 전달합니다.

                     

                  이 세션은 UI/UX에 초점을 맞추고 있습니다. 잘 만들어진 UI 기초에 애니메이션, 이펙트와 밀접한 새로운 기능으로 UI/UX를 강화합니다. 그리고 사용자를 즐겁게 하는 새로운 장난같은 경험을 가능하게 합니다. 우리는 이런 경험들을 간단히 만들 수 있는 캡슐화된 일부 XAML 기술들을 통해 낮은 수준에서 가능한 개발자 플랫폼 스펙트럼을 살펴보려고 합니다.

                     

                  아름다운 슬라이드를 보면서 시작해볼까요?

                     

                  Position(위치)에 따라, Resize(크기)에 따라, Transition도 달라지고, Look(상태)도 달라집니다.

                     

                  이렇게 멋진 앱, 즉 앱스토어(Marketplace)에서 별점 5개 만점을 받을 만한 경험을 가진 앱은 어떻게 만들까요?

                     

                  UI Framework는 3개의 레이어로 나뉘어져 있습니다.

                     

                  Possible과 Easy는 상반됩니다. Framework 레이어로 가면 쉽지만 낮은 수준의 접근이 어렵고, Graphic 레이어도 가면 어렵지만 낮은 수준의 접근이 가능합니다.

                     

                  코드를 비교해 보면 쉽게 이해할 수 있습니다.

                  DirectX 코드 : 어렵지만 모든 것이 가능합니다.

                     

                  XAML 코드 : 쉽지만 제한적인 접근이 가능합니다.

                     

                  오늘 처음 Visual Layer 들어본 사람 손 들어보세요!

                     

                  새로운 기능 Visual Layer는 UI Foundation에 공통으로 들어가 있습니다.

                     

                  Visual Layer는 퍼포먼스를 위해 최적화되어 있습니다. 모든 UWP 디바이스에 최적화 되어 있습니다.

                     

                  지난 2015년 11월에 추가된 API들

                     

                  다음 윈도우 버전에서 추가될 API 구성 재료들

                     

                  케이스 스터디 : Fabrikam

                     

                  진짜가 아닙니다.

                     

                  예제로 쓰인 Kliva 앱은 MVP 두분이 수고해주셨고, GitHub를 통해 공유되는 오픈소스 프로젝트입니다.

                     

                  차례대로 보여드릴 데모입니다.

                  첫 번째 : 리스트에 아이템이 Load될 때 애니메이션 효과

                     

                  두 번째 : 당겨서 Refresh 효과

                     

                  세 번째 : Context가 이어지는 트랜지션 효과

                     

                  네 번째 : 눈에 띄는 다이나믹한 모션

                     

                     

                  첫번째 : ContainerContentChanging(CCC)

                  ListView(ActivityList)의 ContainerContentChanging 이벤트에 이벤트 핸들러를 추가합니다.

                     

                  ItemContainer의 ContentTempleteRoot를 UserControl로 캐스팅

                     

                  Compositor 맴버 변수로 선언, 애니메이션 관련 수치 정수로 선언

                     

                  VisualElement를 _compositor에 등록

                     

                  VisualElement들의 정보 캐기 : ItemsPanel, ItemsContainer, ItemIndex 등,

                  ElementCompositionPreview API를 이용해 ElementVisual을 가져온다.

                     

                  여기서 가장 중요한 점은 ContainerContentChanging 이벤트가 Visual Layer에 있다는 점이다. ItemContainer는 아주 특별한 녀석이다.

                     

                  애니메이션의 시작점의 값들을 먼저 구한다.

                     

                  원하는 KeyframeAnimation을 빡시게 만듭니다.

                     

                  다 만들었으면 앞에서 준비한 itemVisual의 각 속성에 방금 만든 KeyframeAnimation을 각각 달아줍니다.

                     

                  실행하면 짜!자!잔! Item이 Load될 때 애니메이션을 추가하였습니다.

                     

                  두번째 : Pull to refresh(PTR)

                  먼저 필요한 변수들을 선언.

                     

                  이미지 아이콘 추가.

                     

                  ListView의 Loaded 이벤트 등록.

                     

                  XAML에 있는 _scrollViewer를 찾아온다, OnActivityListLoaded 이벤트 핸들러 등록,

                  DirectManipulationStarted, DirectManipulationCompleted 이벤트 생성 및 이벤트 핸들러 등록

                     

                  ElementCompositionPreview API를 이용해 ScrollViewerManipulationSet을 가져온다.

                     

                  이미지 아이콘에 적용할 애니메이션을 작성.

                     

                  XAML에 있는 이미지 아이콘을 가져온다.

                     

                  ListView가 가지고 있는 border를 가져온다. 다 만들었으면 앞에서 준비한 _refreshIconVisual의 각 속성에 방금 만든 KeyframeAnimation을 각각 달아줍니다.

                     

                  OnActivityListUnloaded 이벤트일 때 DirectManipulationStarted, DirectManipulationCompleted 이벤트 생성 및 이벤트 핸들러 해제

                     

                  실행하면 짜!자!잔! Scroll과 연동되어 회전하는 Refresh 이미지 아이콘이 완성되었습니다.

                     

                  세번째 : Connected Animation

                  ItemClick 이벤트가 발생할 때 AthleteProfilePicture 이름을 가진 요소를 가져온다.

                     

                  ConnectedAnimationService API를 이용, 애니메이션 준비를 한다.

                     

                  Detail 뷰의 Ellipse의 Fill 속성 ImageBrush에 ImageOpened 이벤트를 추가한다.

                     

                  ImageOpened 이벤트 핸들러에 앞에서 거의 동일한 방식으로 애니메이션 준비한다. Opacity 관련 윈도우 버그가 있으니 임시로 Fix를 추가한다.

                     

                  실행해서 아이템을 선택하면 Ellipse의 프로필 이미지가 디테일 페이지의 위치로 이동하는 Connected Animation을 볼 수 있다.

                   

                  네번째 : 다이나믹한 모션

                  다음으로는 Resize되었을 때 아이템에 애니메이션을 추가해보자.

                     

                  GridView의 ContainerContentCanging(CCC) 이벤트에 이벤트 핸들러를 등록.

                     

                  Item Container를 가져와서 인스턴스를 준비한다. 이동하는 Offset 애니메이션을 만든다.

                     

                  Offset 속성으로 애니메이션을 implicitMap에 등록한다. 뷰에 implicitMap을 전달.

                     

                  실행해서 Resize를 하면 아이템의 Offset 애니메이션과 함께 재정렬됩니다.

                     

                  이어지는 데모. 첫번째 : 헤더 패널에 효과

                     

                  두번째 : 이전/이후 상태 변화를 알려주는 효과

                     

                  세번째 : 이미지에 효과, 스팟라이트

                     

                     

                     

                  해더 패널의 백그라운드 역할을 하고 있는 Rectangle를 미리 준비한 커스텀콘트롤로 변경. BlurAmount 속성에 값을 입력.

                     

                  헤더 백그라운드에 Bur 효과, 패널 아래 쪽에 Drop Shaow 효과.

                     

                  실행하면 짜잔!

                     

                  BuildBlurBrush 함수에 몇가지 더 추가.

                     

                  MainColor 추가, Muiltiply로 Blend 효과 추가.

                     

                  짜잔 메인컬러가 적용되었다.

                     

                  로그인 애니메이션으로 이거 쿨하지 않냐는 질문에 사람들이 박수로 화답.

                     

                  자! 이제부터 마지막 데모 첫번째

                  Up 스크롤에 Expression(표현식?) 을 추가합니다.

                     

                  Expression에 Clamp를 추가하여 Up 스크롤이 최댓값일 때 Tension을 추가.

                     

                  상단 해더 패널 쪽에 있는 모든 Visual Element에 지정한 값일 때 애니메이션 추가.

                     

                  Blur 효과도 추가.

                  실행하면 짜잔! 스크롤 동작에 따라 여러 효과 추가.

                     

                  자! 진짜 마지막 데모 두번째

                  사진 갤러리에 아이템 선택시 이미지 소스를 활용한 효과

                   

                  ListView의 ContainerContentChangeing이벤트에 이벤트 핸들러 등록. 이전 데모에서 한번 다뤘다. CCC라고 줄여서 부른다.

                   

                  ItemTemplate 정의 확인.

                     

                  ListView_ContainerContentChanging 이벤트 핸들러 : 자식을 찾아서 Composition Image에 담아 Lighting 효과를 준다.

                     

                  Lighting 브러쉬를 만들어서 효과를 주고 다시 브러쉬를 업데이트.

                     

                  효과가 잘 나오는지 확인.

                     

                  지금부터는 요약 정리. Visiual layer는 XAML layer에 접근해서 많은 것들을 할 수 있다.

                     

                  Visual layer : ScrollvViewer manipulation properties, implicit animation, effects

                  • 스크롤뷰어 조작 속성, 암시적인(은연중에) 애니메이션, 효과에 쓰인다. 스크롤뷰어는 하나의 예일뿐.

                       

                  XAML layer : Visual exposure, connected animation, implicit animation drivers

                  • 실제 뷰에 노출, 문맥이 이어지는 애니메이션, 암시적인 애니메이션을 운영하는 역할을 한다.

                     

                  코드 패턴. XAML에 있는 요소를 Visual 레이어로 가져와서 Animation 또는 Effect를 준다.

                     

                  사견으로 코드에서만 왕창 접근을 해서 데모를 했는데 난이도가 높다. 시간이 흘러 Behavior 처럼 XAML에서 접근 가능한 형태로도 발전해준다면 좋을 것 같습니다.

                     

                  샘플코드는 여기서 다운받으세요. https://github.com/AppCreativity/Kliva

                     

                  궁금한게 있으면 연락만해~ ㅋㅋㅋ 끝.

                  B853 What's New in Windows UI/UX for Universal Windows Platform (UWP) Apps

                  번역

                  출처: <https://channel9.msdn.com/events/Build/2016/B853>

                   

                  안녕하세요. 마이크로소프트 MVP 권영철입니다. build 2016이 끝이 났습니다. 저는 주로 UWP 앱의 UI/UX 개발과 관련된 영상을 가장 먼저 시청할 계획입니다. 아래 정리한 내용은 발표자의 발표 내용 해석이 주가 되겠지만 때로는 이해를 돕기 위해 용어 변경 및 사견이 첨언될 수 있습니다. 그리고 오역도 포함될 수 있으니 가볍게 훑어 보시는 용도로 활용하시고 좀 더 정확한 내용은 직접 시청을 하시기를 권해드립니다.

                   

                  페이스북 윈도우 앱 개발 그룹 박문찬 MVP님의 빌드정리 엑셀 문서에도 계속해서 업데이트하겠습니다. 박문찬 build 2016 UWP 동영상 링크 정리 엑셀 바로가기

                   

                  유니버설 앱 플랫폼은 다양한 디바이스들에서 작동하는 중요하고 익숙한 맞춤형 앱을 만들 수 있는 진정한 기회를 개발자들에게 제공합니다. 윈도우 10은 새로운 많은 UI/UX 기능들과 향상된 기능들을 제공합니다.

                     

                  아젠다

                  • XAML UI, 바인딩 그리고 키보드 사용성 향상

                    - XAML UI와 Visual Studio에 새롭게 추가된 기능을 포함

                  1. UI/UX : Xbox 위에서 실행되는 앱
                  2. Beautiful UX : 애니메이션, 이펙트

                     

                  데모 먼저, 슬라이드 나중

                     

                  Image 콘트롤이 gif 포멧을 드디어 지원합니다. 저는 연속된 이미지를 사용할 일이 많은데 주로 시퀀스 플레이어를 직접 만들어서 사용했었습니다. Alpha 레이어가가 필요없는 경우라면 유용하게 사용할 수 있을 것 같습니다.

                     

                  슬라이드가 안나오는 사고가 발생, 발표자 무슨 마법 부리듯 손뼉치고 도와 달라고 사정… 알고보니 별것아님…

                     

                  현재는 80개의 시스템 색상(브러쉬)이 있어서 Xaml 콘트롤과 바로 연결되어 있어 다양한 콘트롤에 통일된 색상이 자동으로 사용되었습니다.

                     

                  이번 Anniversary 업데이트 후에는 중간에 Control Specific Colors 레이어를 하나 더 두어서... (데모에서 다시 설명)

                     

                  뜬금없이 gif 이미지 자동재생을 제어할 수 있다고 삼천포로 빠진 듯 보이나

                     

                  x:Key를 유지하고 Color를 입맛에 맞게 변경하고 ResourceDictionary에 등록, 수정할 수 있습니다.

                     

                  BottomAppBar의 CommandBar의 DefaultLabelPosition 속성 : Bottom 값을

                     

                  Right 값으로 변경하면 크게 리사이즈하였을때 자동으로 Label이 우측으로 정렬되는 것을 볼 수 있습니다.

                     

                  작게 리사이즈하여 Overflow되었을 때는 닷닷닷(…) 버튼으로 변경되고 팝업(Flyout)이 됩니다.

                     

                  다시 슬라이드로 : Image 콘트롤을 MediaElement처럼 사용하는 것이 인상적입니다. Rain.Play(); 근데 저거 x:Name이 소문자 rain인데 플레이 잘되려나요?

                     

                  DynamicOverflowOrder 속성으로 Overflow되었을 때 팝업 메뉴의 순서를 지정할 수도 있습니다.

                  CommandBar의 속성

                  IsDynamicOverflowEnabled : Overflow 허용

                  DynamicOverflowItemsChanging : Overflow 발생시 변경될 값

                     

                  AppBarButton의 속성

                  IsInOverflow : 앱바버튼의 Overflow 상태 확인

                     

                  CommandBar의 속성

                  DefaultLabelPosition : Label의 기본 정렬 방법 지정

                     

                  AppBarButton의 속성

                  [Default]LabelPosition : Label의 기본 Visibility 지정

                     

                  다음은 Xbox에서 실행되는 앱

                     

                  시청거리, 게임패드 입력, 주로 거실이라는 점 등이 고려(최적화 해야)할 사항, 더 자세한 내용은 B883세션을 보세요.

                     

                  데모를 봅시다.

                     

                  마우스에서 게임패드로 바뀌는 사용자 경험을 최적화하기 위해 Focus 상태를 Highlight하기 위해 소리와 상태 변경 등을 이용해 강조합니다. 예를 들면 갤러리에서 사진을 선택 또는 취소할 때 다른 소리, 사진 Focus에 따라 움직이는 녹색 Highlight 테두리,

                     

                  TextBox 콘트롤이 Focus되었을 때 게임패드의 Menu 버튼을 눌러 Context가 이어진 DropDown 팝업(추천)이라던지, Slide 콘트롤이 Focus 되었을 때 끌어 당기는 행동 등(슬라이드에서 다시 설명)

                     

                  FocusVisual 속성들을 이용해 반드시 표현(강조)해주세요. 쉽게 변경할 수 있습니다.

                  FocusVisualMargin

                  FocusVisualPrimaryBrush : 디폴트 Red

                  FocusVisualPrimaryThickness

                  FocusVisualSecondaryBrush : 디폴트 Black

                  FocusVisualSecondaryThickness

                     

                  ElementSoundPlayer를 이용해 소리는 명시적으로 지정, 플레이할 수 있습니다.

                     

                  앞에서 Slide 콘트롤에서 이야기했던 끌어 당기는 액션(Engagement)를 위한 새로운 API,

                     

                  게임패드 스틱을 이용한 탐색(Navigation) 액션을 위한 새로운 API,

                   

                  데모에는 없었지만… 팝업인데 Overlay 모드로 "Smoke" 시각적인 어포던스(단서) 제공? 연기처럼 사라지는 팝업으로 추정… 정확히 모르겠습니다.

                     

                  추가로 UI/Framework 향상된 점들 데모

                     

                  Context Flyout(마우스우클릭시 팝업메뉴)을 추가하는 방법, 물론 Xbox에서는 마우스우클릭이 없습니다. (슬라이드에서 다시 설명)

                     

                  AccesKey 속성을 이용해 키보드 숏컷을 추가하는 방법(슬라이드에서 다시 설명)

                     

                  킹왕짱 바인딩 문법을 보여주다가 문법 오류에 빠지면서 아재 또 멘붕… 긴장 많이 하신 듯

                     

                  Context Flyout(콘텍스트 메뉴) : 사용자 액션이 다를뿐 마우스, 터치, 게임패드 모두 동작합니다.

                     

                  Keyboard Mnemonics(키보드 숏컷) : 단축키를 이용할 때 시각적인 단서를 보여줄 수 있다. 필수는 아님. ToolTip 콘트롤을 이용함.

                  새로운 이벤트 : 이 둘은 짝이다.(항상 함께)

                  AccessKeyDisplayDismissed

                  AccessKeyDisplayRequested

                     

                  Compiled Binding 기능의 향상된 점

                     

                  새로운 기능을 사용하려면 Min version을 반드시 확인하세요.

                     

                  한마디로 스피커 왈 : 슈퍼 파워풀 스텁(Super Powerfull Stuff)…

                  함수 바인딩,

                  딕셔너리 지원,

                  형 변환

                  다양한 바인딩 기법도 좋지만… 뭐든 다되는 것도 좋지만은 않다고 생각합니다만… 무분별하게 허용하다 보면 결국엔 뒤죽박죽되기 마련… 개발자 스스로 기준을 세워서 최소한으로 사용하는 것이… 선택 장애올지도…

                     

                  애니메이션, 이펙트

                     

                  UI 프레임워크 레이어 구성은 이렇습니다. 여기서 주목할 부분은 Visual layer.

                     

                  데모 : 이펙트와 애니메이션

                     

                  Win2D.uwp를 참조합니다.

                     

                  Flyout 메뉴 3가지의 백그라운드를 Gaussian Blur 이펙트를 주는 방법을 보여줍니다. 최근에 많은 곳에서 볼 수 있습니다. 유행이죠.

                  ContextMenu,

                  TagFlyout,

                  EditTitleFlyout, 3가지는 Opened 이벤트일 때

                  추가로 SlideShowFlipView 는 SizeChanged 이벤트일 때

                  모두 앞 예제들에서 휙휙 지나쳤던 것들입니다. 그땐 아무 효과가 없었다는 것뿐.

                     

                  원리는 blurredVisual 브러쉬를 만들어서 Rectangle의 Fill 속성을 채워주고 적당한 위치의 grid를 찾아서 Insert 해주는 것.

                     

                  짜잔!

                   

                  짜자잔!!

                     

                  이건 Rectangle의 위치가 좀 삐구난 듯… 더 상위 grid를 잡아야 할 듯

                     

                  이어서 GridView의 아이템들이 이동할 때 Duration을 가지고 Transition되도록 코드를 추가합니다.

                     

                  좀 더 자세한 내용은 B818을 참고하세요. 현재 B853 끝나면 연결해서 봐야겠습니다.

                     

                  또 다른 주목할 만한 UI/UX 기능 들에는

                     

                  TreeView : Edge 브라우저 즐겨찾기. 이전 Edge 브라우저 즐겨찾기는 TreeView가 아니고 매번 Refesh되는 형태입니다. GitHub를 통해 샘플코드를 제공합니다.

                  매 단계마다 열고/닫기,

                  드래그앤 드랍,

                  접근성을 지원합니다.

                     

                  ComboBox : IsTextSearchEnabled 속성 활성화로 사용자가 일부 글자만 타이핑 했을 때 연관되는 아이템으로 이동할 수 있습니다.

                     

                  Windows ink 키노트 세션에서 소개되었습니다. 관련 아이디어가 있는 개발자에겐 대단한 기능이 될 것같네요.

                  Ink Canvas,

                  Ink Toolbar,

                  Ruler : 잉크 캔버스, 잉크 툴바, 자에 마이크로소프트가 엄청 공을 들였나봅니다.

                     

                  MediaPlayerElement의 새로운 기능들

                     

                  ItemsStackPanel : ItemsUpdatingScrollMode 속성을 이용해 아이템 추가시 간단히 자동으로 스크롤을 하단으로 이동시킬 수 있는 기능인 것 같네요.

                     

                  새로운 API 및 기능들…

                     

                  끝.