Trying to perform a simple red blinking effect for a single row in a DevExpress grid.
I've applied the following style on the grid's row:
<Style x:Key="AlertedRowStyle" TargetType="{x:Type dxg:GridRowContent}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Row.IsAlerted}" Value="False">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Background"
To="Red"
Duration="0:0:0.500"
AutoReverse="True"
RepeatBehavior="Forever">
<ColorAnimation.EasingFunction>
<CircleEase EasingMode="EaseOut" />
</ColorAnimation.EasingFunction>
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Background"
To="White"
Duration="0:0:0.500" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
It causes the following exception:
'System.Windows.Media.Animation.ColorAnimation' animation object cannot be used to animate property 'Background' because it is of incompatible type 'System.Windows.Media.Brush'.
Also tried to change the Storyboard.TargetProperty to Background.Color and got:
Cannot resolve all property references in the property path 'Background.Color'. Verify that applicable objects support the properties.
How can I solve this issue?
Storyboard.TargetProperty="Background.Color" is right. Try
<Style x:Key="AlertedRowStyle" TargetType="{x:Type dxg:GridRowContent}">
<Setter Property="Background" Value="Transparent" />
<Style.Triggers>
...
I guess Background is Null and so the Storyboard can not find something to animate.
Try
Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"
worked for me.
you can open a new thread. In this thread you use a loop. In this loop you can change the Backcolor of the row. In the loop you sleep the thread for 0.3 sec or something. So it should look like blinking.
regards
Related
I'm trying to create a datagrid that change the row colour when the row property changed. Below is the code i tried and it doesn't work at all. Any advise is appreciated.
<DataGrid.Resources>
<Style TargetType="DataGridRow">
<Style.Triggers>
<EventTrigger RoutedEvent="Binding.TargetUpdated">
<BeginStoryboard>
<Storyboard AutoReverse="True">
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" From="White" To="Green" Duration="0:1:0"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</DataGrid.Resources>
why you use Storyboard? if you want just change row color you can use just trigger and mention trigger property and value.
for a WPF prototype I would like to accomplish the following:
I want display a listbox where each item looks like "Text Button1 Button2". All the 3 of them are bound to an Observable collection. Text displays a string, Button1 and Button2 display a double. SO far no problem. I would like to extend the functionality as follows and have no idea in how to accomplish this in the best possible practice:
1) The entries in the listbox should have an alternating background, based on the index. ie
If (index % 2) == true, then background = red,
else background = green.
The index might change and the background should update automatically.
2) If the value of double bound to the button text increases, the button should be highlighted green for a second,
else if the value of the double bound to the button text decreases, the button should be highlighted red for a second,
else the button should do nothing.
Can someone help me?
Thanke, br
// edit:
For #2 I now tried the following: Having 2 Storyboards, bound to data triggers. My problem is, that it does not highlight do each of the triggered changes Any ideas?
<Storyboard x:Key="ValueDecreaseAnimationStoryBoard" Name="ValueDecreaseAnimationStoryBoard">
<ColorAnimation
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="Red"
AutoReverse="True"
Duration="0:0:0.5" />
</Storyboard> <Storyboard x:Key="ValueIncreaseAnimationStoryBoard" Name="ValueIncreaseAnimationStoryBoard">
<ColorAnimation
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="Green"
AutoReverse="True"
Duration="0:0:0.5" />
</Storyboard>
<Style x:Key="ValueTriggerStyle" TargetType="{x:Type Button}">
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="LightGray" />
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Value1Trend}" Value="{x:Static local:Trend.Decreased}">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource ValueDecreaseAnimationStoryBoard}" />
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding Path=Value1Trend}" Value="{x:Static local:Trend.Increased}">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource ValueIncreaseAnimationStoryBoard}" />
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
I want to create a datatrigger that makes my page blink (from transparent to red). So I created a DataTrigger that listens to a boolean flag within my viewmodel. This flag shall indicate whenever the user needs to be reminded. In that case, my page shall blink from transparent to red.
I was pretty sure that I have implemented the data trigger in a correct manner, but my app does nothing - no error, no blinking... So I must have something missed.
<Style x:Key="ReminderPage" TargetType="{x:Type ViewTemplates:TpApplicationBarView}" BasedOn="{StaticResource TpApplicationBarViewStyle}">
<Style.Triggers>
<!-- Reminder animation, when the time comes to remind the user -->
<DataTrigger Binding="{Binding IndicateReminderAnimation}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard x:Name="Blink">
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
AutoReverse="True"
From="Transparent"
To="Red"
Duration="0:0:1"
RepeatBehavior="Forever">
</ColorAnimation >
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding IndicateReminderAnimation}" Value="False">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
AutoReverse="False"
To="Transparent"
Duration="0:0:1">
</ColorAnimation >
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
So, what do I have done wrong?
Update: I can see the following message in the output window:
System.Windows.Media.Animation Warning: 6 : Unable to perform action because
the specified Storyboard was never applied to this object for interactive control.;
Action='Stop'; Storyboard='System.Windows.Media.Animation.Storyboard';
Storyboard.HashCode='61356140'; Storyboard.Type='System.Windows.Media.Animation.Storyboard';
TargetElement='System.Windows.Media.Animation.Storyboard'; TargetElement.HashCode='61356140';
TargetElement.Type='System.Windows.Media.Animation.Storyboard'
Update2: After googling arround I found out, that it is a problem with the UI Thread. So I made a dispatcher call whenever I set the bound property. But even with this trick, there's no color animation. But the error in the output window seems to be vanished. So, I'm searching for further ideas on how to fix the animation.
Update3: It seems to be a general problem setting the background color of the page. But it's really strange. The Page is placed in a NavigationFrame. Setting the background color of the navigation frame will change the color of the application, but setting the background color of the page (even without any animation) won't change anything.
I think you will have to set the animations Target, something like this -
Storyboard.TargetName="yourWindowName"
You may have already checked this, but make sure that correct object is set as your TpApplicationBarView's DataContext(having IndicateReminderAnimation property).
I found the bug - or better the two bugs.
1.) It seems not be possible to change the background color of a page that is placed within a Navigation Frame.
So first was to move the binding and event to the MainWindow itself (wpf window class)
2.) The Style that contains the data trigger did not work. After googling around I found a working solution for what I'm searching for.
<Storyboard x:Key="RemindUser" >
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
AutoReverse="True"
From="Transparent"
To="{StaticResource WinAccentBackgroundColor}"
Duration="0:0:1"
RepeatBehavior="Forever">
</ColorAnimation >
</Storyboard>
<Storyboard x:Key="StopRemindUser">
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
AutoReverse="True"
To="Transparent"
Duration="0:0:1">
</ColorAnimation >
</Storyboard>
<Style x:Key="ReminderWindow" TargetType="{x:Type Metro:SnappedTransparentWindow}" BasedOn="{StaticResource TransparentWindow}">
<Style.Triggers>
<!-- Reminder animation, when the time comes to remind the user -->
<DataTrigger Binding="{Binding IndicateReminderAnimation}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource RemindUser}"/>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource StopRemindUser}"/>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
The key was to split the binding and storyboard into different parts.
I would like to do something that is seemingly quite simple, but I cannot figure out how to do it. I have a ColorAnimation that is triggered when the MouseEnter event occurs. It simply changes the background color of a Border from one color to another color.
Unfortunately, I can't figure out how to put anything but hardcoded colors into this ColorAnimation. So it looks currently like this:
<Style x:Key="MouseOverStyle">
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="Red" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
However, I'd like do something either like this:
<SolidColorBrush x:Key="MyEventColor" Color="{Binding EventColor}" />
<Style x:Key="MouseOverStyle">
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="{StaticResource MyEventColor}" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
Or like this:
<Style x:Key="MouseOverStyle">
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="{Binding EventColor}" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
When I try to do either of those, an exception gets thrown. For the first, it throws an exception telling me essentially that the "Color" property can't take a SolidColorBrush value...which makes sense...but it certainly doesn't help me out because the ColorAnimation won't let me animate the "(Border.Background).(SolidColorBrush)" property...it will only let me animate the "(Border.Background).(SolidColorBrush.Color)" property....
The exception on the second example basically tells me that it "Cannot freeze this Storyboard timeline tree for use across threads" ...so it sounds like the ColorAnimation is trying to do this binding in some other thread than the UI thread or something? Whatever it's trying to do...it isn't working.
How the heck can I do such a simple task?
For the first one, you could use {StaticResource MyColor} with MyColor defined as such:
<Color x:Key="MyColor">#FF00FF00</Color>
However, this doesn't solve your problem: you can't bind to animation properties since those properties need to be frozen (unchangeable) for the animation to work. Either try to remove your dependence on a binding, or recreate the storyboard with the correct color from code behind when the color changes.
The following code makes the contents of a StackPanel fade in when it is loaded (StackPanel.Loaded).
What do I have to change to get the fade it to start when the contents of the StackPanel change, e.g. every time a message in the StackPanel changes I want it to fade in again?
<Style x:Key="MessageStyle" TargetType="StackPanel">
<Style.Triggers>
<DataTrigger Binding="{Binding SaveStatus}" Value="Failed">
<Setter Property="StackPanel.Background" Value="Red"/>
</DataTrigger>
<EventTrigger RoutedEvent="StackPanel.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="(StackPanel.Opacity)"
From="0.0" To="1.0" Duration="0:0:5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
You should be able to do what you're looking for with the StackPanel.SourceUpdated/StackPanel.TargetUpdated event after setting the accompanying
NotifyOnSourceUpdated/NotifyOnTargetUpdated property to True on the binding that binds the contents of the StackPanel.