C#, XAML 및 Prism으로 작성한 Windows 스토어 앱에 대한 연장된 시작 화면 빠른 시작

상위 섹션: C#, XAML 및 Windows 런타임용 Prism으로 작성한 Windows 스토어 비즈니스 앱 개발

Patterns & Practices 로고

이전 페이지 | 다음 페이지

Windows 런타임용 Prism을 사용하여 Windows에서 표시되는 시작 화면을 모방하는 연장된 시작 화면을 표시하는 방법을 알아봅니다. 연장된 시작 화면은 연장된 기간 동안 화면에 유지되고, 앱이 초기 UI를 준비하는 데 시간이 더 필요할 때 표시되어야 하는 시작 화면입니다.

다운로드

샘플 다운로드
Prism StoreApps 라이브러리 다운로드

배울 내용

적용 대상

  • Windows 8.1용 Windows 런타임
  • C#
  • XAML(Extensible Application Markup Language)

빠른 시작 빌드 및 실행

표준 프로젝트를 빌드하는 방식으로 빠른 시작을 빌드합니다.

  1. Microsoft Visual Studio 메뉴 모음에서 빌드 > 솔루션 빌드를 선택합니다.
  2. 프로젝트를 빌드한 후에는 배포해야 합니다. 메뉴 모음에서 빌드 > 솔루션 배포를 선택합니다. Visual Studio는 디버거에서 앱을 실행할 때도 프로젝트를 배포합니다.
  3. 프로젝트를 배포한 후 빠른 시작 타일을 선택하여 앱을 실행합니다. 또는 Visual Studio의 메뉴 모음에서 디버그 > 디버깅 시작을 선택합니다.

앱이 실행되면 다음 다이어그램과 같이 앱의 연장된 시작 화면이 표시됩니다.

연장된 시작 화면 빠른 시작

이 빠른 시작은 Windows 런타임용 Prism을 사용하여 Windows에서 표시되는 시작 화면을 모방하는 연장된 시작 화면을 표시하는 방법을 보여 줍니다. 앱에서 UI를 준비하거나 네트워크 데이터를 로드하는 데 더 많은 시간이 필요한 경우 연장된 시작 화면을 사용하여 앱이 이러한 작업을 완료할 때 사용자에게 메시지를 표시할 수 있습니다.

연장된 초기 화면에 대한 자세한 내용은 시작 화면을 연장하는 방법시작 화면에 대한 지침을 참조하세요.

[맨 위로]

솔루션 구조

ExtendedSplashScreen Visual Studio 솔루션에는 ExtendedSplashScreenQuickstart와 Microsoft.Practices.Prism.StoreApps의 두 가지 프로젝트가 포함되어 있습니다. ExtendedSplashScreenQuickstart 프로젝트에서는 Visual Studio 솔루션 폴더를 사용하여 소스 코드를 다음과 같은 논리적 범주로 구성합니다.

  • Assets 폴더에는 시작 화면과 로고 이미지가 들어 있습니다.
  • Common 폴더에는 응용 프로그램 개발을 단순화하기 위해 Visual Studio에서 제공하는 클래스가 들어 있습니다.
  • DataModels 폴더에는 앱에 사용된 샘플 데이터가 들어 있습니다.
  • Views 폴더에는 앱 페이지의 UI를 구성하는 보기가 들어 있습니다.

Microsoft.Practices.Prism.StoreApps 라이브러리에는 이 빠른 시작에 사용된 재사용 가능 클래스가 들어 있습니다. 이 라이브러리에 대한 자세한 내용은 Windows 런타임용 Prism 참조를 참조하세요. 이 빠른 시작의 클래스 대부분은 거의 수정하지 않거나 전혀 수정하지 않고 다른 앱에서 다시 사용할 수 있습니다. 이 빠른 시작에서 제공하는 구성 및 아이디어를 적용할 수도 있습니다.

[맨 위로]

빠른 시작의 주요 클래스

MvvmAppBase 클래스는 Prism 앱의 핵심 시작 동작을 제공하며 해당 생성자가 앱의 진입점이 됩니다. App 클래스는 앱별 시작 동작을 앱에 추가합니다.

