Probleme mit ColorAnimation von Path.Fill

kafffee · 21. August 2023, 10:28

Hallo allerseits

Ich habe Probleme mit dem Animieren der Fill-Eigenschaft eines Path-Controls. Mein Code sieht so aus:

XML-Quellcode

<Style TargetType="{x:Type Path}">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="White" Duration="00:00:00.500" AutoReverse="True" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"/>
<!--<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
<LinearColorKeyFrame KeyTime="00:00:01" Value="White"/>
</ColorAnimationUsingKeyFrames>-->
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>

Ich bekomme die Fehlermeldung:

""(0).(1)" kann nicht für eine unveränderliche Objektinstanz animiert werden."

Aber nur wenn die Instanz von Path so aussieht:

Spoiler anzeigen

Bei diesen zwei Instanzen von Path funktioniert es:

Spoiler anzeigen

XML-Quellcode

<ListBox Name="lstAlben" ScrollViewer.HorizontalScrollBarVisibility="Hidden" Grid.Column="1" Grid.Row="1" ItemsSource="{Binding AnzuzeigendeAlben}" SelectedItem="{Binding AusgewaehltesAlbum, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" SelectionMode="Single" SelectedIndex="{Binding MarkiertesAlbum, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" IsSynchronizedWithCurrentItem="True">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="94*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Path=Album}" Grid.Column="2" TextTrimming="CharacterEllipsis">
<ToolTipService.ToolTip>
<StackPanel>
<TextBlock Text="{Binding Path=Interpret, StringFormat='Interpret: \{0\}'}"/>
<TextBlock Text="{Binding Path=Album, StringFormat='Album: \{0\}'}"/>
</StackPanel>
</ToolTipService.ToolTip>
</TextBlock>
<Border Name="brdAlbumZuPlaylistZufuegen" Height="{StaticResource listboxitemhoehe}" Grid.Column="0" Style="{DynamicResource Navigationsbuttons}" ToolTip="Füge alle Musiktitel dieses Albums der Playlist des gewählten Plattendecks zu..." HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Border.InputBindings>
<MouseBinding MouseAction="LeftClick" Command="{Binding DataContext.AlbumZuPlaylistZufuegen, ElementName=lstAlben}" CommandParameter="{Binding}"/>
</Border.InputBindings>
<Viewbox Stretch="Uniform">
<Path Margin="4" Stretch="Uniform" Fill="{DynamicResource VordergrundfarbeBrush}" Data="xxx"/>
</Viewbox>
</Border>
<Border Name="brdAlbumAbspielen" Height="{StaticResource listboxitemhoehe}" Grid.Column="1" Style="{DynamicResource Navigationsbuttons}" ToolTip="Spiele alle Musiktitel dieses Albums auf dem gewählten Plattendeck ab...">
<Border.InputBindings>
<MouseBinding MouseAction="LeftClick" Command="{Binding DataContext.AlbumAbspielen, ElementName=lstAlben}" CommandParameter="{Binding}"/>
</Border.InputBindings>
<Viewbox Stretch="Uniform">
<Path Margin="4" Stretch="Uniform" Fill="{DynamicResource VordergrundfarbeBrush}" Data="yyy"/>
</Viewbox>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Das zweite Problem ist, wenn ich nochmal auf die Schaltfläche klicke, wenn die Animation noch nicht abgeschlossen ist, wird die Farbe nicht wieder zurückgesetzt, sondern es wird eine zweite Animation gestartet, die als "Ausgangsfarbe" die aktuelle Farbe der ersten Animation nimmt. Kann man dieses Verhalten irgendwie blocken?

Edit: OK, das mit der zweiten Animation kann ich wahrscheinlich mit dem Schlüsselwort From beheben, ich probier das mal...

Freue mich auf Eure Antowrten

DTF · 21. August 2023, 10:48

Zur Fehlermeldung, müsste ich genauer schauen, hab dazu aber erst später Zeit.

kafffee schrieb:

wenn die Animation noch nicht abgeschlossen ist, wird die Farbe nicht wieder zurückgesetzt,

Dann gib nicht nur "to" an, sondern auch "from". Dann sollte das schonmal funktionieren.

kafffee · 21. August 2023, 11:04

DTF schrieb:

Zur Fehlermeldung, müsste ich genauer schauen, hab dazu aber erst später Zeit.

Ah okay, bin für jede Hilfe dankbar

