WPF Fade Out on a control

WPF Fade Out on a control - c#

In my WPF app, I have a feedback control that I want to appear after a user action completes (save data, delete...). The visibility is set to Hidden to begin and style set to the animateFadeOut style defined as a resource (see below). Then I want to set the text and control Visibility to visible in my C# code and have the feedback control display the message and fade out after 5 seconds and remain hidden (Visibility.Hidden).
The following XAML works the first time I call control.Visiblity= Visibility.Visible but the control doesn't reappear the second time. I figure that is because the animation is still running, which has control over the feedback control. I then tried to set FillBehavior to "Stop" but that just made the control visible again and I want it hidden. Then, with FillBehavior="Stop", I tried to set a trigger "when Opacity = 0, set the Visibility to Hidden". The trigger didn't seem to fire and I was left with the visible control once more after the animation completed.
Please help point out what I am doing wrong here.
Alternatively, if you can suggest a better way to display a control that fades after 5 seconds and can be called over and over, I would appreciate it.
Thanks!
<Style TargetType="{x:Type FrameworkElement}" x:Key="animateFadeOut">
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard >
<Storyboard>
<DoubleAnimation BeginTime="0:0:5.0" Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>

The problem is that after your animation completes your control still has Visibility=Visible, so it cannot be entered again.
I would rather use animation that does the whole thing, first shows the control, then hides it.
<Storyboard x:Key="animate">
<ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation BeginTime="0:0:0.0" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.2"/>
<DoubleAnimation BeginTime="0:0:5.0" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:0.5"/>
<ObjectAnimationUsingKeyFrames BeginTime="0:0:5.5" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
And use it as follows:
((Storyboard)FindResource("animate")).Begin(someControl);

Liz is correct about Visibility still being Visible. alpha-mouse is also correct that you need to set it back to Hidden at some point. But it won't work if you set it back before the animation is completed like this:
MyControl.Visibility = System.Windows.Visibility.Visible;
MyControl.Visibility = System.Windows.Visibility.Hidden;
because animations take higher precedence (MSDN)
You can set it back to Hidden in Storyboard.Completed event:
private void Show()
{
MyControl.Visibility = System.Windows.Visibility.Visible;
var a = new DoubleAnimation
{
From = 1.0,
To = 0.0,
FillBehavior= FillBehavior.Stop,
BeginTime = TimeSpan.FromSeconds(2),
Duration = new Duration(TimeSpan.FromSeconds(0.5))
};
var storyboard = new Storyboard();
storyboard.Children.Add(a);
Storyboard.SetTarget(a, MyControl);
Storyboard.SetTargetProperty(a, new PropertyPath(OpacityProperty));
storyboard.Completed += delegate { MyControl.Visibility = System.Windows.Visibility.Hidden; };
storyboard.Begin();
}

Here is my work around. This fades a control in and back out again. Instead of playing around with the Visibility, I handled it by playing only with the Opacity.
Thanks to Kane from this post for the orginal code: Fade any control using a WPF animation
Storyboard storyboard = new Storyboard();
TimeSpan duration = TimeSpan.FromMilliseconds(500); //
DoubleAnimation fadeInAnimation = new DoubleAnimation()
{ From = 0.0, To = 1.0, Duration = new Duration(duration) };
DoubleAnimation fadeOutAnimation = new DoubleAnimation()
{ From = 1.0, To = 0.0, Duration = new Duration(duration) };
fadeOutAnimation.BeginTime = TimeSpan.FromSeconds(5);
Storyboard.SetTargetName(fadeInAnimation, element.Name);
Storyboard.SetTargetProperty(fadeInAnimation, new PropertyPath("Opacity", 1));
storyboard.Children.Add(fadeInAnimation);
storyboard.Begin(element);
Storyboard.SetTargetName(fadeOutAnimation, element.Name);
Storyboard.SetTargetProperty(fadeOutAnimation, new PropertyPath("Opacity", 0));
storyboard.Children.Add(fadeOutAnimation);
storyboard.Begin(element);

