Laden...

Text auf Progressbar - Foreground an Progress Value anpassen

Erstellt von ByteDevil vor 4 Jahren Letzter Beitrag vor 4 Jahren 1.387 Views
ByteDevil Themenstarter:in
132 Beiträge seit 2013
vor 4 Jahren
Text auf Progressbar - Foreground an Progress Value anpassen

Hi,

ich bastel gerade an einer WPF App (.net Core 3.1) im MVVM Pattern. Darin habe ich einen Progressbar, auf dem ich gern genauere Informationen zum Fortschritt anzeigen möchte. Das könnte ich einfach mit einem Textblock machen, der zusammen mit dem Progressbar in einem Grid liegt. Nun habe ich auch ein Theme für die ganze App geschrieben, was im Grunde auf heller Schrift auf dunklem Grund basiert. Mein Progressbar besteht aus einem Hellen Balken auf grauem Grund.

Nun möchte ich, dass der Text in Weiß angezeigt wird, wenn der Progressbar darunter grau ist und Schwarz wenn der Hintergrund Weiß ist. Das möchte ich für jeden einzelnen Buchstaben tun. Google konnte mir dabei leider nicht helfen. Habt ihr eine Idee wie ich das machen könnte?

Edit: Genau sowas hier suche ich: https://css-tricks.com/reverse-text-color-mix-blend-mode/

5.658 Beiträge seit 2006
vor 4 Jahren

Du könntest dir einen eigenen ShaderEffect erstellen. Dazu mußt du aber einen PixelShader schreiben, ein Beispiel findest du in dem Link.

Weeks of programming can save you hours of planning

709 Beiträge seit 2008
vor 4 Jahren

Das mit dem Text kannst du mit einer OpacityMask erreichen.
Du hast dann einmal den Balken als Hintergrund. Dann darüber den Text, der angezeigt werden soll, wenn kein Balken dahinter ist. Dann da drüber den Text, der mit Balken angezeigt werden soll und blendest den dann mittels OpacityMask ein.

Ich habe das mal für eine runde Fortschrittsanzeige so gebaut.

ByteDevil Themenstarter:in
132 Beiträge seit 2013
vor 4 Jahren

Danke euch vielmals 😃 Das mit dem Shader wirkt etwas Hacky^^ Ich würde es gern zuerst mit der Opacity Mask versuchen. Allerdings kann ich mir das nicht so ganz vorstellen. Mit einer Opacity Mask kann ich doch regionen durchsichtig machen, oder?

Wenn ich dich richtig verstehe, schlägst du zwei TextBlöcke vor, die den selben Text haben und genau übereinander liegen. Einer hat weiße Schrift, der andere schwarze und dann soll ich sie irgendwie mit einer Opacity Mask sichtbar/unsichtbar machen?

709 Beiträge seit 2008
vor 4 Jahren

Genau.