빠른 시작: 메시지 대화 상자 디자인(HTML)

아티클
03/04/2016

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

이 빠른 시작에서는 메시지 대화 상자 디자인 및 구현에 관한 지침을 제공합니다.메시지 대화 상자 추가에서 설명한 대로, 메시지 대화 상자는 앱에서 가로 길이 전체에 걸쳐 나타나며 대화 상자의 내용에 따라 가로로 크기가 조정됩니다. 대화 상자에는 제목, 메시지 및 최대 3개의 단추를 추가할 수 있습니다.

사전 요구 사항

단계

샘플 코드는 사용자에게 인터넷 연결을 찾을 수 없음을 알리고 사용자의 응답을 요구하는 메시지 대화 상자를 표시합니다. 이 빠른 시작의 코드 대부분은 메시지 대화 상자 샘플에 있습니다.

1. 대화 상자 내용을 만듭니다.


        // Create the message dialog and set its content
        var msg = new Windows.UI.Popups.MessageDialog(
            "No internet connection has been found.");

2. 단추를 추가합니다.

        // Add commands and set their command handlers
        msg.commands.append(new Windows.UI.Popups.UICommand(
            "Try again", 
            commandInvokedHandler));
        msg.commands.append(
            new Windows.UI.Popups.UICommand("Close", commandInvokedHandler));

        // Set the command that will be invoked by default
        msg.defaultCommandIndex = 0;

        // Set the command to be invoked when escape is pressed
        msg.cancelCommandIndex = 1;

3. 대화 상자를 표시합니다.

        // Show the message dialog
        msg.showAsync();

4. 원하는 경우 여러 모달 UI를 처리합니다.

경우에 따라 메시지 대화 상자에서 파일 선택기를 여는 것처럼 대화 상자에서 다른 모달 UI를 실행할 수 있습니다. Windows에서는 원래 대화 상자의 명령 처리기 내부에서 추가 모달 UI를 실행하는 것이 허용되지 않습니다.

대신 비동기 작업의 완료된 처리기 내부에서 두 번째 UI를 실행해야 합니다. 대화 상자가 사라지고 비동기 작업의 결과가 제공되면 완료된 처리기가 실행됩니다. 따라서 원래 UI에서 사용자가 어떤 명령을 클릭했는지를 여전히 알 수 있습니다.


        var result = await msg.ShowAsync();

        if (result.Label == "Buy")
        {
            await this.YourCustomFLow(result);
        }
 
        private async Task YourCustomFlow(IUICommand command)
        {
            // Your code here.
        }

요약

이 빠른 시작에서는 메시지 대화 상자 디자인 및 구현에 대한 지침을 제공했습니다.