ExtendedSplashScreen 클래스는 Microsoft Windows에서 표시되는 시작 화면을 모방하는 연장된 시작 화면을 정의합니다.

[맨 위로]

연장된 시작 화면 만들기

연장된 시작 화면은 단순히 연장된 기간 동안 화면에 유지되는 초기 화면입니다. 다음 코드 예제와 같이 Page 클래스에서 파생되는 클래스를 만들어 정의할 수 있습니다.

ExtendedSplashScreenQuickstart\ExtendedSplashScreen.xaml


<Page ...>
    <Canvas Background="#1d1d1d">
        <!-- The real position of these controls will change during runtime -->
        <Image Stretch="None" x:Name="splashImage" Source="Assets/SplashScreen.png" Canvas.Left="350" Canvas.Top="250"/>
        <ProgressRing x:Name="progressRing" Height="50" Width="50" IsActive="True" Canvas.Left="650" Canvas.Top="550"/>
    </Canvas>
</Page>

연장된 시작 화면에는 Image 컨트롤이 Canvas 컨트롤의 자식으로 포함되어야 합니다. Canvas에는 연장된 시작 화면에 사용되는 이미지가 표시됩니다. 이미지 자체는 620x300 픽셀의 해상도여야 합니다. ProgressRing 컨트롤은 앱이 크래시되지 않았으며 곧 사용 준비가 완료될 것임을 사용자에게 알리는 데 사용됩니다. 이렇게 하면 긍정적인 로드 환경을 만들 수 있습니다.

참고  연장된 시작 화면에 Windows 시작 화면과 동일한 배경색과 이미지를 사용해야 합니다. 이렇게 하면 Windows 시작 화면에서 연장된 시작 화면으로 매끄럽게 전환되는 데 도움이 됩니다.

[맨 위로]

연장된 시작 화면에 대한 크기 조정 및 이미지 열림 이벤트에 응답

예를 들어 사용자가 장치 방향을 변경하는 경우 창 크기가 변경될 때마다 연장된 시작 화면에서 이미지 좌표를 조정해야 합니다. 이렇게 하면 사용자가 장치를 조작하거나 화면에서 앱의 레이아웃을 변경하는 방식과 관계없이 매끄러운 로드 환경을 제공할 수 있습니다.

Windows에서 시작 화면 이미지를 배치하는 곳과 동일한 화면 좌표에 연장된 시작 화면 이미지를 배치하려면 SplashScreen 인스턴스를 ExtendedSplashScreen 클래스에 전달해야 합니다. SplashScreen 인스턴스는 해당 생성자를 통해 클래스에 전달됩니다.

ExtendedSplashScreenQuickstart\ExtendedSplashScreen.xaml.cs


public ExtendedSplashScreen(SplashScreen splashScreen)
{
    this.splashScreen = splashScreen;

    this.InitializeComponent();
    
    this.SizeChanged += ExtendedSplashScreen_SizeChanged;
    this.splashImage.ImageOpened += splashImage_ImageOpened;
}


생성자는 두 이벤트에 대한 이벤트 처리기를 등록합니다. 창의 SizeChanged 이벤트에 대한 이벤트 처리기는 연장된 시작 화면이 올바른 위치와 크기로 표시되도록 합니다. Image 컨트롤의 ImageOpened 이벤트에 대한 이벤트 처리기는 Windows에서 표시되는 시작 화면이 연장된 시작 화면으로 전환될 때 깜박임을 방지하는 데 사용됩니다. 이렇게 하려면 연장된 시작 화면을 표시할 준비가 될 때까지 창을 활성화하지 마세요. 각 이벤트 처리기는 다음 코드 예제와 같이 ExtendedSplashScreen 클래스의 Resize 메서드를 호출합니다.

ExtendedSplashScreenQuickstart\ExtendedSplashScreen.xaml.cs


