Widok ocen

Zestaw narzędzi .NET MAUI Community Toolkit RatingView jest ItemTemplate zaprojektowany, aby zapewnić deweloperom elastyczny i dostosowywalny mechanizm oceny, podobny do tych używanych na popularnych platformach recenzji i opinii.

Składnia

Uwzględnianie przestrzeni nazw XAML

Aby móc używać zestawu narzędzi XAML, należy dodać następujące xmlns do swojej strony lub widoku:

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Zatem następujące:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

Zostanie zmodyfikowana w celu uwzględnienia xmlns w następujący sposób:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

Korzystanie z widoku RatingView

Poniższy przykład pokazuje, jak utworzyć RatingView.

<ContentPage
	x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
	xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
	<VerticalStackLayout>
		<toolkit:RatingView
			EmptyShapeColor="White"
			FillColor="Blue"
			FillOption ="Shape"
			IsReadOnly="False"
			ShapePadding="3,7,7,3"
			ShapeDiameter="37"
			MaximumRating="5"
			Rating="4.5"
			Shape="Star"
			ShapeBorderColor="Red"
			ShapeBorderThickness="1"
			Spacing="3" />
	</VerticalStackLayout>
</ContentPage>

Równoważny kod języka C# to:

using CommunityToolkit.Maui.Views;

partial class MyPage : ContentPage
{
	public MyPage()
	{
		RatingView ratingView = new()
		{
			EmptyShapeColor = Colors.White,
			FillColor = Colors.Blue,
			FillOption = RatingViewFillOption.Shape,
			IsReadOnly = false,
			ShapePadding = new Thickness(3,7,7,3),
			ShapeDiameter = 37,
			MaximumRating = 5,
			Rating = 4.5,
			Shape = RatingViewShape.Star,
			ShapeBorderColor = Colors.Red,
			ShapeBorderThickness = 1,
			Spacing = 3,
		};

		Content = ratingView;
	}
}

Właściwości

Nieruchomość / Majątek	Typ	Opis
CustomShapePath	string	Pobiera lub ustawia ścieżkę SVG dla niestandardowego kształtu widoku klasyfikacji. Jest to właściwość powiązywalna.
EmptyShapeColor	Color	Pobiera lub ustawia kolor zastosowany do nieupełnionego (pustego) kształtu klasyfikacji. Wartość domyślna to Transparent. Jest to właściwość powiązywalna.
FillColor	Color	Pobiera lub ustawia kolor wypełnienia użytego do wyświetlenia bieżącej oceny. Ustaw FillOption, aby zastosować ten kolor do RatingViewFillOption.Background lub RatingViewFillOption.Shape. Wartość domyślna to Żółty. Jest to właściwość powiązywalna.
IsReadOnly	bool	Pobiera, czy ten układ jest w trybie tylko do odczytu. Wartość domyślna to false. Jest to właściwość powiązywalna.
Kształt	RatingViewShape	Pobiera lub ustawia kształt elementu klasyfikacji. Właściwość jest typu RatingViewShape i jest wyliczeniem. Wartość domyślna to Star. Jest to właściwość powiązywalna.
ŚrednicaKształtu	double	Pobiera lub ustawia średnicę kształtu w punktach. Wartość domyślna to 20.
Maksymalna ocena	int	Pobiera lub ustawia maksymalną liczbę ocen. Zakres tej wartości to od 1 do 25; wartość domyślna to 5. Jest to właściwość powiązywalna.
Ocena Zmieniona	EventHandler<RatingChangedEventArgs>	Zdarzenie występuje, gdy ocena zostanie zmieniona.
OpcjaWypełnienia	RatingViewFillOption	Pobiera lub ustawia element, który ma być wypełniony, gdy ustawiona jest ocena. Właściwość jest typu RatingViewFillOption i jest enumeracją. Wartość domyślna tej właściwości to RatingViewFillOption.Shape. Jest to właściwość powiązywalna.
Ocena	double	Pobiera lub ustawia wartość wskazującą bieżącą wartość klasyfikacji, umożliwiając zarówno wstępnie zdefiniowane oceny (np. z poprzednich danych wejściowych lub przechowywanych przez użytkownika) oraz aktualizacje podczas wykonywania, gdy użytkownik wchodzi w interakcję z kontrolką. Wartość domyślna to 0. Jest to właściwość powiązywalna.
ShapeBorderColor	Color	Pobiera lub ustawia kolor obramowania kształtu elementu oceny. Wartością domyślną tego parametru jest Szary. Jest to właściwość powiązywalna.
GrubośćObramowaniaKształtu	Thickness	Pobiera lub ustawia grubość obramowania kształtu elementu klasyfikacji. Wartość domyślna to Grubość ze wszystkimi wartościami ustawionymi na 1. Jest to właściwość powiązywalna.

