評分控制項

  • 發行項

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

Example of Rating Control

概觀

評等控件可用來輸入評等，或進行唯讀以顯示評等。

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

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

初始平均評分狀態

Initial Average Rating State

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

Representation of User Rating Once Set

唯讀評分模式

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

Read-Only Long List

UWP 和 WinUI 2

重要

本文中的資訊和範例已針對使用 Windows 應用程式 SDK 和 WinUI 3 的應用程式進行優化，但通常適用於使用 WinUI 2 的 UWP 應用程式。 如需平臺特定資訊和範例，請參閱 UWP API 參考。

本節包含您在 UWP 或 WinUI 2 應用程式中使用控件所需的資訊。

UWP app 的 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 案例
  • 連續值填寫和評分
  • 間距自訂
  • 停用成長動畫
  • 自訂星星數

取得範例程式碼