DTF schrieb:

Dann gib nicht nur "to" an, sondern auch "from". Dann sollte das schonmal funktionieren.

Ja den Gedanke hatte ich auch schon, funktioniert aber nur mir "festen" Farben. Mit DynamicResource crasht das Programm und mit StaticResource passiert keine Animation....

Edit: Ich befürchte fast, dasss das nur mir festen Farben funktioniert... Wäre nicht so schlimm, dann arbeite ich mit Opacity, das fuktioniert.... und zwar beide Probleme sind/wären damit gelöst...

Jetzt bin ich aber auf ein weiteres Problem gestossen:

Die Path-Elemente reagieren auf den Klick nur, wenn man quasi direkt auf das gezeichnete Objekt klickt. Wenn man auf den transparenten Bereich klickt, passiert gar nichts. Jetzt hab ich ja sowieso das Border immer drumrum. Gibt es eine Möglichkeit, per XAML auf das untergeordnete Element des Borders (bei mir also das Path) und dessen Fill-Eigenschaft zuzugreifen vom Storyboard aus? Ich hab da die Eigenschaft Storyboard.Target gefunden, kann man da vielleicht irgendwie mit x:Type Path oder etwas in der Art arbeiten? Denn IntelliSense zeigt mir da nicht wirklich was an... bei MS Docs bin ich da auch nicht fündig geworden, da gab es nur Storyboard.TargetName und Storyboard.TargetProperty. Ich will halt nicht jedes Path einzeln mit Name ansteuern, sondern das jeweils dem Border untergeordnete...

DTF · 21. August 2023, 15:53

kafffee schrieb:

Mit DynamicResource crasht das Programm und mit StaticResource passiert keine Animation....

Hast du einfach den Brush genommen oder dessen Color? Du musst schon zwischen Brush und Color unterscheiden, "From" oder "To" will eine Farbe keinen Brush.
Mach einfach so, geht wunderbar:

XML-Quellcode

<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<Color x:Key="ColorSmurfBlue" R="0" G="102" B="255" A="255"/>
<SolidColorBrush x:Key="BrushSmurfBlue" Color="{StaticResource ColorSmurfBlue}"/>
<Style TargetType="{x:Type Path}">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<ColorAnimation From="{StaticResource ColorSmurfBlue}" To="White" Duration="00:00:01" AutoReverse="True" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Border>
<Canvas Width="100" Height="100" VerticalAlignment="Center" HorizontalAlignment="Center">
<Path Fill="{StaticResource BrushSmurfBlue}" Data="M 0,0 L 100,50 L 0,100"/>
</Canvas>
</Border>
</Grid>
</Window>

kafffee · 21. August 2023, 16:06

@DTF

Cool das probier ich mal.

Aber die Sache mit dem Zugriff auf das dem Border untergeordnete Path hast du auch keine Ahnung?

DTF · 21. August 2023, 16:17

Ich habe eben den Post und Source genauer angeschaut, dabei bemerkt, das du auch das Problem hast mit dem klicken, so das nur wenn du im Path klickts der Path Animiert wird, liegt daran, das du im Style für die Path's den Trigger hast, so kann nur bei klick auf den Path reagiert werden. Ich muss gleich mal was nachlesen, dann mach ich da mal was.(Bin diese Woche auch nicht ganz taufrisch, hab einen Kingdom Come Marathon hinter mir, spiele das aktuell noch mal, diesmal in Schwierigkeitsgrad Hardcore, satte 100 Stunden in den letzten 9 Tagen)

kafffee · 21. August 2023, 16:32

Cool dann bin ich mal gespannt

DTF · 21. August 2023, 18:21

Hab nun mal geschaut, ohne Tricks geht es nicht, evtl. mit einer AttachedProperty, würde evtl. auch mit einem RelayCommand gehen wo als Parameter die Canvas Instanz festgelegt wird(dann über die Childrens Property den Path holen), aber das finde ich zu viel UI im ViewModel. Da beim Mausklick aufs Canvas die Animation gestartet wird, kann man nur via ElementName das Target bekommen. So muss man dann aber bei jeden Canvas mit solch animierten Path-Fill-Color den Style reinbauen

.

XML-Quellcode