Wskazówka

Dodatkowe właściwości klasy bazowej można znaleźć w klasie HorizontalStackLayout.

Ustaw niestandardową ścieżkę kształtu

Właściwość CustomShapePath jest właściwością string , która umożliwia definiowanie niestandardowych ścieżek SVG. Ta funkcja umożliwia deweloperom implementowanie unikatowych kształtów SVG, takich jak charakterystyczne symbole, jako elementy klasyfikacji.

Ważne

CustomShapePath jest używany tylko wtedy, gdy właściwość jest ustawiona Shape na Shape.Custom. Ustawienie Shape.Custom, gdy CustomShapePath ma wartość null, spowoduje zgłoszenie InvalidOperationException: Nie można narysować RatingViewShape.Custom, ponieważ parametr CustomShapePath ma wartość null. Podaj ścieżkę SVG do CustomShapePath.

W poniższym przykładzie ustawiane są właściwości niestandardowe i właściwości kształtu:

<toolkit:RatingView
	CustomShapePath ="M 12 0C5.388 0 0 5.388 0 12s5.388 12 12 12 12-5.38 12-12c0-6.612-5.38-12-12-12z"
	Shape="Custom" />

Równoważny kod języka C# to:

RatingView ratingView = new()
{
	CustomShapePath = "M 12 0C5.388 0 0 5.388 0 12s5.388 12 12 12 12-5.38 12-12c0-6.612-5.38-12-12-12z",
	Shape = RatingViewShape.Custom,
};

Aby uzyskać więcej informacji na temat kształtów niestandardowych, zobacz Kształty.Ścieżka.

Ustawianie pustego koloru kształtu

Właściwość EmptyShapeColor jest właściwością Color dla nieupełnionych (pustych) kształtów klasyfikacji. Pozwala to na wyraźne rozróżnienie wizualne między kształtami ocenianymi i nieocenionymi.

W poniższym przykładzie ustawiono właściwość koloru pustego:

<toolkit:RatingView
	EmptyShapeColor="Grey" />

Równoważny kod języka C# to:

RatingView ratingView = new()
{
	EmptyShapeColor = Colors.Grey,
};

Kolor wypełniony (oceniane)

Właściwość FillColor jest właściwością Color , która zostanie zastosowana do wypełnionej (ocenianej) części każdego kształtu, zapewniając elastyczność definiowania wizualnej estetyki elementów klasyfikacji po wybraniu przez użytkownika. Użyj FillOption polecenia , aby zastosować ten kolor do elementu RatingViewFillOption.Background lub RatingViewFillOption.Shape.

W poniższym przykładzie ustawiono właściwość koloru wypełnienia.

<toolkit:RatingView
	FillColor="Green" />

Równoważny kod języka C# to:

RatingView ratingView = new()
{
	FillColor = Colors.Green,
};

Zestaw jest tylko do odczytu

Właściwość IsReadOnly jest elementem bool, który pozwala lub zabrania użytkownikowi modyfikować wartość Rating przez naciśnięcie RatingView.

W poniższym przykładzie ustawiono właściwość tylko do odczytu:

<toolkit:RatingView
	IsReadOnly="True" />

Równoważny kod języka C# to:

RatingView readOnlyRatingView = new()
{
	IsReadOnly = True,
};

