評価コントロール

  • [アーティクル]

評価コントロールでは、ユーザーが評価の確認と設定を行うことができます。評価には、コンテンツやサービスに関する満足度が反映されます。 ユーザーは、タッチ、ペン、マウス、ゲームパッド、またはキーボードを使用して評価コントロールを操作できます。 次のガイダンスでは、評価コントロールの機能を使用して、柔軟性とカスタマイズを提供する方法を示します。

評価コントロールの例

概要

評価コントロールを使用して評価を入力するか、読み取り専用にして評価を表示できます。

編集可能な評価とプレースホルダーの値

おそらく、最も一般的な評価コントロールの使用方法は、平均評価値を表示した状態で、ユーザーが自分の評価値を入力できるようにすることです。 このシナリオでは、評価コントロールは最初、特定のサービスまたは特定の種類のコンテンツ (音楽、ビデオ、書籍など) のユーザー全員の平均満足度を反映するように設定されています。 ユーザーが個別に項目を評価する目的でコントロールを操作するまで、この状態は変わりません。 この操作によって、評価コントロールの状態が変化して、ユーザー個人の満足度評価が反映されます。

初期の平均評価値状態

初期の平均評価値状態

ユーザー評価が設定された後の表示

ユーザー評価が設定された後の表示

読み取り専用評価モード

お勧めのコンテンツに表示されているコンテンツの評価を表示する場合や、コメントの一覧とそれに対応する評価を表示する場合など、セカンダリ コンテンツの評価の表示が必要な場合があります。 この場合、ユーザーは評価を編集できてはならないため、コントロールを読み取り専用にします。 また、読み取り専用モードは、UI 設計とパフォーマンスの両方の理由から、仮想化された大きなコンテンツ一覧で評価コントロールを使用する場合にも推奨されています。

読み取り専用の長い一覧

UWP と WinUI 2

重要

この記事の情報と例は、Windows アプリ SDKと WinUI 3 を使用するアプリ向けに最適化されていますが、一般に WinUI 2 を使用する UWP アプリに適用されます。 プラットフォーム固有の情報と例については、UWP API リファレンスを参照してください。

このセクションには、UWP または WinUI 2 アプリでコントロールを使用するために必要な情報が含まれています。

UWP アプリの RatingControl は、Windows UI ライブラリ 2 の一部として含まれています。 インストール手順などについて詳しくは、「Windows UI Library (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 シナリオにおけるコンパクト サイズでの表示
  • 継続的な値の入力と評価
  • 間隔カスタマイズ
  • 増加アニメーションの無効化
  • 星の数のカスタマイズ

サンプル コードの入手