My God that took forever. Take a look at this, it solves that problem of animating upon Visibility changes to 'Visible' and 'Hidden' using alpha and the animation will not freeze.
using System.Windows;
namespace WpfApplication4
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void button1_Click(object sender, RoutedEventArgs e)
{
button.Visibility = Visibility.Hidden;
}
private void button2_Click(object sender, RoutedEventArgs e)
{
button.Visibility = Visibility.Visible;
}
}
}
XAML:
<Window x:Class="WpfApplication4.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:WpfApplication4"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.Resources>
<Style BasedOn="{StaticResource {x:Type Button}}" TargetType="{x:Type Button}">
<Style.Resources>
<Storyboard x:Key="FadeOut">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" FillBehavior="Stop">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Hidden}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:1" AutoReverse="False" />
</Storyboard>
<Storyboard x:Key="FadeIn">
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:1" AutoReverse="False" />
</Storyboard>
</Style.Resources>
<Setter Property="Width" Value="120"></Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Visibility" Value="Hidden" />
<Condition Property="Opacity" Value="1" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="FadeInStoryboard" />
<BeginStoryboard Name="FadeOutStoryboard" Storyboard="{StaticResource FadeOut}" />
</MultiTrigger.EnterActions>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Visibility" Value="Visible" />
<Condition Property="Opacity" Value="0" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="FadeOutStoryboard" />
<BeginStoryboard Name="FadeInStoryboard" Storyboard="{StaticResource FadeIn}" />
</MultiTrigger.EnterActions>
</MultiTrigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="200,186,0,0" VerticalAlignment="Top" Width="75" Height="38" />
<Button x:Name="button1" Content="Hide it" HorizontalAlignment="Left" Margin="112,96,0,0" VerticalAlignment="Top" Width="75" Click="button1_Click"/>
<Button x:Name="button2" Content="Show it" HorizontalAlignment="Left" Margin="200,96,0,0" VerticalAlignment="Top" Width="75" Click="button2_Click"/>
<Label x:Name="label" Content="{Binding ElementName=button, Path=Opacity}" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/>
<Label x:Name="label1" Content="{Binding ElementName=button, Path=Visibility}" HorizontalAlignment="Left" Margin="10,36,0,0" VerticalAlignment="Top"/>
</Grid>
</Window>

