언어: HTML | XAML

빠른 시작: 보조 타일 고정(XAML)

Applies to Windows and Windows Phone

참고  C#/VB/C++를 사용하지 않는 경우 빠른 시작: 보조 타일 고정(HTML)을 참조하세요.

이 항목에서는 앱의 보조 타일을 만들고 시작 화면에 고정하는 단계를 안내합니다.

사전 요구 사항

이 항목을 이해하기 위해 필요한 사항은 다음과 같습니다.

  • 보조 타일 용어와 개념에 대한 기본 지식. 자세한 내용은 보조 타일 개요를 참조하세요.
  • Windows 런타임 API를 사용하여 C# 또는 C++로 기본 Windows 스토어 앱을 만들 수 있는 능력. 자세한 내용은 C# 또는 Visual Basic을 사용하여 첫 Windows 스토어 앱 만들기를 참조하세요.
  • Microsoft Visual Basic을 사용하여 XAML(Extensible Application Markup Language) 기반 Windows 스토어 앱의 코드 숨김을 만드는 방법에 대한 이해.

중요  전체 샘플에서 사용된 이 항목의 코드를 보려면 보조 타일 샘플을 참조하세요. 샘플은 JavaScript, C#, C++ 및 Visual Basic 버전으로 제공됩니다.

지침

1. 옵션: 네임스페이스 추가

코드를 단순화하기 위해 이 빠른 시작의 나머지 부분에 있는 코드(또는 사용자 버전)가 포함된 프로젝트의 .cs 파일에 다음 줄을 추가합니다. 이 항목의 모든 코드는 이 줄을 추가했다고 가정하며, 그렇지 않을 경우 컴파일되지 않습니다. Windows.UI.StartScreen에는 보조 타일 개체가 포함되어 있고 Windows.UI.Xaml.Controls는 앱 바와 단추에 사용됩니다.



using Windows.UI.StartScreen;
using Windows.UI.Xaml.Controls;

2. 고정/고정 해제 단추가 있는 앱 바 추가

Windows에서는 일반적으로 앱 바의 시작 화면에 고정 단추를 통해 사용자에게 고정 기회를 제공합니다. 앱 바를 만드는 방법에 대한 자세한 내용은 빠른 시작: 앱 바 추가를 참조하세요.

  • Applies to Windows Phone

Windows Phone에서는 일반적으로 앱 바의 단추가 아니라 상황에 맞는 메뉴를 통해 고정합니다.

Windows에서 사용자가 고정/고정 해제 단추를 선택하면 사용자에게 확인을 요청하는 플라이아웃이 나타납니다. 플라이아웃이 표시되는 동안 앱 바가 해제되지 않게 하려면 IsSticky 속성을 True로 설정합니다.

이 코드는 이 항목의 나머지 코드가 코드 숨김으로 사용되는 프로젝트의 .xaml 페이지에 추가됩니다.



<Page.BottomAppBar>
    <CommandBar x:Name="SecondaryTileCommandBar" Padding="10,0,10,0" IsSticky="True" IsOpen="True">
        <AppBarButton x:Name="PinUnPinCommandButton" Icon="Pin" Label="Pin" />
    </CommandBar>
</Page.BottomAppBar>

3. 보조 타일에 고유 ID 제공



public const string appbarTileId = "MySecondaryTile";

4. 단추를 고정 또는 고정 해제로 설정하는 함수 만들기

고정 단추의 동작은 보조 타일 고정과 고정 해제를 전환합니다. 이 예제에서는 다른 앱과 일관된 모양을 위해 시스템 제공 아이콘을 사용하여 단추를 적절하게 설정하는 함수를 만듭니다. 이 함수는 앱 바를 열 때마다 및 성공적인 고정/고정 해제 작업 후 즉시 앱 초기화 코드의 일부로 호출됩니다.