private void Resize()
{
    if (this.splashScreen == null) return;

    // The splash image's not always perfectly centered. Therefore we need to set our image's position 
    // to match the original one to obtain a clean transition between both splash screens.

    this.splashImage.Height = this.splashScreen.ImageLocation.Height;
    this.splashImage.Width = this.splashScreen.ImageLocation.Width;

    this.splashImage.SetValue(Canvas.TopProperty, this.splashScreen.ImageLocation.Top);
    this.splashImage.SetValue(Canvas.LeftProperty, this.splashScreen.ImageLocation.Left);

    this.progressRing.SetValue(Canvas.TopProperty, this.splashScreen.ImageLocation.Top + this.splashScreen.ImageLocation.Height  + 50);
    this.progressRing.SetValue(Canvas.LeftProperty, this.splashScreen.ImageLocation.Left + this.splashScreen.ImageLocation.Width / 2 - this.progressRing.Width / 2);
}


Resize 메서드는 Windows에서 표시되는 시작 화면 이미지의 좌표에 따라 해당 값을 업데이트하여 연장된 시작 화면에서 컨트롤을 올바른 위치와 크기로 표시하는 데 사용됩니다.

[맨 위로]

연장된 시작 화면 표시 및 추가 로드 작업 시작

Windows 런타임용 PrismMvvmAppBase 클래스의 ExtendedSplashScreenFactory 속성을 정의합니다. MvvmAppBase 클래스는 앱을 시작하는 동안 이 속성을 확인하고, 정의된 경우 연장된 시작 화면을 표시합니다. 따라서 앱의 연장된 시작 화면을 반환하는 대리자로 속성을 설정해야 합니다. 이 빠른 시작에서는 이 작업이 App의 생성자에서 수행됩니다.

ExtendedSplashScreenQuickstart\App.xaml.cs


this.ExtendedSplashScreenFactory = (splashscreen) => new ExtendedSplashScreen(splashscreen);


앱이 시작되면 시스템은 앱의 시작 활성화 이벤트 처리기에 시작 화면 정보를 전달합니다. 이 정보를 사용하여 Windows에서 표시되는 시작 화면 이미지 위에 연장된 시작 화면 페이지의 이미지를 올바르게 배치해야 합니다. Windows 런타임용 Prism을 사용하는 앱에서 앱의 시작 활성화 이벤트 처리기는 MvvmAppBase 클래스의 OnLaunched 메서드입니다. 이 메서드는 다시 시작 활성화 이벤트 인수를 전달하여 동일한 클래스의 InitializeFrameAsync 메서드를 호출합니다.

Microsoft.Practices.Prism.StoreApps\MvvmAppBase.cs


rootFrame = new Frame();

if (ExtendedSplashScreenFactory != null)
{
    Page extendedSplashScreen = this.ExtendedSplashScreenFactory.Invoke(args.SplashScreen);
    rootFrame.Content = extendedSplashScreen;
}


InitializeFrameAsync 메서드 내부에서 ExtendedSplashScreenFactory 속성이 정의된 경우 팩터리는 초기화를 더 진행하기 전에 연장된 시작 화면 페이지를 만들고 표시를 위해 Frame에 배치합니다. 이 방법을 사용하면 탐색 작업을 수행하지 않고 연장된 시작 화면을 표시할 수 있으므로 앱의 탐색 기록에 포함되지 않습니다.

프레임 초기화가 완료되면 OnLaunched 메서드는 App 클래스의 OnLaunchApplication 메서드를 호출합니다.

ExtendedSplashScreenQuickstart\App.xaml.cs


protected override async Task OnLaunchApplication(LaunchActivatedEventArgs args)
{
    if (args.PreviousExecutionState != ApplicationExecutionState.Running)
    {
        // Here we would load the application's resources.
        await this.LoadAppResources();
    }

    this.NavigationService.Navigate("GroupedItems", null);
}


App 클래스의 OnLaunchApplication 메서드는 앱별 시작 동작을 앱에 추가합니다. 앱이 활성화되는 경우 LoadAppResource 메서드가 호출됩니다. 이 메서드는 7초 지연 후 완료되는 Task를 만들어 리소스의 비동기 로드를 시뮬레이트합니다. Task가 완료되면 GroupedItemsPage가 탐색됩니다.

앱이 시작되는 방법 및 MvvmAppBase 클래스와 App 클래스 간의 조작에 대한 자세한 내용은 MVVM Windows 스토어 앱 빠른 시작의 부트스트래핑을 참조하세요.

[맨 위로]

 

 

표시:
© 2015 Microsoft