<Canvas Width="100" Height="100" VerticalAlignment="Center" HorizontalAlignment="Center" Background="White">
<Canvas.Triggers>
<EventTrigger RoutedEvent="MouseLeftButtonDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation From="{StaticResource ColorSmurfBlue}" To="White" Duration="00:00:01" AutoReverse="True" Storyboard.TargetName="thePath" Storyboard.TargetProperty="Fill.Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>
<Path x:Name="thePath" Fill="{StaticResource BrushSmurfBlue}" Data="M 0,0 L 100,50 L 0,100"/>
</Canvas>

PS: @kafffee
Mit einer AttachedProperty gehts wirklich und einfacher als wie bei jedem Canvas Style und Storyboard.... anzulegen.
Das kannst du bei allen Canvas nutzen, vorraussetzung ist aber, das das erste Element des Canvas ein Shape ist, Also Rectangle, Ellispe, Path, wie alle was von Shape erbt.

PPS:
Hab den Code wieder gelöscht weil fehlte was, auch wenn die Animation funktionierte, schau einfach in die Projektmappe, hatte keine Lust das nochmal zu editieren.

kafffee · 21. August 2023, 20:54

@DTF

Okay AttachedProperties sind für mich noch Neuland, das muss ich mir mal noch in Ruhe anschauen.

Hab grade zeitgleich beim Recherchieren eine noch einfachere Lösung gefunden: Man kann wohl noch ein zweites Path hernehmen, das das eigentliche Path mit dem Icon umhüllt und davon dann die Fill-Property auf Transparent setzen. Das klingt so als könnte es klappen, ich probier das mal aus und meld mich wieder...

DTF · 21. August 2023, 20:58

kafffee schrieb:

Okay AttachedProperties sind für mich noch Neuland, das muss ich mir mal noch in Ruhe anschauen.

Gabs schon mehrfach hier, auch bei der Titelleiste, erinnerst du dich nicht?
Auch im Tutorial vom NoFear findest du solche. Sind sehr nützlich. Hatte das nochmal geupdated, lade die Mappe einfach noch mal runter.

kafffee · 21. August 2023, 21:11

Doch ich erinner mich dunkel. Habs damals einfach nicht gecheckt und hab das Fenster mit der Titelleiste dann im Code Behind mit der Methode DragMove verschoben. Das war eine von zwei oder drei Stellen im Code wo ich tatsächlich mal auf Code Behind zurückgegriffen hab...

Ich hatte deine Mappe noch gar nicht runtergeladen (also wenn du die Mappe hier in diesem Thread meinst?). Würds dir was ausmachen das als Zip nochmal hochzuladen? Ansonsten ist auch egal du hast ja den Code gepostet das sollte langen ich geh jetzt mal von aus das der funktioniert...

DTF · 21. August 2023, 21:16

Funktionieren deine Slider nicht mit mausrad rauf/runter? Oder hast du das im Code Behind? Dann kannst du das auch mit AttachedProperties machen.

Wenn du im XAML einer Property einen Wert zuweist, sollest du ja Wissen, woher die Stammen auch.
beispiel:
<SomeElement Property="Wert"/> , oder <Rectangle Fill=.../>
Mit den AttachedProperties, zauberst du deine eigenen properties einfach so da rein. Auf deutsch: "Angehängte Eigenschaften", da ich ICommand für die Property nutze, kann man auch gleich im ViewModel bescheidsagen(Command.Execute). Du Kannst anstatt von ICommand auch eine Farbe nehmen und verwenden, oder sonst einen Typ.

PS
@kafffee
Hier nochmal als zip:

kafffee · 21. August 2023, 22:19

Meine Slider funktionieren derzeit mit MIDI-Befehlen von einem MIDI-kompatiblen Hardware-Mischpult

Aber hast recht so mit Mausrad das wär nice to have....

Mal gucken vielleicht bekomm ich das mit Hilfe deines Beispiels hin...

Edit: Hab mir grad nochmal das Kapitel von Nofear23m durchgelesen. Ich glaub ich habs verstanden diesmal, jetzt muss ichs nur noch in die Tat umsetzen...

kafffee · 25. August 2023, 08:34

@DTF Bin gerade nochmal dabei das mit den Slidern zu lösen.

Das Kapitel von Nofear23m hab ich verstanden denke ich. Unterschied ist ja, dass er da in seinem Beispiel mit einer Property arbeitet, die ja einen Wert hat. Bei dir in deinem Demo-Programm ändert sich ja nicht der Wert dieser Property, sondern du gehst mit einem Mausklick um... und genau da haperts bei mir noch, mir erschliesst sich nicht ganz, wie das funktioniert.

