등급 컨트롤

  • 아티클

평점 컨트롤은 사용자가 콘텐츠 및 서비스에 대한 만족도를 반영하는 평점을 확인 및 설정할 수 있도록 해줍니다. 사용자는 터치, 펜, 마우스, 게임 패드 또는 키보드에서 평점 컨트롤을 사용할 수 있습니다. 다음 지침은 평점 컨트롤의 기능을 사용하여 유연성과 사용자 지정을 제공하는 방법을 보여줍니다.

Example of Rating Control

개요

등급 컨트롤을 사용하여 등급을 입력하거나 읽기 전용으로 만들어 등급을 표시할 수 있습니다.

자리 표시자 값이 있는 편집 가능한 평점

평점 컨트롤을 사용하는 가장 일반적인 방법은 사용자가 자체 평점 값을 입력하게 하면서 평균 평점을 표시하는 것입니다. 이 시나리오에서 평점 컨트롤은 처음에는 특정 서비스나 콘텐츠 유형(음악, 비디오, 책 등)의 모든 사용자의 평균 만족 평점을 나타내도록 설정됩니다. 사용자가 개별적으로 항목 평점을 매기기 위해 컨트롤을 조작할 때까지 이 상태로 남아 있습니다. 이러한 조작을 통해 평점의 상태가 사용자의 개인 만족 평점을 나타내도록 변경됩니다.

처음 평균 평점 상태

Initial Average Rating State

설정 후 사용자 평점 표현

Representation of User Rating Once Set

읽기 전용 평점 모드

댓글 목록과 해당 평점을 표시할 때나 권장 콘텐츠에 표시되는 때와 같이 보조 콘텐츠의 평점을 표시해야 하는 경우가 있습니다. 이 경우에는 사용자가 평점을 편집할 수 없어야 하므로 컨트롤을 읽기 전용으로 설정할 수 있습니다. UI 설계와 성능의 이유로 매우 큰 가상화된 콘텐츠 목록에 사용될 때 읽기 전용 모드로 평점 컨트롤을 사용하는 것이 좋습니다.

Read-Only Long List

UWP 및 WinUI 2

Important

이 문서의 정보 및 예제는 Windows 앱 SDK 및 WinUI 3를 사용하는 앱에 최적화되어 있지만 일반적으로 WinUI 2를 사용하는 UWP 앱에 적용할 수 있습니다. 플랫폼별 정보 및 예제는 UWP API 참조를 확인하세요.

이 섹션에는 UWP 또는 WinUI 2 앱에서 컨트롤을 사용하는 데 필요한 정보가 있습니다.

UWP 앱용 RatingControl 컨트롤은 Windows UI 라이브러리 2의 일부로 포함됩니다. 설치 지침을 비롯한 자세한 내용은 Windows UI 라이브러리를 참조하세요. 이 컨트롤용 API는 Windows.UI.Xaml.Controls 및 Microsoft.UI.Xaml.Controls 네임스페이스에 모두 존재합니다.

최신 WinUI 2를 사용하여 모든 컨트롤에 대한 최신 스타일, 템플릿 및 기능을 가져오는 것이 좋습니다.

이 문서의 코드를 WinUI 2와 함께 사용하려면 XAML의 별칭(여기서는 muxc 사용)을 사용하여 프로젝트에 포함된 Windows UI 라이브러리 API를 표현합니다. 자세한 내용은 WinUI 2 시작을 참조하세요.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:RatingControl />

등급 컨트롤 만들기

WinUI 3 갤러리 앱을 열고 작동 중인 RatingControl을 확인합니다.

WinUI 3 갤러리 앱에는 대부분의 WinUI 3 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. Microsoft Store에서 앱을 다운로드하거나 GitHub에서 소스 코드를 가져오세요.

편집 가능한 등급 컨트롤

이 코드는 자리 표시자 값을 사용하여 편집 가능한 등급 컨트롤을 만드는 방법을 설명합니다.

<RatingControl x:Name="MyRating" ValueChanged="RatingChanged"/>

private void RatingChanged(RatingControl sender, object args)
{
    if (sender.Value == null)
    {
        MyRating.Caption = "(" + SomeWebService.HowManyPreviousRatings() + ")";
    }
    else
    {
        MyRating.Caption = "Your rating";
    }
}

읽기 전용 등급 컨트롤

이 코드는 읽기 전용 등급 컨트롤을 만드는 방법을 설명합니다.

<RatingControl IsReadOnly="True"/>

추가 기능

평점 컨트롤에는 사용할 수 있는 추가 기능이 많습니다. 이러한 기능 사용에 대한 자세한 내용은 참조 설명서에 나와 있습니다. 다음은 일부 추가 기능의 목록입니다.

  • 뛰어난 긴 목록 성능
  • 공간이 협소한 UI 시나리오를 위한 세밀한 크기 조정
  • 연속 값 채우기 및 평점
  • 간격 사용자 지정
  • 성장 애니메이션 비활성화
  • 별 수 사용자 지정

샘플 코드 가져오기