syncfusion-wpf-rating

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion WPF Rating

实现Syncfusion WPF评分控件

The SfRating control for WPF provides a visual star-based rating system that allows users to rate items. It supports configurable precision modes, extensive appearance customization, tooltips, and read-only display. Use this control for rating movies, applications, products, services, or any scenario requiring user feedback through a rating interface.

SfRating控件为WPF提供了一个可视化的星级评分系统，允许用户为项目评分。它支持可配置的精度模式、丰富的外观自定义、工具提示以及只读显示功能。可将此控件用于电影、应用、产品、服务的评分，或任何需要通过评分界面收集用户反馈的场景。

When to Use This Skill

何时使用此技能

Use this skill when user need to:

Implement star-based rating controls in WPF applications
Create product or service rating interfaces
Build review systems with visual rating feedback
Display read-only ratings (e.g., average ratings, historical ratings)
Configure rating precision (full stars, half stars, or exact values)
Customize rating appearance (colors, sizes, spacing, hover effects)
Add tooltips to show rating values
Handle rating value changes with ValueChanged events
Integrate rating controls with data binding scenarios

当用户需要以下功能时使用此技能：

在WPF应用中实现星级评分控件
创建产品或服务的评分界面
构建带可视化评分反馈的评论系统
展示只读评分（例如平均评分、历史评分）
配置评分精度（整星、半星或精确值）
自定义评分外观（颜色、大小、间距、悬停效果）
添加工具提示以显示评分数值
通过ValueChanged事件处理评分值变更
将评分控件与数据绑定场景集成

Component Overview

组件概述

SfRating provides:

Configurable number of rating items (typically 5 stars)
Three precision modes: Standard (full), Half (0.5 increments), Exact (any value)
Extensive styling options (fill colors, stroke colors, sizes, spacing)
Tooltip support with customizable precision and appearance
Read-only mode for displaying non-editable ratings
ValueChanged event for handling rating updates
Theme support (via SfSkinManager)

SfRating提供：

可配置的评分项数量（通常为5颗星）
三种精度模式：Standard（整星）、Half（半星，0.5增量）、Exact（精确值）
丰富的样式选项（填充颜色、描边颜色、大小、间距）
支持自定义精度和外观的工具提示
用于展示不可编辑评分的只读模式
用于处理评分更新的ValueChanged事件
主题支持（通过SfSkinManager）

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Assembly deployment and NuGet package installation
Adding SfRating control via designer, XAML, or C#
Setting ItemsCount and Value properties
Basic configuration and ValueChanged event
Methods overview (Dispose, template methods, event handlers)
Theme configuration

📄 阅读： references/getting-started.md

程序集部署与NuGet包安装
通过设计器、XAML或C#添加SfRating控件
设置ItemsCount和Value属性
基本配置与ValueChanged事件
方法概述（Dispose、模板方法、事件处理程序）
主题配置

Precision Modes

精度模式

📄 Read: references/precision.md

Understanding precision modes (Standard, Half, Exact)
Configuring rating accuracy levels
Use cases for each precision type
Code examples and visual comparisons

📄 阅读： references/precision.md

理解精度模式（Standard、Half、Exact）
配置评分精度级别
各精度类型的适用场景
代码示例与视觉对比

Appearance and Styling

外观与样式

📄 Read: references/appearance-styling.md

Customizing fill colors (rated/unrated items)
Setting stroke colors and thickness
Configuring mouse hover effects
Adjusting item heights, sizes, and spacing
Setting corner radius for rating items
Using ItemContainerStyle for consistent styling
PreviewValue property for hover feedback

📄 阅读： references/appearance-styling.md

自定义填充颜色（已评分/未评分项）
设置描边颜色与粗细
配置鼠标悬停效果
调整评分项的高度、大小与间距
设置评分项的圆角半径
使用ItemContainerStyle实现统一样式
用于悬停反馈的PreviewValue属性

Tooltip Configuration

工具提示配置

📄 Read: references/tooltip.md