Kannst du mir das mit ein paar Worten erklären? Das hab ich bis jetzt:

VB.NET-Quellcode

Public Class SliderMouseWheelControlAttachedProperty
Inherits DependencyObject
Public Shared ReadOnly MouseWheelDownCommandProperty As DependencyProperty = DependencyProperty.RegisterAttached("MouseWheelDownCommand", GetType(ICommand), GetType(SliderMouseWheelControlAttachedProperty), New PropertyMetadata(New PropertyChangedCallback(AddressOf MouseWheelDownCommandChanged)))
Private Shared Sub MouseWheelDownCommandChanged(ByVal d As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs)
Dim MeinSlider As Slider = CType(d, Slider)
AddHandler MeinSlider.MouseWheel, AddressOf MouseWheel
End Sub
Private Shared Sub MouseWheel(ByVal sender As Object, ByVal e As MouseEventArgs)
Dim MeinSlider As System.Windows.Controls.Slider = CType((CType(sender, Slider)), System.Windows.Controls.Slider)
MeinSlider.Value += MeinSlider.Value
End Sub
Public Shared Sub SetMouseWheelDownCommand(ByVal slider As Slider, ByVal command As ICommand)
slider.SetValue(MouseWheelDownCommandProperty, command)
End Sub
Public Shared Function GetMouseWheelDownCommand(ByVal slider As Slider) As ICommand
Return TryCast(slider.GetValue(MouseWheelDownCommandProperty), ICommand)
End Function
End Class

DTF · 25. August 2023, 09:40

Hast du auch XAML dazu? Es reicht der Code vom Slider, wo du das mit dem MouseWheel nutzen willst. Ich habe ja Typ ICommand verwendet, im XAML nutze ich diese DependencyProperty, weise einen RelayCommand zu, das geht weil RelayCommand ja ICommand Implementiert, ich habe ICommand genommen, weil ich so auch im ViewModel informiert werde. Wenn du im Sample im ViewModel schaust, wird dort auch der Command ausgeführt. Ich mache dir dazu heute ein Sample, so das du keinen RelayCommand im ViewModel brauchst.

Es geht bei dir aber schon in die richtige Richtung :thumbsup:

Zeig aber noch den XAML Code vom Slider mit zuweisen eines Wert für die Property.

kafffee · 25. August 2023, 09:50

Ja ein Demo wäre top :thumbup:

Das mit dem RelayCommand hat mich unnötig verwirrt.

HIer der XAML:

XML-Quellcode

<Slider VerticalAlignment="Center" Minimum="0" Maximum="10" local:SliderMouseWheelControlAttachedProperty.MouseWheelDownCommand="{Binding command}"/>

DTF · 25. August 2023, 09:59

Naja, ob man nun ICommad oder sonst was nimmt, das läuft im Prinzip auf gleiche hinaus. Nur das man mit dem ICommand im ViewModel Informiert wird, beim MouseDown vom Canvas durch brauchbar, hätte Canvas auch Click, hätte ich den weitergeleitet. Beim Slider braucht man das ja nicht, da binden wir die Value vom Slider, die Property haben wir ja im ViewModel dann schon und können auf änderung reagieren.

kafffee · 25. August 2023, 10:07

Okay dann bin ich mal gespannt aufs Demo

DTF · 25. August 2023, 10:43

So, geht gleich wieder mit kritik los,

. Du musst doch einiges nachholen. Auch in WinForms gibt es MouseEventArgs, z.B. für Clicks usw., aber auch MouseWheelEventArgs, das sollte dir eigendlich geläufig sein. Das Mausrad kann man rauf und runter drehen, MouseEventArgs hat keinerlei Informationen darüber. MouseWheelEventArgs hat das Feld Delta, mit dem können wir feststellen, ob nun rauf oder runter gedreht wurde.

Warum das doppelte CType?
Dim MeinSlider As System.Windows.Controls.Slider = CType((CType(sender, Slider)), System.Windows.Controls.Slider)

So genug mit der Kritik

. Nun zum wesentlichen, anstatt ICommand habe ich nun Double als Typ für die DependencyProperty genommen. Damit legen wir dann fest um wie viel der Wert geändert werden soll.

Spoiler anzeigen

VB.NET-Quellcode

