評分控制項

  • 發行項

評分控制項可讓使用者檢視並設定反映其對內容與服務滿意度的評分。 使用者可以使用觸控、手寫筆、滑鼠、遊戲控制器或鍵盤來與評分控制項互動。 下列指導方針示範如何使用評分控制項的功能來提供彈性和自訂。

Example of Rating Control

概觀

評分控制項可用來輸入評分，或設為唯讀來顯示評分。

有預留位置值的可編輯評分

評分控制項最常見的使用方式或許是顯示平均評分，但仍允許使用者輸入他們自己的評分值。 在此案例中，評分控制項一開始已設定為反映對特定服務或內容類型 (例如音樂、影片、書籍等) 的平均滿意度評分。 在使用者為了對某個項目個別評分而與控制項互動之前，控制項都會保持在此狀態。 這個互動會變更評分控制項的狀態，以反映使用者的個人滿意度評分。

初始平均評分狀態

Initial Average Rating State

使用者評分一旦設定後的表示方式

Representation of User Rating Once Set

唯讀評分模式

您有時需要顯示次要內容的評分，例如在推薦內容中顯示，或在顯示意見清單及其對應評分時顯示。 在此情況下，不可允許使用者編輯評分，這樣您才能讓控制項變成唯讀。 同時考量 UI 設計與效能而在非常大型虛擬化清單中使用評分控制項時，唯讀模式也是此控制項的建議使用方式。

Read-Only Long List

UWP 和 WinUI 2

重要

本文中的資訊和範例針對使用 Windows App 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 案例
  • 連續值填寫和評分
  • 間距自訂
  • 停用成長動畫
  • 自訂星星數

取得範例程式碼