All the answers above use at least some sort of XAML code, which I personally am not that great of a fan of (because it's very confusing), so I found a way to do the same with some simple C# code:
int secs = 2; // How long the fade should take in seconds
for (int i = 99; i >= 0; i--)
{
someControl.Opacity = i / 100d;
await Task.Delay(secs * 10);
}
someControl.Visibility = Visibility.Hidden;
someControl.Opacity = 1;
You can use this on any Control. You also need to add the async modifier in your method signature. Without the await operator your UI couldn't respond while it's fading out the control.
After the control faded out, you can make it visible again like this:
someControl.Visibility = Visibility.Visible;
This method may not be the "best", but it is certainly the simplest and easiest to understand.

This should fix your storyboard.
However, remember that once the animation is complete, your control is completely opaque - invisible, but your Visibility property is still set to Visible. So you'll have to make sure that the Visibility property is reset to hidden or collapsed somewhere too.
<Style TargetType="{x:Type FrameworkElement}" x:Key="animateFadeOut">
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard Name="MyFadeEffect">
<Storyboard>
<DoubleAnimation BeginTime="0:0:5.0" Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="MyFadeEffect"/>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>

Related

How to make button and background flash in wpf

Issue
The issue I am having is when a user clicks a button I want the button to start flashing from 100% visible to around 20% visible and the background of the WPF window to change colors from #ffffff to #d6786a and this should happen untill the button is clicked again. Then the animations should stop.
Code
I have done a bit of diging around to find where somone has done this and I can't seem to see anything. The code i have at the moment is as follows.
Here is the button I want to flash from 100% visible to 20% visible when clicked:
<Button Name="button2" Style="{DynamicResource NoChromeButton}" Visibility="{Binding VisableState, Converter={StaticResource BoolToVis}}" ToolTip="Start Live Stream" Command="{Binding PlayStream}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="5" Height="22" Width="22" >
<Image Source="../Images/recordicon.png"/>
</Button>
I have tried to add a storyboard into the button and it just didn't work:
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard BeginTime="00:00:00"
RepeatBehavior="Forever"
Storyboard.TargetName="button2"
Storyboard.TargetProperty="(Visibility)">
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
I am new to WPF so going into animation is more difficult for me. If anyone could give me a little help on this stage it would be great.

Define animations in resources for example like this
<Window x:Name="window" x:Class="WpfApplication1.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:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Storyboard x:Key="FlashButton" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="button">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="ChangeColor">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="grid">
<EasingColorKeyFrame KeyTime="0:0:1" Value="Red"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="ChangeColor2">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="grid">
<EasingColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid x:Name="grid" Background="White">
<Button x:Name="button" Content="Button" Margin="10,10,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="75" Click="button_Click"/>
</Grid>
and create handler for button click
private bool isRunning;
private void button_Click(object sender, RoutedEventArgs e)
{
var flashButton = FindResource("FlashButton") as Storyboard;
var changeColor = FindResource("ChangeColor") as Storyboard;
var changeColor2 = FindResource("ChangeColor2") as Storyboard;
if (isRunning)
{
flashButton.Stop();
changeColor2.Begin();
isRunning = false;
}
else
{
flashButton.Begin();
changeColor.Begin();
isRunning = true;
}
}

To change "visibility to around 20%" you have to animate Opacity property (double type from 0.0 to 1.0) not Visibility (enum with 3 values, see msdn).
The goal can be easily achieved if you can use ToggleButton (because of its nice Checked and Unckecked routed events):
<ToggleButton>
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<BeginStoryboard x:Name="storyboard">
<Storyboard RepeatBehavior="Forever"
AutoReverse="True">
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="0.2"
Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<StopStoryboard BeginStoryboardName="storyboard" />
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>

Access a Control.Property inside a UserControl from Parent Control

I am trying to get an Ellipse to blink in case the icon inside another UserControl is Pause, and stop blinking if the icon is Play.
Here is the Ellipse and my attempt at binding to the PlayIcon.Opacity with a DataTrigger, which isn't working
<Ellipse.Style>
<Style TargetType="{x:Type Ellipse}">
<Style.Triggers>
<DataTrigger Binding="{Binding Opacity, Path=PlayIcon, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type views:PlayButton}}}" Value="0">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
From="0"
To="3"
RepeatBehavior="Forever"
AutoReverse="True"
Duration="0:0:0.1"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Ellipse.Style>
<views:PlayButton />
Here is the Pause and Play Icons in the PlayButton UserControl
<UserControl x:Class="MyNamespace.PlayButton" ...>
...
<Path Name="PlayIcon" Fill="Blue" Opacity="0" Data="M18,12 18,38 35,25"/>
<Path Name="PauseIcon" Fill="Blue" Opacity="10" Data="M15,12 15,38 23,38 23,12z M27,12 27,38 35,38 35,12" />
...
</UserControl>
How can I make this DataTrigger fire when the Opacity of the Play Icon is 0, or if Pause icon Opacity is 10 inside the PlayButton UserControl?

Reuse animations in Windows 8

I am building Windows Store Application (Winrt, Metro, Windows 8 app). I try give images in gridview animation: after image is loaded from web and opened it populates its cell.
I have storyboard for that:
<Storyboard x:Name="PopupImageStoryboard">
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="image">
<EasingDoubleKeyFrame KeyTime="0" Value="100"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="240"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="image">
<EasingDoubleKeyFrame KeyTime="0" Value="100"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="240"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
And I have such C# code for handling event that image loaded and opened:
private void Image_ImageOpened(object sender, RoutedEventArgs e)
{
Storyboard.SetTarget(PopupImageStoryboard, sender as Image);
PopupImageStoryboard.Begin();
}
It does not work, I can not change target and rerun same storyboard while it is running. But I want multiple images run this animation simultaneously. Can you recommend any solution for animation reuse ?

You should remove this from each of the child animations:
Storyboard.TargetName="image"
Then also I think a single Storyboard might not be possible to be used on two target elements at the same time, so the solution for that would be to put it in a DataTemplate, e.g.
<Page.Resources>
<DataTemplate
x:Name="myStoryboard">
<Storyboard ... />
</DataTemplate>
</Page.Resources>
Then in code you would say
var sb = (Storyboard)myStoryboard.LoadContent();
Storyboard.SetTarget(sb, sender as Image);
sb.Begin();
BTW - do not animate Width and Height properties. This is almost certainly not the best idea in your case. You should animate your RenderTransform properties instead, e.g. targeting ScaleTransform's ScaleX and ScaleY properties. If an animation is a dependent - it will cause layout updates in each frame which is very inefficient and will degrade your animation frame rate.
*EDIT
A better solution then would look like this:
<Page.Resources>
<DataTemplate
x:Name="myStoryboardTemplate">
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="ScaleX"
From="0.5"
To="1.0"
Duration="0:0:0.4">
<DoubleAnimation.EasingFunction>
<BackEase
Amplitude="2"
EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetProperty="ScaleY"
From="0.5"
To="1.0"
Duration="0:0:0.4">
<DoubleAnimation.EasingFunction>
<BackEase
Amplitude="2"
EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</DataTemplate>
</Page.Resources>
...
<Image
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="620"
Height="300"
Source="Assets/SplashScreen.png"
RenderTransformOrigin="0.5,0.5"
Stretch="Fill">
<Image.RenderTransform>
<ScaleTransform
x:Name="imageScaleTransform" />
</Image.RenderTransform>
</Image>
...
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
var sb = (Storyboard)myStoryboardTemplate.LoadContent();
Storyboard.SetTarget(sb, imageScaleTransform);
sb.Begin();
}