Enabling/disabling tooltips
Configuring tooltip precision (decimal places)
Customizing tooltip foreground color
Tooltip behavior and best practices

📄 阅读： references/tooltip.md

启用/禁用工具提示
配置工具提示精度（小数位数）
自定义工具提示前景色
工具提示行为与最佳实践

Read-Only Mode

只读模式

📄 Read: references/readonly-configuration.md

Setting IsReadOnly property
Use cases for non-editable ratings
Combining read-only with styling options

📄 阅读： references/readonly-configuration.md

设置IsReadOnly属性
不可编辑评分的适用场景
结合只读模式与样式选项

Quick Start Example

快速入门示例

Basic Rating Control (XAML)

基础评分控件（XAML）

xml

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        <syncfusion:SfRating ItemsCount="5" 
                             Value="3" 
                             Width="150"/>
    </Grid>
</Window>

xml

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        <syncfusion:SfRating ItemsCount="5" 
                             Value="3" 
                             Width="150"/>
    </Grid>
</Window>

Basic Rating Control (C#)

基础评分控件（C#）

csharp

using Syncfusion.Windows.Controls.Input;

namespace RatingApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            
            SfRating rating = new SfRating()
            {
                ItemsCount = 5,
                Value = 3,
                Width = 150
            };
            
            this.Content = rating;
        }
    }
}

csharp

using Syncfusion.Windows.Controls.Input;

namespace RatingApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            
            SfRating rating = new SfRating()
            {
                ItemsCount = 5,
                Value = 3,
                Width = 150
            };
            
            this.Content = rating;
        }
    }
}

Common Patterns

常见模式

1. Rating with ValueChanged Event

1. 带ValueChanged事件的评分控件

xml

<syncfusion:SfRating ItemsCount="5" 
                     Value="3" 
                     Width="150"
                     ValueChanged="SfRating_ValueChanged"/>

csharp

private void SfRating_ValueChanged(object sender, ValueChangedEventArgs e)
{
    double oldValue = e.OldValue;
    double newValue = e.NewValue;
    MessageBox.Show($"Rating changed from {oldValue} to {newValue}");
}

xml

<syncfusion:SfRating ItemsCount="5" 
                     Value="3" 
                     Width="150"
                     ValueChanged="SfRating_ValueChanged"/>

csharp

private void SfRating_ValueChanged(object sender, ValueChangedEventArgs e)
{
    double oldValue = e.OldValue;
    double newValue = e.NewValue;
    MessageBox.Show($"Rating changed from {oldValue} to {newValue}");
}

2. Half Precision Rating

2. 半星精度评分

xml

<syncfusion:SfRating ItemsCount="5" 
                     Precision="Half" 
                     Value="3.5" 
                     Width="150"/>

xml

<syncfusion:SfRating ItemsCount="5" 
                     Precision="Half" 
                     Value="3.5" 
                     Width="150"/>

3. Custom Styled Rating

3. 自定义样式评分

xml

<syncfusion:SfRating ItemsCount="5" Value="4" Width="150">
    <syncfusion:SfRating.ItemContainerStyle>
        <Style TargetType="syncfusion:SfRatingItem">
            <Setter Property="RatedFill" Value="Gold"/>
            <Setter Property="UnratedFill" Value="LightGray"/>
            <Setter Property="RatedStroke" Value="Orange"/>
            <Setter Property="RatedStrokeThickness" Value="2"/>
        </Style>
    </syncfusion:SfRating.ItemContainerStyle>
</syncfusion:SfRating>

xml

<syncfusion:SfRating ItemsCount="5" Value="4" Width="150">
    <syncfusion:SfRating.ItemContainerStyle>
        <Style TargetType="syncfusion:SfRatingItem">
            <Setter Property="RatedFill" Value="Gold"/>
            <Setter Property="UnratedFill" Value="LightGray"/>
            <Setter Property="RatedStroke" Value="Orange"/>
            <Setter Property="RatedStrokeThickness" Value="2"/>
        </Style>
    </syncfusion:SfRating.ItemContainerStyle>