private void ToggleAppBarButton(bool showPinButton)
{
    if (showPinButton)
    {
        this.PinUnPinCommandButton.Label = "Pin to Start";
        this.PinUnPinCommandButton.Icon = new SymbolIcon(Symbol.Pin);
    }
    else
    {
        this.PinUnPinCommandButton.Label = "Unpin from Start";
        this.PinUnPinCommandButton.Icon = new SymbolIcon(Symbol.UnPin);
    }

    this.PinUnPinCommandButton.UpdateLayout();
}

5. 적절한 단추 표시 및 단추 click 처리기 할당

이 예제에서는 앱 초기화의 일부로 마지막 단계의 ToggleAppBarButton 함수를 사용하여 보조 타일이 이미 고정되었는지 확인하고 그에 따라 단추 텍스트를 설정합니다.

그런 다음 고정 단추의 click 이벤트에 pinToAppBar_Click 처리기를 할당합니다. 다음 단계에서는 이벤트 처리기를 구현하는 방법을 살펴보겠습니다.

이 단계의 코드는 사용자가 수행해야 하는 다른 초기화 작업과 함께 앱을 시작할 때마다 앱 초기화 코드의 일부로 호출됩니다.



void Init()
{
    ToggleAppBarButton(!SecondaryTile.Exists(MainPage.appbarTileId));
    this.PinUnPinCommandButton.Click += this.pinToAppBar_Click;
}

6. 단추의 이벤트 처리기에서 보조 타일 만들기 및 고정

이 예제에서는 고정 단추의 click 이벤트 처리기에서 호출될 수 있는 단일 함수를 구현합니다. 이 함수는 고정 요청을 초래하는 여러 단계를 수집합니다.

  • 보조 타일 생성에 필요한 속성 값 할당
  • 보조 타일 개체 만들기
  • 보조 타일의 추가 속성 지정
  • 확인 플라이아웃을 표시하는 데 사용되는 화면 좌표 가져오기(Windows만 해당)

보조 타일의 일부 속성을 먼저 설정해야 타일을 고정할 수 있습니다. 이러한 속성을 하나 이상 포함하지 않고 보조 타일을 고정하려고 하면 실패합니다. 필수 속성은 다음과 같습니다.

  • 타일의 고유 ID
  • 짧은 이름(Windows 8.0만 해당)
  • 표시 이름
  • 보조 타일을 활성화할 때 부모 응용 프로그램에 전달되는 인수 문자열
  • 로고 이미지
  • 타일 옵션(Windows 8.0만 해당)

이 샘플은 보조 타일이 시작 화면에 고정된 시간을 예제 인수 문자열로 전달합니다.

  • Applies to Windows Phone

Windows Phone 8.1에서는 표시 이름이 중간 크기(150x150) 보조 타일에 표시되지 않습니다. 또한 모든 휴대폰 타일은 처음에 중간 크기 타일로 고정되므로 휴대폰에서 newTileDesiredSize 매개 변수가 무시됩니다.

참고  기존 보조 타일의 ID와 동일한 ID를 제공하면 기존 보조 타일을 덮어씁니다.



string displayName = "Secondary tile pinned through app bar";
string tileActivationArguments = MainPage.appbarTileId + " was pinned at=" + DateTime.Now.ToLocalTime().ToString();
Uri square150x150Logo = new Windows.Foundation.Uri("ms-appx:///Assets/square150x150Tile-sdk.png");
TileSize newTileDesiredSize = TileSize.Square150x150;

다음에는 보조 타일 개체를 만듭니다. 이 생성자 버전에서는 중간 크기 타일을 만듭니다. 보조 타일이 알림을 받는 경우 모든 타일 크기를 선언하는 것이 좋습니다. SecondaryTileVisualElements 클래스를 통해 로고 이미지를 제공하면 됩니다.



SecondaryTile secondaryTile = new SecondaryTile(MainPage.appbarTileId, 
                                                displayName, 
                                                tileActivationArguments,
                                                square150x150Logo, 
                                                TileSize.Square150x150);