Change background color for a custom UserControl if inactive?

I created some custom UserControl for my application and I would like to set a background color if the control is not enabled.
I have seen several threads which used <Style.Trigger> but this does not work.
Here is my source of one of my controls:
<UserControl
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"
mc:Ignorable="d"
x:Class="IFCSControls.SubMenuPrint"
x:Name="SubMenuPrintButton"
d:DesignWidth="640" d:DesignHeight="480" Width="25" Height="25">
<UserControl.Resources>
<Storyboard x:Key="MouseOver">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path">
<EasingColorKeyFrame KeyTime="0" Value="#FF929292"/>
<EasingColorKeyFrame KeyTime="0:0:0.05" Value="#FF7CBDD8"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MouseOut">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path">
<EasingColorKeyFrame KeyTime="0" Value="#FF7CBDD8"/>
<EasingColorKeyFrame KeyTime="0:0:0.05" Value="#FF929292"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="LMBDown">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path">
<EasingColorKeyFrame KeyTime="0" Value="#FF7CBDD8"/>
<EasingColorKeyFrame KeyTime="0:0:0.05" Value="#FF00B5FF"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="LMBUp">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path">
<EasingColorKeyFrame KeyTime="0" Value="#FF00B5FF"/>
<EasingColorKeyFrame KeyTime="0:0:0.05" Value="#FF7CBDD8"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource MouseOver}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard Storyboard="{StaticResource MouseOut}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown">
<BeginStoryboard Storyboard="{StaticResource LMBDown}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeftButtonUp">
<BeginStoryboard Storyboard="{StaticResource LMBUp}"/>
</EventTrigger>
</UserControl.Triggers>
<Grid x:Name="LayoutRoot">
<Rectangle Fill="#FF666666" Margin="0,0,0,0.013" Stroke="Black" StrokeThickness="0"/>
<Path x:Name="path" Data="M40.039037,46.667008 L40.039037,74.28701 C40.039037,74.28701 67.66371,74.28701 71.450127,74.28701 75.23661,74.28701 74.361614,71.375458 74.361614,71.375458 74.361614,71.375458 74.361614,52.938088 74.361614,49.990063 74.361614,47.042042 71.038874,46.667008 71.038874,46.667008 z M9.0112228,46.667008 C9.0112228,46.667008 5.6854935,47.042042 5.6854935,49.990067 5.6854935,52.938091 5.6854935,71.375458 5.6854935,71.375458 5.6854935,71.375458 4.8097115,74.28701 8.5995998,74.28701 12.389425,74.28701 40.038958,74.28701 40.038958,74.28701 L40.038958,46.667008 z M25.307034,30.218752 C26.784927,30.218752 39.628404,30.218752 40.029402,30.218752 L40.038983,30.218752 40.038983,36.531223 24.962935,36.531223 C24.962935,36.531223 24.024576,36.624981 24.024576,35.562477 24.024576,34.499973 24.024576,31.437496 24.024576,31.437496 24.024576,31.437496 23.805683,30.218752 25.307034,30.218752 z M40.039012,30.21875 L40.048584,30.21875 C40.449222,30.21875 53.281151,30.21875 54.757715,30.21875 56.257717,30.21875 56.039021,31.437494 56.039021,31.437494 56.039021,31.437494 56.039021,34.499973 56.039021,35.562477 56.039021,36.624981 55.101504,36.531223 55.101504,36.531223 L40.039012,36.531223 z M40.039012,19.656239 L40.048403,19.656239 C40.441516,19.656239 53.034081,19.656239 54.695231,19.656239 56.38275,19.656239 56.039021,20.937498 56.039021,20.937498 56.039021,20.937498 56.039021,23.999975 56.039021,24.937479 56.039021,25.874983 55.132747,25.999981 55.132746,25.999981 L40.039012,25.999981 z M25.369575,19.656239 C27.032221,19.656239 39.636117,19.656239 40.029583,19.656239 L40.038983,19.656239 40.038983,25.999983 24.931665,25.999983 C24.931665,25.999983 24.024576,25.874985 24.024576,24.937481 24.024576,23.999975 24.024576,20.937498 24.024576,20.937498 24.024576,20.937498 23.680538,19.656239 25.369575,19.656239 z M40.039012,9.4062387 L40.049126,9.4062387 C40.472377,9.4062387 54.024806,9.4062387 55.101504,9.4062387 56.195232,9.4062387 56.179611,10.343743 56.179611,10.343744 56.179611,10.343743 56.179611,13.374995 56.179611,14.359364 56.179611,15.343744 55.226474,15.312488 55.226474,15.312488 L40.039012,15.312488 z M24.962935,9.4062387 C26.040603,9.4062387 39.605228,9.4062387 40.02886,9.4062387 L40.038983,9.4062387 40.038983,15.312488 24.837853,15.312488 C24.837853,15.312488 23.883858,15.343744 23.883858,14.359364 23.883858,13.374996 23.883858,10.343744 23.883858,10.343744 23.883858,10.343744 23.868223,9.4062387 24.962935,9.4062387 z M40.039012,1.1927187E-06 L64.372036,1.1927187E-06 64.382071,0.00045084767 C64.480513,0.005978772 65.26804,0.075826826 65.26804,0.89599533 65.26804,1.7708251 65.26804,39.655991 65.26804,39.655991 65.26804,39.655991 65.268284,41.025982 66.63809,41.025982 68.007895,41.025982 78.133232,41.025982 78.133228,41.025982 78.133232,41.025982 79.810856,41.025742 80.020561,42.598698 L80.038982,42.88749 80.038982,80 40.039012,80 40.039012,40.811985 40.051685,40.811985 C40.581866,40.811985 57.556053,40.811985 58.632753,40.811985 59.72648,40.811985 59.50699,39.999512 59.50699,39.999512 59.50699,39.999512 59.50699,7.9992043 59.50699,6.4999697 59.50699,5.0007197 57.944992,4.9379918 57.944992,4.9379923 L40.039012,4.9687454 40.039012,4.9374997 z M15.684061,1.1927187E-06 L40.038983,1.1927187E-06 40.038983,4.9374997 40.038983,4.9687454 22.11689,4.9379923 C22.11689,4.9379918 20.553484,5.0007197 20.553484,6.4999697 20.553484,7.9992048 20.553484,39.999512 20.553484,39.999512 20.553484,39.999512 20.333797,40.811985 21.428511,40.811985 22.506178,40.811985 39.49564,40.811985 40.026298,40.811985 L40.038983,40.811985 40.038983,80 0.0030136108,80 0.0030136108,42.88749 0.021453857,42.598698 C0.23134613,41.025742 1.9104805,41.025982 1.9104805,41.025982 1.9104805,41.025982 12.044931,41.025982 13.415968,41.025982 14.787006,41.025982 14.787251,39.655991 14.787251,39.655991 14.787251,39.655991 14.787251,1.7708251 14.787251,0.89599533 14.787251,0.075826826 15.575487,0.0059787725 15.674017,0.00045084767 z M64.372009,0 L80.041996,0 C80.041996,1.8865438E-07 80.041996,41.408734 80.041996,42.934731 L80.038982,42.88749 80.038982,1.1927187E-06 z M0,0 L15.684088,0 0.0030136108,1.1927187E-06 0.0030136108,42.88749 0,42.934731 C0,41.408734 0,1.8865438E-07 0,0 z" Fill="#FF929292" Margin="0,0,0,0.013" Stretch="Fill" Stroke="Black" StrokeThickness="0" RenderTransformOrigin="0.5,-3.028"/>
</Grid>
Would be nice if anyone could help me out :)
Thanks in advance!

