다음을 통해 공유

팝업 항목 표시

  • 아티클

경고를 표시하거나, 사용자에게 선택을 요청하거나, 프롬프트를 표시하는 것이 일반적인 UI 작업입니다. Xamarin.Forms에는 팝업을 Page 통해 사용자와 상호 작용하기 위한 세 가지 DisplayAlertDisplayActionSheetDisplayPromptAsync메서드가 클래스에 있습니다. 이 두 가지 항목은 각 플랫폼에 적절한 네이티브 컨트롤을 사용하여 렌더링됩니다.

경고 표시

지원되는 모든 Xamarin.Forms플랫폼에는 사용자에게 경고하거나 간단한 질문을 할 수 있는 모달 팝업이 있습니다. 이러한 경고를 Xamarin.Forms표시하려면 모든 Page에서 메서드를 DisplayAlert 사용합니다. 다음 코드 줄은 사용자에게 표시되는 간단한 메시지입니다.

await DisplayAlert ("Alert", "You have been alerted", "OK");

iOS 및 Android에서 하나의 단추가 있는 경고 대화 상자

이 예제에서는 사용자로부터 정보를 수집하지 않습니다. 경고는 모달 형식으로 표시되고 해제되면 사용자는 애플리케이션과 상호 작용을 계속합니다.

DisplayAlert 메서드는 또한 두 개의 단추를 표시하고 boolean을 반환하여 사용자의 응답을 캡처하는 데 사용할 수 있습니다. 경고에서 응답을 가져오려면 두 단추 모두에 텍스트를 적용하고 메서드를 await합니다. 사용자가 옵션 중 하나를 선택한 후 대답이 사용자 코드로 반환됩니다. 아래 샘플 코드의 async 및 await 키워드를 참고하세요.

async void OnAlertYesNoClicked (object sender, EventArgs e)
{
  bool answer = await DisplayAlert ("Question?", "Would you like to play a game", "Yes", "No");
  Debug.WriteLine ("Answer: " + answer);
}

두 개의 단추가 있는 경고 대화 상자

또한 이 DisplayAlert 메서드에는 경고 내에서 UI 요소가 흐르는 방향을 지정하는 인수를 허용하는 FlowDirection 오버로드가 있습니다. 흐름 방향에 대한 자세한 내용은 오른쪽에서 왼쪽 지역화를 참조 하세요.

Warning

기본적으로 UWP에서는 경고가 표시되는 경우 경고 뒤에 있는 페이지에 정의된 액세스 키를 계속 활성화할 수 있습니다. 자세한 내용은 Windows의 VisualElement 액세스 키를 참조 하세요.

사용자에게 작업 안내

UIActionSheet는 iOS의 일반적인 UI 요소입니다. 이 Xamarin.FormsDisplayActionSheet 메서드를 사용하면 플랫폼 간 앱에 이 컨트롤을 포함할 수 있으며 Android 및 UWP에서 네이티브 대안을 렌더링할 수 있습니다.

작업 시트를 표시하려면 Page에서 DisplayActionSheet를 await하여 메시지 및 단추 레이블을 문자열로 전달합니다. 메서드는 사용자가 클릭한 단추의 문자열 레이블을 반환합니다. 다음은 간단한 예제입니다.

async void OnActionSheetSimpleClicked (object sender, EventArgs e)
{
  string action = await DisplayActionSheet ("ActionSheet: Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
  Debug.WriteLine ("Action: " + action);
}

iOS 및 Android의 ActionSheet 대화 상자

단추는 destroy iOS의 다른 단추와 다르게 렌더링되며 세 번째 문자열 매개 변수로 왼쪽 null 또는 지정할 수 있습니다. 다음 예제에서는 destroy 단추를 사용합니다.

async void OnActionSheetCancelDeleteClicked (object sender, EventArgs e)
{
  string action = await DisplayActionSheet ("ActionSheet: SavePhoto?", "Cancel", "Delete", "Photo Roll", "Email");
  Debug.WriteLine ("Action: " + action);
}

iOS 및 Android에서 삭제 단추가 있는 ActionSheet 대화 상자

또한 이 DisplayActionSheet 메서드에는 작업 시트 내에서 UI 요소가 흐르는 방향을 지정하는 인수를 허용하는 FlowDirection 오버로드가 있습니다. 흐름 방향에 대한 자세한 내용은 오른쪽에서 왼쪽 지역화를 참조 하세요.

프롬프트 표시

프롬프트를 표시하려면 제목 및 메시지를 인수로 string 전달하는 모든 메시지를 호출 DisplayPromptAsyncPage합니다.

string result = await DisplayPromptAsync("Question 1", "What's your name?");

프롬프트가 모듈식으로 표시됩니다.

iOS 및 Android의 모달 프롬프트 스크린샷

확인 단추를 탭하면 입력한 응답이 .로 string반환됩니다. 취소 단추를 탭 null 하면 반환됩니다.

메서드의 DisplayPromptAsync 전체 인수 목록은 다음과 같습니다.

  • title형식 string은 프롬프트에 표시할 제목입니다.
  • message형식 string은 프롬프트에 표시할 메시지입니다.
  • accept형식 string의 는 수락 단추의 텍스트입니다. 기본값이 OK인 선택적 인수입니다.
  • cancel의 형식 string은 취소 단추의 텍스트입니다. 기본값이 Cancel인 선택적 인수입니다.
  • placeholder형식 string은 프롬프트에 표시할 자리 표시자 텍스트입니다. 기본값이 .인 선택적 인수입니다 null.
  • maxLength형식 int의 는 사용자 응답의 최대 길이입니다. 기본값이 -1인 선택적 인수입니다.
  • keyboard형식 Keyboard의 는 사용자 응답에 사용할 키보드 유형입니다. 기본값이 .인 선택적 인수입니다 Keyboard.Default.
  • initialValue형식 string은 표시되고 편집할 수 있는 미리 정의된 응답입니다. 기본값이 비어 string있는 선택적 인수입니다.

다음 예제에서는 선택적 인수 중 일부를 설정하는 방법을 보여줍니다.

string result = await DisplayPromptAsync("Question 2", "What's 5 + 5?", initialValue: "10", maxLength: 2, keyboard: Keyboard.Numeric);

이 코드는 미리 정의된 응답 10을 표시하고, 입력할 수 있는 문자 수를 2로 제한하고, 사용자 입력을 위한 숫자 키보드를 표시합니다.

iOS 및 Android의 선택적 모달 프롬프트 스크린샷

Warning

기본적으로 UWP에서는 프롬프트가 표시되는 경우 프롬프트 뒤에 있는 페이지에 정의된 액세스 키를 계속 활성화할 수 있습니다. 자세한 내용은 Windows의 VisualElement 액세스 키를 참조 하세요.