이제 보조 타일 개체가 있으므로 생성자를 통해 설정되지 않은 보조 타일 속성을 지정할 수 있습니다. 이 예제에서는 전경 텍스트 색과 작은 로고를 지정하고 표시 이름이 타일에 나타나도록 지정합니다.

  • Applies to Windows Phone

Windows Phone 8.1에서는 작은 로고와 표시 이름이 중간 크기(150x150) 보조 타일에 표시되지 않으며 전경 텍스트 색을 지정할 수도 없으므로 이 예제에서 설정한 속성이 휴대폰에서 무시됩니다.



secondaryTile.VisualElements.ShowNameOnSquare150x150Logo = true;                       
secondaryTile.VisualElements.ForegroundText = ForegroundText.Dark;                        
secondaryTile.VisualElements.Square30x30Logo = new Uri("ms-appx:///images/square30x30Tile-sdk.png");

Windows에서는 보조 타일이 고정되기 전에 사용자가 확인해야 합니다. 사용자는 확인 대화 상자에서 타일의 표시 이름을 재정의하고 다양한 타일 크기 중에서 고정할 크기를 선택할 수 있습니다. 확인 플라이아웃은 고정 요청을 호출한 단추 근처에 표시되어야 합니다. 이 예제에서는 고정 단추("발신자")의 경계 사각형을 검색하고 확인 대화 상자가 단추 위에 표시되도록 지정합니다.

  • Applies to Windows Phone

Windows Phone 8.1에서는 사용자에게 확인 대화 상자가 표시되지 않습니다. 타일이 표시 이름 없이 중간 크기 타일로 시작 화면에 고정됩니다. 여기에 표시된 코드는 무시됩니다.



Windows.Foundation.Rect rect = MainPage.GetElementRect((FrameworkElement)sender);
Windows.UI.Popups.Placement placement = Windows.UI.Popups.Placement.Above;

그런 다음 함수가 보조 타일이 고정되도록 요청합니다.

  • Windows Phone 8.1에서는 이 호출을 통해 타일을 고정하고 앱을 일시 중단하며 사용자를 시작 화면으로 이동합니다.
  • Windows에서는 이 호출을 통해 사용자에게 타일을 고정할 수 있는 권한을 요청하는 확인 플라이아웃을 표시합니다. 이 예제에서는 고정 단추의 경계 사각형을 사용하여 확인 플라이아웃을 해당 좌표 위에 표시합니다. 사용자가 승인하면 Windows에서 보조 타일을 만들고 시작 화면에 배치합니다. 사용자는 앱에 그대로 있습니다.


bool isPinned = await secondaryTile.RequestCreateForSelectionAsync(rect, placement);

  • Applies to Windows Phone

Windows Phone 8.1에서는 RequestCreateAsync 또는 RequestCreateForSelectionAsync 호출을 통해 앱을 종료하고 사용자를 시작 화면으로 이동합니다. 이 때문에 RequestCreateAsync 또는 RequestCreateForSelectionAsync 호출 뒤에 있는 코드는 실행되지 않습니다. 따라서 Windows Phone 8.1 프로젝트에서는 앱이 종료되기 전에 앱 상태 저장 등의 필요한 작업을 수행할 수 있도록 Suspending 이벤트를 수신 대기해야 합니다.

보조 타일이 이미 고정된 경우 고정 단추는 고정 해제 단추가 되며 단추의 클릭 이벤트 처리기에서 타일을 고정 해제합니다. 이 예제에서는 처리기가 타일을 고정 해제하기 위해 비동기적으로 호출하는 코드를 제공합니다. 앞에서 설명했듯이, 이 호출은 실제로 시작 화면에서 타일을 고정 해제하는 대신 확인 대화 상자를 생성합니다. 사용자가 승인하면 Windows가 시작 화면에서 보조 타일을 제거합니다.

참고  시작 화면 앱 바에서 보조 타일을 제거할 수도 있습니다. 이 방법으로 고정 해제할 수 있으며, 이 경우 고정 해제 기능을 구현하거나 고정 해제 단추를 제공할 필요가 없습니다.



