評価コントロール

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

概要

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

プレースホルダー値を含む編集可能な評価

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

初期平均評価状態

設定後のユーザー評価の表現

読み取り専用評価モード

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

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 ギャラリー アプリには、ほとんどの 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 シナリオ向けのコンパクトなサイズ設定
• 連続値の塗りつぶしと評価
• 間隔のカスタマイズ
• 拡大アニメーションを無効にする
• 星の数のカスタマイズ

サンプル コードの入手

• WinUI ギャラリー サンプル - すべての XAML コントロールを対話形式で参照できます。