Servus,
in letzter Zeit nehm ich das Forum ganz schön in Anspruch,
ich versuche gerade meinen Custom TabItem Style eine MouseOver ColorAnimation beizubringen, allerdings funktioniert das ganze nicht, wenn ich seltsamerweise in einem normalen Trigger die Background Eigenschaft zuweise, funktioniert die Animation plötzlich?
Kann mir eventuell jemand weiterhelfen?
XAML :
<Style x:Key="Middle_TabItem_Style" TargetType="{x:Type TabItem}">
<Setter Property="FontSize" Value="17"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<StackPanel Height="50" Orientation="Horizontal" Margin="-35, 0, 0, 0">
<Path x:Name="First_Path" Width="35" Data="M0,0 35,25 0,50 35,50 35,0" Fill="{StaticResource Default_TabItem_Background}"/>
<Border x:Name="Border" Background="{StaticResource Default_TabItem_Background}" Margin="-1, 0, 0, 0">
<ContentPresenter ContentSource="Header" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5, 0, 5, 0"/>
</Border>
<Path x:Name="Last_Path" Width="35" Data="M0,0 35,0 0,25 35,50 0,50" Fill="{StaticResource Default_TabItem_Background}" Margin="-1, 0, 0, 0"/>
</StackPanel>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!--<Setter Property="FontSize" Value="5"/>-->
<!--<Setter TargetName="Border" Property="Background" Value="Red"/>-->
</Trigger>
<!--<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard >
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#6990EE90" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>-->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Irgendwie scheint es hiermit zusammenzuhängen : Background="{StaticResource Default_TabItem_Background}"
Ah okay verstehe :
<EventTrigger RoutedEvent="Border.MouseEnter" SourceName="Border">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background.GradientStops[0].Color"
To="Red"
Duration="0:0:3" AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
Damit funktioniert es..
Danke für die Hilfe 😄
Hi _Cashisclay,
wenn du den Wert einer Eigenschaft setzt, dann überschreibst du den Wert, der durch den Style gesetzt wird - und damit auch die Animation.
Statt mit Background="{StaticResource Default_TabItem_Background}"
kannst du daher den Wert einfach per Setter im Style setzen:
<Setter TargetName="Border" Property="Background" Value="{StaticResource Default_TabItem_Background}"/>
Weeks of programming can save you hours of planning
Aber wie weise ich dann der ColorAnimation einen LinearGradientBrush zu?
Edit : Ich glaub ich habs gleich, danke für den Denkanstoß
Grüße
Das funktioniert eigentlich soweit sehr gut, nur überschreibt mir mein MouseOver Trigger irgendwie meine Werte vom IsSelected.. Bzw verfälscht irgendwie das Ergebnis..
Jeder Trigger für sich erfüllt seine Aufgabe, aber in Kombination.. spinnt es die ganze Zeit rum.
<Style x:Key="First_TabItem_Style" TargetType="{x:Type TabItem}">
<Setter Property="Background" Value="{StaticResource Default_First_TabItem_Background}"/>
<Setter Property="FontSize" Value="15"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<StackPanel Orientation="Horizontal" Height="50">
<Border Background="{TemplateBinding Background}" Width="20" CornerRadius="20, 0, 0, 0" x:Name="Border_Left_Corner" />
<Border Background="{TemplateBinding Background}" Margin="-1, 0, 0, 0" x:Name="Border_First_Rectangle" >
<ContentPresenter ContentSource="Header" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5, 0, 5, 0" />
</Border>
<Path Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" Width="35" Margin="-0.5, 0, 0, 0" Data="M 0,0 35,25 0,50" x:Name="Path_Right_Triangle" />
</StackPanel>
</Grid>
<ControlTemplate.Triggers>
<!-- IsMouseOver -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsSelected" Value="False"/>
<Condition Property="IsEnabled" Value="True"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!-- Background -->
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#58ACFA"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#81BEF7"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[2].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#58ACFA"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#4F81BD"/>
</ColorAnimationUsingKeyFrames>
<!-- Foreground -->
<ColorAnimation Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" From="Black" To="White" Duration="0:0:0:1"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<!-- Background -->
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#D8D8D8"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#E6E6E6"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[2].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#D8D8D8"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#A4A4A4"/>
</ColorAnimationUsingKeyFrames>
<!-- Foreground -->
<ColorAnimation Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" From="White" To="Black" Duration="0:0:0:1"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
<!-- IsSelected -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsEnabled" Value="True"/>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Foreground" Value="White"/>
</MultiTrigger.Setters>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!-- Background -->
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#58ACFA"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#81BEF7"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[2].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#58ACFA"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#4F81BD"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<!-- Background -->
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#D8D8D8"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#E6E6E6"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[2].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#D8D8D8"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#A4A4A4"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Was heißt "verfälscht das Ergebnis"?
Kannst du mal bitte noch die Definition von "Default_First_TabItem_Background" zeigen? Danke.
Na ich möchte eigentlich wenn das TabItem IsSelected = True das es einen festen Farbwert annimmt der sich wieder zurücksetzt sobald das TabItem nicht mehr selektiert ist.
Wenn das TabItem nicht mehr selektiert ist, aber die Maus über dem Element ist soll es sich verfärben, selektiert man das Item dann soll es wieder den festen Farbwert annehmen.. selektiert man es nicht und man geht mit der Maus von dem Element weg, soll es wieder seinen Default Farbwert annehmen.
Das spinnt aber alles ..
Farbwert :
<!-- Default - First TabItem Background -->
<LinearGradientBrush x:Key="Default_First_TabItem_Background" StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#D8D8D8" Offset="0.01"/>
<GradientStop Color="#E6E6E6" Offset="0.3" />
<GradientStop Color="#D8D8D8" Offset="0.6" />
<GradientStop Color="#A4A4A4" Offset="0.95"/>
</LinearGradientBrush>
Ich habe zum besseren Verständnis das Beispiel mal ein wenig vereinfacht:
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" From="Black" To="White" Duration="0:0:0:2" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" From="White" To="Black" Duration="0:0:0:2" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="False" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" From="MediumSeaGreen" To="HotPink" Duration="0:0:0:2" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" From="HotPink" To="MediumSeaGreen" Duration="0:0:0:2" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
Es soll sich also - je nach IsMouseOver
- der Foreground
animiert ändern.
Beim Öffnen des Controls greift die EnterAction von IsMouseOver=false, d.h. er animiert von Grün zu Pink.
Fährt man über das Tab, greift die ExitAction von IsMouseOver=false, d.h. er animiert von Pink zu Grün.
Die Aktionen des IsMouseOver=true-Triggers werden niemals ausgelöst.
Es scheint, als wenn er immer nur in einen reinläuft, warum das so ist, kann ich allerdings nicht sagen.
EDIT sagt noch:
Lässt man beide ExitActions weg, funktioniert trotzdem nur die EnterAction von IsMouseOver=False.
Ändert man die Reihenfolge der Trigger, wird zuerst die EnterAction von IsMouseOver=False aufgerufen, danach immer nur noch die von IsMouseOver=True.
Sehr kurios. 🤔
Servus p!lle,
danke für die Antwort .. und danke für die Idee, wieso hast du das überhaupt so ausprobiert?
Tatsächlich reagieren die Trigger bei mir wie gewünscht wenn ich mit dem IsMouseOver = False arbeite..
Merkwürdig 🤔
EDIT : Sind beide Trigger True wird ja eigentlich nur der letzte ausgeführt.
Seltsamerweise funktioniert das IsMouseOver False Phänomen bei mir nur solange .. wie ich kein Item Selektiert haben, nach der ersten Selektierung geht es dann wieder nicht mehr
EDIT : lag an der Reihenfolge der Trigger .. dieses Thema kostet mich noch alle nerven ⚠
Ähm, was funktioniert? 😁
Das war keine Idee, es sollte zeigen, dass sich das irgendwie gegenseitig ausschließt. 😉
Mir ist noch etwas aufgefallen, und zwar funktionieren folgende MultiTrigger in Kombination:*IsMouseOver=True, es wird animiert der Background geändert *IsMouseOver=False, es wird animiert der Foreground geändert
Die Animation wird zur gleichen Zeit ausgeführt!
Es greife also alle MultiTrigger gleichzeitig, dabei kann eine Eigenschaft aber immer nur von einem Trigger geändert werden.
Ergo: das was du vor hast, funktioniert so nicht.
Aktuell hab ich aber das gewünschte Ergebnis :
<!-- IsSelected -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsEnabled" Value="True"/>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Foreground" Value="White"/>
</MultiTrigger.Setters>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!-- Background -->
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#58ACFA"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#81BEF7"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[2].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#58ACFA"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#4F81BD"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<!-- Background -->
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#D8D8D8"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#E6E6E6"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[2].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#D8D8D8"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#A4A4A4"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
<!-- IsMouseOver -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="False"/>
<Condition Property="IsSelected" Value="False"/>
<Condition Property="IsEnabled" Value="True"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!-- Background -->
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#D8D8D8"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#E6E6E6"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[2].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#D8D8D8"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#A4A4A4"/>
</ColorAnimationUsingKeyFrames>
<!-- Foreground -->
<ColorAnimation Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" From="White" To="Black" Duration="0:0:0:1"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<!-- Background -->
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#58ACFA"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#81BEF7"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[2].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#58ACFA"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#4F81BD"/>
</ColorAnimationUsingKeyFrames>
<!-- Foreground -->
<ColorAnimation Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" From="Black" To="White" Duration="0:0:0:1"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
Tatsache.
Allerdings liegt das an einem anderen Umstand: der zweite MultiTrigger deckt beide, von dir gewünschte, Fälle ab.
Du kannst die Gegenprobe machen und im ersten MultiTrigger mal die Farben auf total knallige Farben ändern. Du wirst sehen, dass du diese Farben nie zu Gesicht bekommst.
Als zweite Gegenprobe kannst du den ersten Trigger einfach löschen - es funktioniert dann weiterhin. =)
Hä .. das macht doch überhaupt keinen Sinn 8o
Aber du hast recht, allerdings hab ich mal in den ersten Trigger ein paar Fontanimation und Shadoweffects hinzugefügt, er geht in den Trigger und erfüllt auch seine Aufgabe ..
Aber das mit den Farben ist mir ein Rätsel
Aber das mit den Farben ist mir ein Rätsel
Es greifen also alle MultiTrigger gleichzeitig, dabei kann eine Eigenschaft aber immer nur von einem Trigger geändert werden.
Liegt das an den Enter bzw. ExitActions?
Weil ich habe mir ja extra MultiTrigger definiert die das abfangen sollten
in beiden ist ja definiert das sie jeweils nur bei IsSelected=True oder IsSelected=False reagieren sollen.
Das 'Multi' im MultiTrigger bezieht sich einfach nur auf mehrere Conditions, bei einem normalen Trigger gibt es ja nur eine Condition.
Ansonsten hängt es natürlich von den Actions ab.
Wenn IsSelected auf true wechselt, greift natürlich die EnterAction von IsSelected=true und gleichzeitig die ExitAction von IsSelected=false. Wird in beiden Actions eine Eigenschaft animiert, wird nur eine Animation durchgeführt.