</syncfusion:SfRating>

4. Read-Only Rating Display

4. 只读评分显示

xml

<syncfusion:SfRating ItemsCount="5" 
                     Value="4.5" 
                     Precision="Half"
                     IsReadOnly="True" 
                     Width="150"/>

xml

<syncfusion:SfRating ItemsCount="5" 
                     Value="4.5" 
                     Precision="Half"
                     IsReadOnly="True" 
                     Width="150"/>

5. Rating with Custom Size and Spacing

5. 自定义大小与间距的评分

xml

<syncfusion:SfRating ItemsCount="5" 
                     Value="3" 
                     ItemSize="30"
                     ItemsSpacing="10"
                     Width="200"/>

xml

<syncfusion:SfRating ItemsCount="5" 
                     Value="3" 
                     ItemSize="30"
                     ItemsSpacing="10"
                     Width="200"/>

6. Rating with Tooltip Configuration

6. 配置工具提示的评分

xml

<syncfusion:SfRating ItemsCount="5" 
                     Value="3" 
                     Precision="Exact"
                     ShowToolTip="True"
                     AutoToolTipPrecision="2"
                     ToolTipForeground="DarkBlue"
                     Width="150"/>

xml

<syncfusion:SfRating ItemsCount="5" 
                     Value="3" 
                     Precision="Exact"
                     ShowToolTip="True"
                     AutoToolTipPrecision="2"
                     ToolTipForeground="DarkBlue"
                     Width="150"/>

Key Properties

关键属性

Property	Type	Description
`ItemsCount`	int	Number of rating items to display (e.g., 5 stars)
`Value`	double	Current rating value (0 to ItemsCount)
`Precision`	Precision	Rating accuracy: Standard, Half, or Exact
`IsReadOnly`	bool	Makes rating non-editable when true
`ShowToolTip`	bool	Shows/hides tooltip on hover (default: true)
`AutoToolTipPrecision`	int	Decimal places in tooltip (default: 1)
`ItemSize`	double	Size of each rating item (default: 20)
`ItemsSpacing`	double	Space between items (default: 4)
`CornerRadius`	CornerRadius	Corner radius for rating items
`PreviewValue`	double	Read-only preview value on hover

属性	类型	描述
`ItemsCount`	int	要显示的评分项数量（例如5颗星）
`Value`	double	当前评分值（0到ItemsCount之间）
`Precision`	Precision	评分精度：Standard、Half或Exact
`IsReadOnly`	bool	设置为true时，评分变为不可编辑
`ShowToolTip`	bool	控制悬停时是否显示工具提示（默认：true）
`AutoToolTipPrecision`	int	工具提示中的小数位数（默认：1）
`ItemSize`	double	每个评分项的大小（默认：20）
`ItemsSpacing`	double	评分项之间的间距（默认：4）
`CornerRadius`	CornerRadius	评分项的圆角半径
`PreviewValue`	double	悬停时的只读预览值

Styling Properties (via ItemContainerStyle)

样式属性（通过ItemContainerStyle）

Property	Description
`RatedFill`	Fill color for selected/rated items
`UnratedFill`	Fill color for unselected items
`RatedStroke`	Stroke color for rated items
`UnratedStroke`	Stroke color for unrated items
`RatedStrokeThickness`	Stroke thickness for rated items
`UnratedStrokeThickness`	Stroke thickness for unrated items
`PointerOverFill`	Fill color on mouse hover
`PointerOverStroke`	Stroke color on mouse hover
`PointerOverStrokeThickness`	Stroke thickness on hover
`Height`	Individual item height

属性	描述
`RatedFill`	已选中/已评分项的填充颜色
`UnratedFill`	未选中项的填充颜色
`RatedStroke`	已评分项的描边颜色
`UnratedStroke`	未评分项的描边颜色
`RatedStrokeThickness`	已评分项的描边粗细
`UnratedStrokeThickness`	未评分项的描边粗细
`PointerOverFill`	鼠标悬停时的填充颜色
`PointerOverStroke`	鼠标悬停时的描边颜色
`PointerOverStrokeThickness`	悬停时的描边粗细
`Height`	单个评分项的高度