SecondaryTile secondaryTile = new SecondaryTile(MainPage.appbarTileId);
bool isUnpinned = await secondaryTile.RequestDeleteForSelectionAsync(rect, placement);

마지막으로, 플라이아웃을 해제할 수 있도록 앱 바의 IsSticky 속성을 false로 되돌립니다.



rootPage.BottomAppBar.IsSticky = false;

전체 pinToAppBar_Click 이벤트 처리기는 다음과 같습니다. 이 처리기는 고정 및 고정 해제 작업 후에 ToggleAppBarButton을 호출합니다. 작업이 실패하면 단추가 전환되지 않습니다.



async void pinToAppBar_Click(object sender, RoutedEventArgs e)
{
#if WINDOWS_APP
    this.SecondaryTileCommandBar.IsSticky = true;
#endif
    
    if (SecondaryTile.Exists(MainPage.appbarTileId))
    {
        // Unpin
        SecondaryTile secondaryTile = new SecondaryTile(MainPage.appbarTileId);
    
        Windows.Foundation.Rect rect = MainPage.GetElementRect((FrameworkElement)sender);
        Windows.UI.Popups.Placement placement = Windows.UI.Popups.Placement.Above;
        
        bool isUnpinned = await secondaryTile.RequestDeleteForSelectionAsync(rect, placement);
    
        ToggleAppBarButton(isUnpinned);
    }
    else
    {
        // Pin
        Uri square150x150Logo = new Uri("ms-appx:///Assets/square150x150Tile-sdk.png");
        string tileActivationArguments = MainPage.appbarTileId + " was pinned at = " + DateTime.Now.ToLocalTime().ToString();
        string displayName = "Secondary tile pinned through app bar";
    
        TileSize newTileDesiredSize = TileSize.Square150x150;
    
        SecondaryTile secondaryTile = new SecondaryTile(MainPage.appbarTileId,
                                                        displayName, 
                                                        tileActivationArguments,
                                                        square150x150Logo,
                                                        newTileDesiredSize);
    
        Uri square30x30Logo = new Uri("ms-appx:///images/square30x30Tile-sdk.png");
        secondaryTile.VisualElements.Square30x30Logo = new Uri("ms-appx:///images/square30x30Tile-sdk.png");
        secondaryTile.VisualElements.ShowNameOnSquare150x150Logo = true;
        secondaryTile.VisualElements.ForegroundText = ForegroundText.Dark;
    
        Windows.Foundation.Rect rect = MainPage.GetElementRect((FrameworkElement)sender);
        Windows.UI.Popups.Placement placement = Windows.UI.Popups.Placement.Above;

#if WINDOWS_APP
        bool isPinned = await secondaryTile.RequestCreateForSelectionAsync(rect, placement);

        ToggleAppBarButton(!isPinned);
#endif

#if WINDOWS_PHONE_APP
       await secondaryTile.RequestCreateAsync();
#endif
    }

#if WINDOWS_APP
    this.BottomAppBar.IsSticky = false;
#endif
}

요약 및 다음 단계

이 빠른 시작에서는 사용자가 보조 타일을 고정하거나 고정 해제할 수 있는 앱 바의 단추를 정의했습니다. 보조 타일을 만들고, 많은 속성을 정의하고, 사용자에게 확인 대화 상자를 표시했습니다. 사용자가 승인하면 보조 타일이 시작 화면에 최종적으로 추가됩니다.

보조 타일이 고정되면 부모 앱 타일은 보조 타일과 통신할 수 있도록 채널 URI(Uniform Resource Identifier)를 만듭니다. 자세한 내용은 빠른 시작: 보조 타일에 알림 보내기를 참조하세요.

관련 항목

보조 타일 샘플
보조 타일 개요
빠른 시작: 보조 타일에 알림 보내기
보조 타일에 대한 지침 및 검사 목록
SecondaryTile class

 

 

표시:
© 2014 Microsoft