Ranking Komponente gesucht, bzw. wie kann man sowas umsetzen?

[juergen]

Hallo zusammen,

momentan nutze ich eine Combobox mit der Auswahl einer entsprechenden Bewertung als reine Textauswahl (1 - 5 Sterne, in 0,5er Schritten).
Benutzerfreundlich ist das nicht, bzw. sieht eine Bewertung über grafische "Sterne" einfach besser aus.
Nun dachte ich es gibt schon etwas fertiges. In meiner TMS Sammlung habe ich auch eine Trackbar gefunden, die sieht aber nicht "schön" aus.

Kennt jemand etwas "fertiges"? Oder sollte ich mir über eine ImageList jeweils 10 gelbe und 10 weiße Sterne-Icons verwalten. Und je nachdem wo der Anwender in z.B. einem Panel dann hin klickt, ermittle ich die Mausposition und setze im Wechsel das passende Icon aus der ImageList...???

Vielen Dank vorab schon mal für Tipps und Vorschläge!

[Furtbichler]

Da das sehr einfach umzusetzen ist, würde ich es mal eben selbst bauen. Du kannst auch einfach einen weißen und einen roten Stern als Bitmap nehmen und die dann hintereinander zeichnen.

Vielleicht verwendest Du einfach eine TPaintbox und überschreibst sowohl die Click- als auch die Paint-Methode. Die OnClick-Methode nimmt Maus-X, relativ zur Paintbox und teilt sie durch 5. das ist die Anzahl der Sterne (+1), die die Paint-Methode dann zeichnen muss.

Eine Form, eine Paintbox und eine Imagelist mit zwei Bitmaps: Weißer und gelber Stern.

Delphi-Quellcode:

Procedure TForm14.PaintBoxClick(Sender: TObject);
Var
  p: TPoint;
  pb: TPaintBox;

Begin
  pb := Sender As TPaintBox;
  p := pb.ScreenToClient(Mouse.CursorPos);
  pb.tag := p.x Div (pb.Width Div 5);
  pb.Invalidate;
End;

Procedure TForm14.PaintBoxPaint(Sender: TObject);
Var
  stars: Integer;
  canvas: TCanvas;
  bounds: TRect;
  I, wd: Integer;

  Procedure _PaintStar(PaintClickedStar: Boolean; x: Integer);
  Var
    imageIndex: Integer;

  Begin
    If PaintClickedStar Then
      imageIndex := 1
    Else imageIndex := 0;

    ImageList.Draw(canvas, x + 2, 2, imageIndex, dsTransparent, itImage);
  End;
Begin

  canvas := (Sender As TPaintBox).Canvas;
  stars := (Sender As TPaintBox).Tag;
  bounds := (Sender As TPaintBox).BoundsRect;
  OffsetRect(bounds, -bounds.left, -bounds.top);
  canvas.Brush.Color := clWhite;
  canvas.Rectangle(bounds);
  wd := bounds.Right Div 5;
  For I := 0 To 4 Do
    _PaintStar(i <= stars, i * wd);
End;

[juergen]

Hallo Furtbichler,

oh, vielen Dank für deine Mühe und es funktioniert auf Anhieb! :thumb:
Dein Ansatz ist etwas anders wie ich es gemacht hätte.
Bis jetzt hatte ich noch nie mit einer Paintbox gearbeitet...
Was ich jetzt auf die Schnelle nicht gefunden habe:
Wie bekomme ich den Rahmen von der Paintbox weg?

[Furtbichler]

Die Paintbox dient nur als 'proof-of-concept' Du kannst Dir eine eigene Komponente von TControl ableiten, glaube ich. Oder Du machst das als TImage lädst eine statische Bitmap mit der entsprechenden Größe (24x120 für 5 24x24 Sterne) und zeichnest in den Canvas der Bitmap.

[sx2008]

Denk auch dran, dass es im Unicode Zeichensatz teilweise recht hübsche Zeichen gibt.
✮✮✮✮⭐⭐⭐
✹✹✹✹
▶▶▶▶▷
◖◗
★★★★☆
☻☻☻☻☻☺
⚫⚫⚫⚫⚪
⬛⬛⬛⬛⬜