Common Use Cases

常见使用场景

Product Reviews - Display and collect product ratings in e-commerce applications
Service Feedback - Gather user satisfaction ratings for services
Movie/Content Ratings - Show and allow rating of media content
Performance Evaluations - Visual rating scales for assessments
Survey Responses - Rating scale questions in surveys
Dashboard Metrics - Display KPI or quality scores as visual ratings
User Profiles - Show user reputation or skill level ratings
Comparison Tools - Visual comparison of rated items

产品评论 - 在电商应用中展示和收集产品评分
服务反馈 - 收集用户对服务的满意度评分
影视/内容评分 - 展示并允许对媒体内容进行评分
绩效评估 - 用于评估的可视化评分量表
调查回复 - 调查中的评分量表问题
仪表板指标 - 将KPI或质量分数展示为可视化评分
用户资料 - 展示用户的信誉或技能水平评分
对比工具 - 可视化对比已评分的项目

Best Practices

最佳实践

Use Standard precision for simple 1-5 star ratings
Use Half precision for more granular feedback (0.5 increments)
Use Exact precision when binding to calculated values or allowing precise input
Set IsReadOnly="True" when displaying average or historical ratings
Customize RatedFill to match your application's brand colors
Use ShowToolTip to provide numeric feedback alongside visual stars
Set appropriate ItemSize and ItemsSpacing for your UI layout
Handle ValueChanged event for immediate feedback or data binding updates
Consider using Precision="Half" with IsReadOnly="True" for displaying decimal averages

对于简单的1-5星评分，使用Standard精度
对于更精细的反馈（0.5增量），使用Half精度
当绑定到计算值或允许精确输入时，使用Exact精度
展示平均评分或历史评分时，设置IsReadOnly="True"
自定义RatedFill以匹配应用的品牌颜色
使用ShowToolTip在可视化星级旁提供数值反馈
根据UI布局设置合适的ItemSize和ItemsSpacing
处理ValueChanged事件以实现即时反馈或数据绑定更新
展示小数平均值时，可结合使用Precision="Half"与IsReadOnly="True"

Assembly Requirements

程序集要求

Required assemblies:

```
Syncfusion.SfInput.WPF
```
```
Syncfusion.SfShared.WPF
```

NuGet package:

Syncfusion.SfInput.WPF

所需程序集：

```
Syncfusion.SfInput.WPF
```
```
Syncfusion.SfShared.WPF
```

NuGet包：

Syncfusion.SfInput.WPF

syncfusion-wpf-rating

Original

Translation

Implementing Syncfusion WPF Rating

实现Syncfusion WPF评分控件

When to Use This Skill

何时使用此技能

Component Overview

组件概述

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

Precision Modes

精度模式

Appearance and Styling

外观与样式

Tooltip Configuration

工具提示配置

Read-Only Mode

只读模式

Quick Start Example

快速入门示例

Basic Rating Control (XAML)

基础评分控件（XAML）

Basic Rating Control (C#)

基础评分控件（C#）

Common Patterns

常见模式

1. Rating with ValueChanged Event

1. 带ValueChanged事件的评分控件

2. Half Precision Rating

2. 半星精度评分

3. Custom Styled Rating

3. 自定义样式评分

4. Read-Only Rating Display

4. 只读评分显示

5. Rating with Custom Size and Spacing

5. 自定义大小与间距的评分

6. Rating with Tooltip Configuration

6. 配置工具提示的评分

Key Properties

关键属性

Styling Properties (via ItemContainerStyle)

样式属性（通过ItemContainerStyle）

Common Use Cases

常见使用场景

Best Practices

最佳实践

Assembly Requirements

程序集要求

Related Components

相关组件