RatingView

Das .NET MAUI Community Toolkit RatingView ist ein ItemTemplate und wurde entwickelt, um Entwicklern einen flexiblen und anpassbaren Bewertungsmechanismus zur Verfügung zu stellen, ähnlich dem, der auf beliebten Bewertungs- und Feedback-Plattformen verwendet wird.

Syntax

Einschließen des XAML-Namespaces

Um das Toolkit in XAML verwenden zu können, muss die folgende xmlns zu Ihrer Seite oder Ansicht hinzugefügt werden:

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

Der folgende Abschnitt:

<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>

Es würde wie folgt geändert werden, um die xmlns einzuschließen:

<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>

Verwendung der RatingView

Das folgende Beispiel zeigt, wie ein RatingView erstellt wird:

<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>

Der entsprechende C#-Code lautet:

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;
	}
}

Eigenschaften

Pfad der angepassten Form festlegen

Die CustomShapePath Eigenschaft ist eine string Eigenschaft, die das Definieren von benutzerdefinierten SVG-Pfaden ermöglicht. Mit diesem Feature können Entwickler eindeutige SVG-Shapes implementieren, z. B. eindeutige Symbole, als Bewertungselemente.

Im folgenden Beispiel werden die benutzerdefinierten Eigenschaften und die Formeigenschaften festgelegt.

<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" />

Der entsprechende C#-Code lautet:

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,
};

Weitere Informationen zu benutzerdefinierten Shapes finden Sie unter Shapes.Path.

Setze die Farbe einer leeren Form

Die Eigenschaft EmptyShapeColor ist ein Color für die nicht ausgefüllten (leeren) Bewertungsformen. Dies ermöglicht eine klare visuelle Differenzierung zwischen bewerteten und nicht bewerteten Formen.

Im folgenden Beispiel wird die leere Farbeigenschaft festgelegt:

<toolkit:RatingView
	EmptyShapeColor="Grey" />

Der entsprechende C#-Code lautet:

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

Gefüllte (bewertete) Farbe festlegen

Die FillColor-Eigenschaft ist eine Color, die auf den gefüllten (bewerteten) Teil jeder Form angewendet wird, und bietet Flexibilität beim Definieren der visuellen Ästhetik der Bewertungselemente, wenn sie vom Benutzer ausgewählt werden. Verwenden Sie FillOption, um diese Farbe auf die RatingViewFillOption.Background oder die RatingViewFillOption.Shapeanzuwenden.

Das folgende Beispiel setzt die Eigenschaft gefüllte Farbe:

<toolkit:RatingView
	FillColor="Green" />

Der entsprechende C#-Code lautet:

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

Das Set ist nur schreibgeschützt

Die IsReadOnly-Eigenschaft ist eine bool, die dem Benutzer das Ändern des Rating-Wertes durch Tippen auf die RatingView ermöglicht oder verbietet.

Das folgende Beispiel setzt die Eigenschaft ist schreibgeschützt:

<toolkit:RatingView
	IsReadOnly="True" />

Der entsprechende C#-Code lautet:

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

Formauffüllung festlegen

Die Eigenschaft ShapePadding ist eine Thickness für den Abstand zwischen der Bewertung und den entsprechenden Bewertungsansichten. Sie bietet die Möglichkeit, das Aussehen und Layout der Bewertungsansichten genauer zu steuern.

Das folgende Beispiel setzt die Eigenschaft Elementauffüllen:

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

Der entsprechende C#-Code lautet:

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

Formdurchmesser festlegen

Die ShapeDiameter-Eigenschaft ist eine double, die die Formgröße an den gesamten Entwurf der Anwendung anpasst und die Flexibilität bietet, das Steuerelement an verschiedene UI-Layouts anzupassen.

Das folgende Beispiel setzt die Eigenschaft Elementauffüllen:

<toolkit:RatingView
	ShapeDiameter="37" />

Der entsprechende C#-Code lautet:

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

Maximale Bewertung festlegen

Die MaximumRating Eigenschaft ist eine int für die Einstellung der Gesamtanzahl von Artikeln (z. B. Sterne, Herzen oder benutzerdefinierte Formen), die für die Bewertung verfügbar sind. Dies ermöglicht bewertungen beliebiger Skalierungen, z. B. eines 5-Sterne- oder 10-Sterne-Systems, je nach den Anforderungen der Anwendung. Der Bereich dieses Werts beträgt 1 bis 25; Der Standardwert ist 5.