Ustaw wypełnienie kształtu

Właściwość ShapePadding jest elementem Thickness do wypełnienia między kontrolką klasyfikacji a odpowiadającymi jej kształtami, co pozwala na dokładnszą kontrolę nad wyglądem i układem kształtów klasyfikacji.

W poniższym przykładzie ustawiono właściwość uzupełniania elementu:

<toolkit:RatingView
	ShapePadding="3, 7, 7, 3" />

Równoważny kod języka C# to:

RatingView ratingView = new()
{
	ShapePadding = new Tickness(3, 7, 7, 3),
};

Ustawianie średnicy kształtu

Właściwość ShapeDiameter jest elementem double , który dostosowuje rozmiar kształtu do ogólnego projektu aplikacji, zapewniając elastyczność dostosowywania kontrolki do różnych układów interfejsu użytkownika.

W poniższym przykładzie ustawiono właściwość uzupełniania elementu:

<toolkit:RatingView
	ShapeDiameter="37" />

Równoważny kod języka C# to:

RatingView ratingView = new()
{
	ShapeDiameter = 37,
};

Ustawianie maksymalnej oceny

Właściwość MaximumRating służy int do ustawiania całkowitej liczby elementów (np. gwiazdek, serca itp., lub kształtów niestandardowych) dostępnych do oceny. Umożliwia to klasyfikację dowolnej skali, na przykład system 5-gwiazdek lub 10-gwiazdek, w zależności od potrzeb aplikacji. Zakres tej wartości to od 1 do 25; wartość domyślna to 5.

Uwaga

Jeśli wartość jest ustawiona na 1, kontrolka przełączy ocenę z zakresu od 0 do 1 po kliknięciu/naciśnięciu. Jeśli wartość jest ustawiona poniżej bieżącej Ratingwartości , ocena zostanie odpowiednio skorygowana.

W poniższym przykładzie ustawiono właściwość maksymalnej klasyfikacji:

<toolkit:RatingView
	MaximumRating="7" />

Równoważny kod języka C# to:

RatingView ratingView = new()
{
	MaximumRating = 7,
};

Ustaw opcję wypełnienia

Właściwość FillOption jest typem enumRatingViewFillOption, która służy do ustawiania sposobu, w jaki wypełnienie jest stosowane po ustawieniu lub naciśnięciu Rating, umożliwiając bardziej zniuansowaną prezentację wizualną, na przykład wypełnienie tylko wnętrza kształtów lub całego elementu. Dostępne opcje:

• Shape - (ustawienie domyślne) Wypełnij kształt RatingView.
• Background - Wypełnij tło za kształtem

W poniższym przykładzie ustawiono właściwość wypełniania klasyfikacji:

<toolkit:RatingView
	FillOption="Shape" />
<toolkit:RatingView
	FillOption ="Background" />

Równoważny kod języka C# to:

RatingView shapeFillRatingView = new()
{
	FillOption = RatingViewFillOption.Shape,
};
RatingView itemFillRatingView = new()
{
	FillOption = RatingViewFillOption.Background,
};

Ustawianie klasyfikacji

Właściwość Rating służy double do ustawiania bieżącej wartości klasyfikacji, umożliwiając zarówno wstępnie zdefiniowane oceny (np. z poprzednich danych wejściowych lub przechowywanych przez użytkownika) i aktualizacji w czasie wykonywania, gdy użytkownik wchodzi w interakcję z kontrolką.

W poniższym przykładzie ustawiono właściwość ratingu:

<toolkit:RatingView
	Rating="3.73" />

Równoważny kod języka C# to:

RatingView ratingView = new()
{
	Rating = 3.73,
};

Obsługa zdarzenia zmiany oceny

Zdarzenie RatingChanged ma typ argumentu RatingChangedEventArgs. Zdarzenie jest zgłaszane, gdy Rating właściwość zostanie zmieniona, a element IsReadOnly ma wartość false.

Właściwość RatingChangedEventArgs uwidacznia pojedynczą właściwość:

