1. MetroStyle app development

원문(Metro Revealed - Build Windows 8 apps with XAML and C# )의 내맘대로 정리임

아직 국내에는 메트로스타일앱에 대한 적당한 책을 발견하지 못하여 원서를 하나 선정하여 내 맘대로 의역하여 정리해보았다. 잘못된 내용이 있을 수 있음. ㅋㅋ.

================================================================

시작한다~

메트로앱은 윈도우8에서 아주 중요한 기능중 하나인데 데스크탑, 태블릿, 스마트폰간에 동일한 상호작용을 제공한다. 메트로앱은 이전 윈도우앱과는 완전히 다른 경험을 제공한다.

이전윈도우앱과 차별되며 완전히 새로운 API들, 새로운 control들, 그리고 완전히 다른 애플리케이션라이프사이클을 제공한다.

메트로스타일앱은 몇가지 개발언어로 개발이 가능한데, JavaScript, VisualBasic, C++그리고 C#이다. 기존에 개발에 사용되던 XAML과 C#으로 풍부한 메트로앱을 개발하고 광범위한 윈도우플랫폼상에서 통합가능하다. 

설명을 위해 데모앱을 만들것인데 아래와 같은 실행화면을 가진다.

프로젝트시작은 File -> New Project 하여 프로젝트팝업에서 'Visual C# form the Templates'섹션을 선택, 그리고 'Blank Application'을 선택한다. 프로젝트명을 MetroGrocer로 하고 OK버튼을 눌러서 프로젝트를 만든다. VisualStudio는 몇가지 형태의 템플릿을 지원하며 기본적인 코드를 생성하여 프로젝트를 만들어준다.

만들어진 프로젝트의 솔루션탐색기는 위와 같다. App.xaml과 App.xaml.cs는 메트로앱을 시작하는데 사용된다. 다음 코드를 보면 StandardStyles.xaml파일을 Common폴더로부터 참조하도록 되어있는것을 볼 수 있다.

App.xaml

<Application  x:Class="MetroGrocer.App"  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  xmlns:local="using:MetroGrocer">

  <Application.Resources>

    <ResourceDictionary>

       <ResourceDictionary.MergedDictionaries>

       <ResourceDictionary Source="Common/StandardStyles.xaml"/>

      </ResourceDictionary.MergedDictionaries>

    </ResourceDictionary>

  </Application.Resources>

</Application> 

App.xaml.cs

using Windows.ApplicationModel; 

using Windows.ApplicationModel.Activation;

using Windows.UI.Xaml; 

using Windows.UI.Xaml.Controls;

namespace MetroGrocer {  

sealed partial class App : Application {

 public App() {

      this.InitializeComponent();

      this.Suspending += OnSuspending;

    }

    protected override void OnLaunched(LaunchActivatedEventArgs args) {

      if (args.PreviousExecutionState == ApplicationExecutionState.Terminated) {

        //TODO: Load state from previously suspended application

      }

      // Create a Frame to act navigation context and navigate to the first page

   var rootFrame = new Frame();   rootFrame.Navigate(typeof(BlankPage));

   // Place the frame in the current Window and ensure that it is active

   Window.Current.Content = rootFrame;

   Window.Current.Activate();

    }

    void OnSuspending(object sender, SuspendingEventArgs e) {

      //TODO: Save application state and stop any background activity

    }

  } 

}

메트로앱은 자체 생명주기모델을 가지고있으며 App.xaml.cs에서 처리된다. OnLaunched에서 앱이 시작될때의 처리를, OnSuspending은 앱이 백그라운드로모드로 전환될때 호출된다. 더 자세한 사항은 생명주기를 설명할때 하도록 하겠다.

BlankPage.xaml파일이 처음에 표시되는 화면의 디자인을 결정짓는 파일이다.

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

  <Grid Background="{StaticResource ApplicationPageBackgroundBrush}">

  </Grid>

 </Page>

Grid가 하나로 표현된 빈 페이지에 백그라운드속성에 ApplicationPageBackgroundBrush로 설정되어 있다.

그리고 다음은 BlankPage.xaml.cs의 내용은 다음과 같다.

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Navigation;

namespace MetroGrocer {

  public sealed partial class BlankPage : Page {

    public BlankPage() {

      this.InitializeComponent();

    }

    protected override void OnNavigatedTo(NavigationEventArgs e) {

    }

  }

}

StandardStyles.xaml 파일

common폴더는 VS project template들이 담겨져 있다. 여기서는 App.xml에서 참조하는 스타일들을 모두 정의한 StandardStyles.xaml이 있다. 여기에는 메트로앱스타일의 룩앤필을 제공하는 다양한 스타일들이 정의되어 있다.

…

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

    BasedOn="{StaticResource BaselineTextStyle}">

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

  <Setter Property="FontWeight" Value="Light"/>

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

  <Setter Property="RenderTransform">

    <Setter.Value>

      <TranslateTransform X="-2" Y="8"/>

    </Setter.Value>

  </Setter>

</Style> …

Package.appminifest파일

애플리케이션 메니페이스파일이다. 메트로앱에 대한 다양한 정보들을 기술한다. xml파일이매 VS에서 쉽게 편집이 가능하도록 편집화면을 제공한다. 나중에 더 자세히 설명할게요!