다음을 통해 공유

등급 컨트롤

  • 아티클

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

평점 컨트롤의 예

개요

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

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

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

처음 평균 평점 상태

처음 평균 평점 상태

설정 후 사용자 평점 표현

설정 후 사용자 평점 표현

읽기 전용 평점 모드

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

읽기 전용의 긴 목록

UWP 및 WinUI 2

Important

이 문서의 정보 및 예제는 Windows 앱 SDK 및 WinUI 3를 사용하는 앱에 최적화되어 있지만 WinUI 2를 사용하는 UWP 앱에도 대체로 적용 가능합니다. 플랫폼별 정보 및 예제는 UWP API 참조를 확인하세요.

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

UWP 앱을 위한 RatingControl은 WinUI 2의 일부로 포함됩니다. 설치 지침을 비롯한 자세한 내용은 WinUI 2를 참조하세요. 이 컨트롤용 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 시나리오를 위한 세밀한 크기 조정
  • 연속 값 채우기 및 평점
  • 간격 사용자 지정
  • 성장 애니메이션 비활성화
  • 별 수 사용자 지정

샘플 코드 가져오기