Here is the code which I used to change the background when your user control is enabled or disabled.
What I did was add the Style (RectangleStyle1) and triggers to the Rectangle. I removed setting the rectangle's Fill from the declaration as that will override any changes the Style tries to make.
Add this style to the UserControl.Resources
<Style x:Key="RectangleStyle1" TargetType="{x:Type Rectangle}">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Setter Property="Fill" Value="#FF666666" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Fill" Value="White" />
</Trigger>
</Style.Triggers>
</Style>
Replace your rectangle declaration with
<Rectangle x:Name="rectangle"
Margin="0,0,0,0.013"
Stroke="Black"
StrokeThickness="0" Style="{DynamicResource RectangleStyle1}" />
If the rectangle is serving the purpose of background only, you could remove the rectangle and make the Grid (LayoutRoot) non transparent and style it using the Background instead of Fill.

how to refresh wpf data trigger ?

i have the grid with storyboard as below.
<Grid x:Name="grd_Order" Grid.Column="2" Height="16" Margin="0,-2,0,0" Visibility="Collapsed" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.Resources>
<Storyboard x:Key="stry_OrderMsgShowHide" RepeatBehavior="3x">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Visibility)" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:2" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<Grid.Style>
<Style >
<Style.Triggers>
<DataTrigger Value="True" Binding="{Binding Path=BlinkOrderAlert,Mode=TwoWay}">
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="stry_BlinkOrdAlert" Storyboard="{StaticResource stry_OrderMsgShowHide}"/>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
and in my ViewModel.cs,
private bool blinkOrderAlert;
public bool BlinkOrderAlert
{
get
{
return blinkOrderAlert;
}
set
{
if (blinkOrderAlert == value)
return;
this.blinkOrderAlert = value;
this.RaisePropertyChanged(this, new PropertyChangedEventArgs("BlinkOrderAlert"));
}
}
public void BlinkOrdAlert()
{
this.BlinkOrderAlert=false;
this.BlinkOrderAlert = true;
}
public ViewModel()
{
this.BlinkOrderAlert=true;
}
and it only works first time when constructor is initialized. Whenever i call the BlinkOrdAlert function, it's not working anymore. How can i modify the datatrigger to run storyboard everytime i call the function? Thanks.

Consider adding the following data trigger to you style.
The Following data trigger will remove the story board when the BlinkOrderAlert value set to false and when the value was true it will add story board.
hope this will help.
<DataTrigger Value="False" Binding="{Binding Path=BlinkOrderAlert,Mode=TwoWay}">
<DataTrigger.EnterActions>
<RemoveStoryboard BeginStoryboardName="stry_BlinkOrdAlert"></RemoveStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>

You should not really use a DataTrigger for this at all, you try use a property like an event which is quite a hack. Unfortunately the native triggers are, let's say not optimal, so you cannot use an EventTrigger as it only supports RoutedEvents.
But you might be able to use ViewModel-events using the EventTrigger from Blend's Interactivity (Blend 3 SDK) instead, so that might be worth a try.

Develop Reference

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

WPF Fade Out on a control - c#

Related

How to make button and background flash in wpf

Access a Control.Property inside a UserControl from Parent Control

Reuse animations in Windows 8

Change background color for a custom UserControl if inactive?

how to refresh wpf data trigger ?

Categories

Resources