Im folgenden Beispiel wird die maximale Bewertungseigenschaft festgelegt:

<toolkit:RatingView
	MaximumRating="7" />

Der entsprechende C#-Code lautet:

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

Fülloption festlegen

Die FillOption-Eigenschaft ist ein enum vom Typ RatingViewFillOption, mit dem Sie festlegen können, wie die Füllung angewendet wird, wenn das Rating gesetzt oder angetippt wird. Dies ermöglicht eine nuanciertere visuelle Darstellung, wie z. B. das Füllen nur des Inneren der Formen oder des gesamten Artikels. Die verfügbaren Optionen sind:

• Shape – (Standard) Füllt die RatingView-Form.
• Background – Füllt den Hintergrund hinter der Form

Das folgende Beispiel setzt die Eigenschaft Bewertung füllen:

""

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

Der entsprechende C#-Code lautet:

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

Bewertung festlegen

Die Rating-Eigenschaft ist eine double zum Festlegen des aktuellen Bewertungswerts. Sie ermöglicht sowohl die Nutzung vordefinierter Bewertungen (z. B. aus vorherigen Benutzereingaben oder gespeicherten Daten) als auch Aktualisierungen während der Laufzeit, wenn der Benutzer mit dem Steuerelement interagiert.

Das folgende Beispiel die Eigenschaft Bewertung:

<toolkit:RatingView
	Rating="3.73" />

Der entsprechende C#-Code lautet:

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

Ereignis "Rating changed" behandeln

Das RatingChanged-Ereignis weist den Argumenttyp RatingChangedEventArgsauf. Das Ereignis wird ausgelöst, wenn die eigenschaft Rating geändert wird und das Element IsReadOnly "false" ist.

Die RatingChangedEventArgs macht eine einzelne Eigenschaft verfügbar:

• Rating – Der neue Bewertungswert.

Das folgende Beispiel zeigt, wie das Ereignis angefügt wird:

<toolkit:RatingView
	RatingChanged="RatingView_RatingChanged" />

Der entsprechende C#-Code lautet:

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

Das folgende Beispiel ist der Code für die Behandlung des Ereignisses:

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

Form festlegen

Die Shape-Eigenschaft ist ein enum vom Typ RatingViewShape zum Festlegen der Form der Bewertungselemente, wie zum Beispiel Sterne, Kreise, 'Gefällt mir', 'Gefällt mir nicht' oder andere häufig verwendete Bewertungssymbole. Die verfügbaren Optionen sind:

• Star – (Standard)
• Heart
• Circle
• Like
• Dislike
• Custom - erfordert, dass CustomShapePath zuerst definiert ist; löst InvalidOperationException aus, wenn CustomShapePathnull ist.

Das folgende Beispiel setzt die Eigenschaft Bewertung füllen:

<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" />

Der entsprechende C#-Code lautet:

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,
};

Farbe des Formrahmens festlegen

Das ShapeBorderColor ist ein Color zum Einstellen der Rahmenfarbe der Form des Bewertungselements. Dies bietet zusätzliche Flexibilität, um visuell unterschiedliche und stilisierte Bewertungs-Shapes mit benutzerdefinierten Rahmen zu erstellen.

Im folgenden Beispiel wird die Formrandfarbe-Eigenschaft festgelegt.

<toolkit:RatingView
	ShapeBorderColor="Grey" />

Der entsprechende C#-Code lautet:

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

Festlegen der Randstärke der Form

Die ShapeBorderThickness ist eine double zum Festlegen der Dicke des Formenrandes. Dies bietet zusätzliche Flexibilität, um visuell unterschiedliche und stilisierte Bewertungs-Shapes mit benutzerdefinierten Rahmen zu erstellen.

Das folgende Beispiel legt die Eigenschaft Randstärke der Form fest:

<toolkit:RatingView
	ShapeBorderThickness="3" />

Der entsprechende C#-Code lautet:

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

Beispiele

Sie finden Beispiele für dieses Steuerelement in Aktion in der .NET MAUI Community Toolkit-Beispielanwendung:

• XAML-Syntax
• C#-Syntax
• Showcase

API (Programmierschnittstelle)

Sie finden den Quellcode für RatingView über das GitHub-Repository für das .NET MAUI Community Toolkit.