Das vergisst man manchmal obwohl man damit einfacher zum Ziel kommt.

[Namenloser]

Da muss man aber aufpassen, dass man auch eine Schrift hat, die die Zeichen enthält. Bei mir werden z.B. bei deinen Beispielen in den ersten und letzten zwei Zeilen nur Kästchen angezeigt...

[juergen]

Hallo zusammen,

danke für eure Hinweise.
Ich hatte gestern den Ansatz von Furtbichler weiter verfolgt.
Damit bin ich flexibel was die Optik der Sterne betrifft und dem Hintergrund.

Aber das Ganze ist dann doch nicht ganz so einfach. Ich benötige auch halbe Sterne, da üblicherweise in "halben Sternen-Schritten" bewertet wird. Weiterhin muss es auch möglich sein die Bewertung wieder komplett zurück zu setzen (keine Sterne).
Ich bin da schon einiges weiter gekommen aber noch nicht ganz fertig.
Meine Grundidee dabei ist, dass der Bereich von einem Stern in 3 "Mausklick-Zonen" aufgeteilt wird. Wenn man im linken 1/3 klickt wird der "leere" Stern gesetzt, im 2/3-Bereich eines Sternes wird der halbe Stern gesetzt und im letzten Drittel der volle Stern.
Weiterhin muss im MouseMove-Event am Mauszeiger der Wert als "Vorschau" angezeigt werden, ohne die Bewertung zu setzen, das erfolgt erst nach einem Klick.
Leider habe ich heute und kommende Woche keine Zeit und muss dann später weiter machen.

Nochmals mein Dank an alle und noch einen schönen Sonntag! :dp:

[Union]

Du könntest ein TcxProgressbar mit Properties.BarStyle = cxBsBitmap einsetzen. Dann die MouseEvents auswerten und das ganze als Trackbar mißbrauchen.

Delphi-Quellcode:

cxProgressBar1.Position := trunc(X*(cxProgressBar1.Properties.Max-cxProgressBar1.Properties.Min)/cxProgressBar1.Width);

[Furtbichler]

Zitat:

Zitat von juergen (Beitrag 1224299)

Aber das Ganze ist dann doch nicht ganz so einfach. Ich benötige auch halbe Sterne, da üblicherweise in "halben Sternen-Schritten" bewertet wird.

Im Beispiel wird die Komponente in 5 Teile geteilt.

Teile sie in 10 Teile. Dann ergibt das einen 'Sternindex von 1..10'. Dann zeichnest Du 'Sternindex/2' ganze Sterne und wenn 'Sternindex' ungerade ist, noch einen halben Stern hinten dran.

Um die Bewertung zurückzusetzen, kannst Du
- einen Button 'Zurücksetzen' dazupacken,
oder
- den Bereich in 11 Teile zeilen (dann ergibt das einen Sternenindex von 1..11'). Du ziehst eins ab, wenn das Ergebnis 0 ist, dann zeichnest Du keinen Stern. Die Komponente ist dann etwas breiter, weil links ein kleines (halbe Sternbreite) Feld leer ist, in das man hineinklickt, um 0 Sterne zu vergeben.
oder
- prüfst einfach, ob Mouse.X < 5 (pixel) ist. Wenn ja, sind es 0 sterne, ansonsten wie gehabt. Man vergibt also 0 Sterne, wenn man auf den ersten Stern links klickt.

[juergen]

@Union,
diese Art der Umsetzung ist ein ganz neuer Ansatz, da ich die "DevExpress-Dinger" auch habe! Die cxBsBitmap-Propertie habe ich noch nie genutzt, bzw. kannte diese auch gar nicht. Werde ich mir anschauen sobald ich wieder etwas Zeit habe. Vielen Dank. :thumb:

@Furtbichler,
dein Ansatz ist ähnlich dem, was ich schon angefangen habe. Nochmals vielen Dank! :thumb:


Cool dass ich 2 völlig verschiedene schöne Lösungsansätze habe. :dp:

Gruss
Jürgen