Public Class SliderMouseWheel
Inherits DependencyObject
Public Shared ReadOnly MouseWheelChange As DependencyProperty = DependencyProperty.RegisterAttached("MouseWheelChangeProperty", GetType(Double), GetType(SliderMouseWheel), New PropertyMetadata(New PropertyChangedCallback(AddressOf MouseWheelChangeChanged)))
Private Shared Sub MouseWheelChangeChanged(ByVal d As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs)
Dim slider As Slider = DirectCast(d, Slider)
AddHandler slider.MouseWheel, AddressOf OnMouseWheel
End Sub
Private Shared Sub OnMouseWheel(sender As Object, e As MouseWheelEventArgs)
Dim slider As Slider = DirectCast(sender, Slider)
Dim sliderValue = slider.Value
Dim change As Double = DirectCast(slider.GetValue(MouseWheelChange), Double)
If e.Delta > 0 Then
sliderValue += change
ElseIf e.Delta < 0 Then
sliderValue -= change
End If
slider.Value = Clamp(sliderValue, slider.Minimum, slider.Maximum)
End Sub
Private Shared Function Clamp(value As Double, min As Double, max As Double) As Double
If value < min Then value = min
If value > max Then value = max
Return value
End Function
Public Shared Sub SetMouseWheelChangeProperty(uiElement As UIElement, value As Double)
uiElement.SetValue(MouseWheelChange, value)
End Sub
Public Shared Function GetMouseWheelChangeProperty(uiElement As UIElement) As Double
Return DirectCast(uiElement.GetValue(MouseWheelChange), Double)
End Function
End Class

XML-Quellcode

<Slider Minimum="0" Maximum="100" local:SliderMouseWheel.MouseWheelChangeProperty="0.25" />

Und schon haben wir solch eine Funktionalität als AttachedProperty hineingezaubert,. Aber mach demnächst doch besser einen neuen Thread auf, das hat ja nichts mehr mit dem ursprünglichen Thema zu tun.

PS. @kafffee
Kleine änderung, besser das Event wieder entfernen, sollte der Wert geändert werden, würde sonst mehrfach das Event gefeuert, es könnte ja bereits für dieses Element abonniert sein.

VB.NET-Quellcode

Private Shared Sub MouseWheelChangeChanged(ByVal d As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs)
Dim slider As Slider = DirectCast(d, Slider)
RemoveHandler slider.MouseWheel, AddressOf OnMouseWheel
AddHandler slider.MouseWheel, AddressOf OnMouseWheel
End Sub

kafffee · 25. August 2023, 11:40

Jou das versteh ich schon besser. Noch eine Rückfrage:

VB.NET-Quellcode

Public Shared ReadOnly MouseWheelChange As DependencyProperty = DependencyProperty.RegisterAttached("MouseWheelChangeProperty", GetType(Double), GetType(SliderMouseWheel), New PropertyMetadata(New PropertyChangedCallback(AddressOf MouseWheelChangeChanged)))

Seh ich das richtig, dass hier...:

New PropertyMetadata(New PropertyChangedCallback(AddressOf MouseWheelChangeChanged))

... ja beim Initialisieren MouseWheelChangeChanged aufgerufen wird und dort dann quasi das MouseWheel-Event abonnniert wird? Weil dann hab ichs glaube ich verstanden...

PS: Hab dann auch noch eine Kleinigkeit eingebaut, dass egal was für Min-/Maximum der Slider hat, der Value des Sliders immer nach 10 Schritten ganz oben/unten ist:

VB.NET-Quellcode

Dim change As Double = (slider.Maximum - slider.Minimum) / 10

Edit:

es könnte ja bereits für dieses Element abonniert sein.

Du meinst das Event könnte schon an irgend einer anderen Stelle im Projekt abonniert sein? Also jetzt nicht in dem Code hier?

Probleme mit ColorAnimation von Path.Fill

Probleme mit ColorAnimation von Path.Fill

XML-Quellcode

XML-Quellcode

XML-Quellcode

kafffee schrieb:

DTF schrieb:

DTF schrieb:

kafffee schrieb:

XML-Quellcode

XML-Quellcode

kafffee schrieb:

VB.NET-Quellcode

XML-Quellcode

VB.NET-Quellcode

XML-Quellcode

VB.NET-Quellcode

VB.NET-Quellcode

VB.NET-Quellcode

Benutzer online 1

Ähnliche Themen

2 Benutzer haben hier geschrieben