• Rating - Nowa wartość klasyfikacji.

W poniższym przykładzie pokazano, jak dołączyć zdarzenie:

<toolkit:RatingView
	RatingChanged="RatingView_RatingChanged" />

Równoważny kod języka C# to:

	RatingView ratingView = new();
	ratingView.RatingChanged += RatingView_RatingChanged;

W poniższym przykładzie kod jest związany z obsługą zdarzenia:

void RatingView_RatingChanged(object sender, RatingChangedEventArgs e)
{
	double newRating = e.Rating;
	// The developer can then perform further actions (such as save to DB).
}

Ustawianie kształtu

Właściwość Shape jest elementem typu enumRatingViewShape używanym do ustawiania kształtu elementu oceny, takiego jak gwiazdki, okręgi, polubienia, niepolubienia lub inne powszechnie używane ikony oceny. Dostępne opcje:

• Star - (wartość domyślna)
• Heart
• Circle
• Like
• Dislike
• Custom - Wymaga CustomShapePath , aby najpierw został zdefiniowany; wyrzucony InvalidOperationException , jeśli CustomShapePath jest null

W poniższym przykładzie ustawiono właściwość wypełniania klasyfikacji:

<toolkit:RatingView
	Shape="Star" />
<toolkit:RatingView
	Shape="Heart" />
<toolkit:RatingView
	Shape="Circle" />
<toolkit:RatingView
	Shape="Like" />
<toolkit:RatingView
	Shape="Dislike" />
<toolkit:RatingView
    CustomShapePath="M 12 0C5.388 0 0 5.388 0 12s5.388 12 12 12 12-5.38 12-12c0-6.612-5.38-12-12-12z"
	Shape="Custom" />

Równoważny kod języka C# to:

RatingView starRatingView = new()
{
	Shape = RatingViewShape.Star,
};
RatingView heartRatingView = new()
{
	Shape = RatingViewShape.Heart,
};
RatingView circleRatingView = new()
{
	Shape = RatingViewShape.Circle,
};
RatingView likeRatingView = new()
{
	Shape = RatingViewShape.Like,
};
RatingView dislikeRatingView = new()
{
	Shape = RatingViewShape.Dislike,
};
RatingView customRatingView = new()
{
    CustomShapePath = "M 12 0C5.388 0 0 5.388 0 12s5.388 12 12 12 12-5.38 12-12c0-6.612-5.38-12-12-12z",
	Shape = RatingViewShape.Custom,
};

Ustawianie koloru obramowania kształtu

Element ShapeBorderColor jest przeznaczony Color do ustawiania koloru obramowania kształtu elementu klasyfikacji. Zapewnia to dodatkową elastyczność tworzenia wizualnie odrębnych i stylizowanych kształtów klasyfikacji z obramowaniami niestandardowymi.

W poniższym przykładzie ustawiono właściwość koloru obramowania kształtu:

<toolkit:RatingView
	ShapeBorderColor="Grey" />

Równoważny kod języka C# to:

RatingView ratingView = new()
{
	ShapeBorderColor = Colors.Grey,
};

Ustaw grubość obramowania kształtu

Element ShapeBorderThickness służy double do ustawiania grubości obramowania kształtu. Zapewnia to dodatkową elastyczność tworzenia wizualnie odrębnych i stylizowanych kształtów klasyfikacji z obramowaniami niestandardowymi.

W poniższym przykładzie ustawiono właściwość grubości obramowania kształtu.

<toolkit:RatingView
	ShapeBorderThickness="3" />

Równoważny kod języka C# to:

RatingView ratingView = new()
{
	ShapeBorderThickness = 3,
};

Przykłady

Przykłady tej kontrolki można znaleźć w akcji w przykładowej aplikacji zestawu narzędzi .NET MAUI Community Toolkit:

• Składnia XAML
• Składnia języka C#
• Wystawa

API (Interfejs Programowania Aplikacji)

Kod źródłowy można RatingView znaleźć w repozytorium GitHub zestawu narzędzi .NET MAUI Community Toolkit.