We Keep Coding

Blink Image element every N seconds once time WPF

I try to make style to Blink image every 0.5 sec for duration 6 second
but I can't stop animation although I set Image Element style to null animation still continue
this Style I have try
<Style x:Key="imgBlink" TargetType="Image">
<Style.Triggers>
<Trigger Property="Opacity" Value="1">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard Name="blinkEffect" RepeatBehavior="1x">
<DoubleAnimation Storyboard.TargetProperty="(Image.Opacity)" From="1" To="0" Duration="0:0:0.5" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
and this is Code when I assign Style to image element
private void BtnLocateDevice_Click(object sender, RoutedEventArgs e)
{
try
{
if (this.ImageElementReference != null)
{
var sb = Application.Current.FindResource("imgBlink") as Style;
if (sb != null)
{
this.ImageElementReference.Style = sb;
}
}
}
catch (Exception ex)
{
writeDebugLog(ex.Message);
writeDebugLog(ex.StackTrace);
}
}
Anyone can help me thank you.

Setting the style to null should do the work! also you can try:
Define a defaul style
<Style x:Key="imgNoBlink" TargetType="Image" />
Then, you can use it to show non-animated image..
if (Application.Current.FindResource("imgNoBlink") is Style sb)
ImageElementReference.Style = sb;
Or
ImageElementReference.Style = new Style(typeof(Image));
Or, you can clear the EnterActions for Opacity property for the current style
var opacityTrigger = ImageElementReference.Style.Triggers
.First(t => ((Trigger)t).Property.Name == "Opacity");
opacityTrigger.EnterActions.Clear();

Usercontrol - notify property change from ViewModel

I'm trying to implement custom Border, which binds to bool property in ViewModel, and whenever this property changes I want to do some animation with Border.
ViewModel property has OnPropertyChanged interface, It looks like this:
public bool Enable_control
{
get { return _enable_ctl; }
set { _enable_ctl = value; OnPropertyChanged(); }
}
private bool _enable_ctl;
This is how I bind custom Border in xaml:
<cust_border:Border_slide ShowSlide={Binding Enable_control}"/>
And this is my custom border control code:
public class Border_slide : Border
{
public Border_slide()
{
}
public bool ShowSlide
{
get { return (bool)GetValue(ShowSlideProperty); }
set { SetValue(ShowSlideProperty, value);}
}
public static readonly DependencyProperty ShowSlideProperty =
DependencyProperty.Register("ShowSlide", typeof(bool), typeof(Border_slide), new
FrameworkPropertyMetadata(true, new PropertyChangedCallback(ShowSlideChanged)));
private static void ShowSlideChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
//I would like to do animation of control when property of ViewModel changes - presumably here,
//but PropertyChangedCallback gets triggered only once - not on every Enable_control change!
}
}
So, question is: how do you properly update UserControl's dependency property from Viewmodel property change, in order to do something with UserControl next?

There was a time when I did something similar to yours.
In my case, I hope it will help since I solved it this way. But it can be different from what you think, so please let me know if there's anything I missed!
And I have uploaded my sample source code to GitHub.
Here sample sourcecode. https://github.com/ncoresoftsource/stackoverflowsample/tree/main/src/answers/dependency-border-animation
ViewModel
public class MainViewModel : ObservableObject
{
private bool _enable_ctl;
public bool Enable_control
{
get { return _enable_ctl; }
set { _enable_ctl = value; OnPropertyChanged(); }
}
}
MainWindow
I used Label instead of Border. Because Border cannot use ControlTemplate, it can be constrained to use and expand animation.
<CheckBox Content="Switch" IsChecked="{Binding Enable_control}"/>
<Label Style="{StaticResource SLIDER}"/>
App.xaml
<Style TargetType="Label" x:Key="SLIDER">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="#AAAAAA"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Width" Value="100"/>
<Setter Property="Height" Value="100"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Label">
<Border x:Name="border" Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
Opacity="0">
<ContentPresenter/>
</Border>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Enable_control}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0" To="1" Duration="00:00:0.5"
Storyboard.TargetName="border"
Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="1" To="0" Duration="00:00:0.5"
Storyboard.TargetName="border"
Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Solved. Clemens was partially right - nothing was wrong with my code, property did get notified with changes. My problems were elsewhere - with a variable that didn't get value before property changed, and default value of dependency property. I sorted out those things now, and It works as expected.
Here is my full code, might get useful to someone, at least I find It so:
It's a custom Border, which can be used for a sliding animation of left Margin. Meaning you can use this Border to slide some menues to View from left side to desired right location, just add controls inside It and you're ready to go. Code can be used for other controls too (Panel etc.), but I used Border since I can round corners or do other nice UI presentations with it easily.
Logic behind is that If you set MoveTo property, Border will slide to desired left Margin location. If you don't, then Border will slide to center of screen - meaning you can use this Border for sliding menues into Views that are centered or left aligned in yout MainWindow. That was actually whole point of creating It - because you cannot use dynamic values in animation To or From, since these are freezables. So I had to create this custom control, because I couldn't do an animation to screen center (width needs to be calculated first). Anyway, here It is:
public class Border_slide : Border
{
public Border_slide()
{
Loaded += Border_slide_Loaded;
}
private void Border_slide_Loaded(object sender, System.Windows.RoutedEventArgs e)
{
//Save starting Margin.Left
StartX = Margin.Left;
}
///<summary>Property for starting X location</summary>
private double StartX
{
get { return _startX; }
set { _startX = value; }
}
private double _startX;
public static DependencyProperty MoveToProperty =
DependencyProperty.Register("MoveTo", typeof(double), typeof(Border_slide), new PropertyMetadata(default(double)));
///<summary>Property thats sets to what Margin.Left we want move Border</summary>
public double MoveTo
{
get { return (double)GetValue(MoveToProperty); }
set { SetValue(MoveToProperty, value); }
}
public bool ShowSlide
{
get { return (bool)GetValue(ShowSlideProperty); }
set { SetValue(ShowSlideProperty, value); }
}
public static readonly DependencyProperty ShowSlideProperty =
DependencyProperty.Register("ShowSlide", typeof(bool), typeof(Border_slide), new FrameworkPropertyMetadata(true,
new PropertyChangedCallback(ShowSlideChanged)));
private static void ShowSlideChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var brd = d as Border_slide;
//Animate Margin, when Property changes
if (((bool)e.NewValue) == true) //When property is true, Border is allready at desired location, so we move It to first x- location
{
ThicknessAnimation back_to_start_X_location = new ThicknessAnimation
{
BeginTime = TimeSpan.FromSeconds(0),
Duration = TimeSpan.FromSeconds(1),
From = new Thickness(brd.Margin.Left, 0, 0, 0),
To = new Thickness(brd.StartX, 0, 0, 0)
};
brd.BeginAnimation(Border.MarginProperty, back_to_start_X_location);
}
else //If property is False we need to move Border to desired X- location
{
//If we don't set MoveTo property then move Border to center of screen
if (brd.MoveTo == default(double))
{
var X_center = Application.Current.MainWindow.ActualWidth / 2 - brd.Width / 2;
ThicknessAnimation to_center_X_location = new ThicknessAnimation
{
BeginTime = TimeSpan.FromSeconds(0),
Duration = TimeSpan.FromSeconds(1),
From = new Thickness(brd.ZacetniX, 0, 0, 0),
To = new Thickness(X_center, 0, 0, 0)
};
brd.BeginAnimation(Border.MarginProperty, to_center_X_location);
}
else //If MoveTo property is set then move Border to desired X-location
{
ThicknessAnimation to_desired_X_location = new ThicknessAnimation
{
BeginTime = TimeSpan.FromSeconds(0),
Duration = TimeSpan.FromSeconds(1),
From = new Thickness(brd.StartX, 0, 0, 0),
To = new Thickness(brd.MoveTo, 0, 0, 0)
};
brd.BeginAnimation(Border.MarginProperty, to_desired_X_location);
}
}
}
}
So, as you see - Border moves depending on what you set as start Margin.Left (that is a must) and/or MoveTo property, with binding to some bool value from ViewModel. In my case, I slide this Border when I disable all my other controls in View - so that I can make blur effect on View too. If you will use It for different things, than be careful about default value of ShowSlide property (mine is true). And surely you can re-adjust control for different things too...
E.g. usage in XAML:
<my_controls:Border_slide Margin="-500,0,0,0" MoveTo="5" ShowSlide="{Binding Enable_control}">

fade in out UWP with asynch method to populate the Xaml control

I am missing something there can anyone help?
In myFlipview I am trying to display messages and I would like to make invisible the moment the flipview goes to his next item
<FlipView x:Name="fvWelcome" VerticalAlignment="Center" >
<FlipView.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="fvWelcome"
Storyboard.TargetProperty="(FlipView.Opacity)"
AutoReverse="False"
From="0" To="1" Duration="0:0:4"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</FlipView.Triggers>
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
<FlipView.ItemTemplate >
<DataTemplate>
<Grid>
<TextBox x:Name="GuestNameTextBox"
Grid.Row="1"
Margin="252,0,0,0"
Foreground="White"
FontFamily="Segoe UI"
BorderBrush="#FF1F4E79"
BorderThickness="0" Text="{Binding}"
VerticalAlignment="Center" FontSize="84"
TextWrapping="Wrap" AcceptsReturn="True"
Background="#FF1F4E79"
>
<TextBox.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="GuestNameTextBox"
Storyboard.TargetProperty="(TextBox.Opacity)"
AutoReverse="False"
From="0" To="1" Duration="0:0:4"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBox.Triggers>
</TextBox>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
in My mainPage c# side I've got this
public sealed partial class MainPage : Page
{
private DispatcherTimer _welcomeTimer;
public MainPage()
{
this.InitializeComponent();
StartWelcomeGuest();
}
private void StartWelcomeGuest()
{
List<string> myList = new List<string>();
myList.Add("Un");
myList.Add("deux");
myList.Add("trois");
myList.Add("quatre");
myList.Add("cinq");
myList.Add("six");
myList.Add("sept");
fvWelcome.ItemsSource = myList;
fvWelcome.SelectedIndex = 0;
_welcomeTimer = new DispatcherTimer()
{
Interval = TimeSpan.FromSeconds(4)
};
_welcomeTimer.Tick += __welcomeTimer_Tick;
_welcomeTimer.Start();
}
private void __welcomeTimer_Tick(object sender, object e)
{
if (fvWelcome.SelectedIndex < fvWelcome.Items.Count - 1)
{
fvWelcome.SelectedIndex++;
}
else
{
//_welcomeFade.Stop();
_welcomeTimer.Stop();
}
}
}
I've got the fade in /out effect synchronized with the visbility of the fliView and the textbox how can I do the same with an async method to populate my FlipView
private async Task<List<string>> GuestGreetings()
{
IList<ServiceNameGuest.MyObject> myvalue = await ServiceNameGuest.GetBriefingsByDateAndCenter
(new DateTime(2016, 03, 14), new DateTime(2016, 03, 18), "Brussels");
foreach (var item in myvalue)
{
ListName.Add(item.BriefingTitle);
}
ListName = ListName.Distinct().ToList();
if (App.AddedGuest.Count>0)
{
foreach (var item in App.AddedGuest)
{
if(item!="")
ListName.Add( item);
};
}
return ListName;
}
private async void UserControl_Loaded(object sender, RoutedEventArgs e)
{
try
{
fvWelcome.ItemsSource = await GuestGreetings();
}
catch (Exception ex)
{
throw ex;
}
this.StartWelcomeGuest();
}
just because to populate my flipview I used an asnych method ,I am losing my fade in/out effect, I thought I could store my data in DB but there must be an easier way do you have an idea

I used a static variable to store my guestname instead of db as I thaught initially

eventually I understood the problem, as I was dealing with seconds I had to synchronize with my storyboard,
*give a name to the storyboard :FlpVOpacity
<FlipView x:Name="fvWelcome" VerticalAlignment="Center" Background="#FF1F4E79" >
<FlipView.Triggers>
<!-- Theme animations like this can use the default behavior like
this example or you could use properties like BeginTime and
Duration to tweak when and how quickly the animation occures.
If you want more control over a fade animation (e.g. just partial
fade), you will need to use DoubleAnimation to animate the Opacity
property of the element you want to fade in or out. -->
<EventTrigger>
<BeginStoryboard>
<Storyboard x:Name="FlpVOpacity">
<DoubleAnimation
Storyboard.TargetName="fvWelcome"
Storyboard.TargetProperty="(FlipView.Opacity)"
AutoReverse="True"
From="0" To="1" Duration="0:0:4"
RepeatBehavior="1x" />
</Storyboard> </BeginStoryboard>
</EventTrigger>
</FlipView.Triggers>
then just where I am going to the next item in my flipView,i just used seek to my storyboard FlpVOpacity.Seek(TimeSpan.Zero);
private void __welcomeTimer_Tick(object sender, object e)
{
if (fvWelcome.SelectedIndex < fvWelcome.Items.Count - 1)
{
fvWelcome.SelectedIndex++;
FlpVOpacity.Seek(TimeSpan.Zero);
}
else
{
//_welcomeFade.Stop();
_welcomeTimer.Stop();
StartVideos();
}
}

How to animate TextBlock when its value changes in WinRT XAML?

I have the following Storyboard
<Storyboard x:Name="DeleteStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="StatusTextBlock">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
and the following TextBlock
<TextBlock x:Name="StatusTextBlock" Text="{Binding Status}">
Both are in SettingsFlyout not a Page.
I want the Storyboard to start when the TextBlock value changes.
I'm using MVVM, so please no code-behind stuff unless absolutely necessary.
I tries searching for hints and tried different combination of Behaviors, Triggers and VisualState but reached nowhere.

Again, not sure if we are 100% agreeing. But, still, here's how you can do it:
public class MyViewModel : INotifyPropertyChanged
{
public string Text { get; set; }
public event PropertyChangedEventHandler PropertyChanged;
}
public void Loaded()
{
var myBox = new TextBox();
var myAni = new Storyboard();
var MyVvm = new MyViewModel();
// sensible approach
myBox.TextChanged += (s, e) => myAni.Begin();
// forced approach
MyVvm.PropertyChanged += (s, e) =>
{
if (e.PropertyName.Equals("Text"))
myAni.Begin();
};
}
In the end, you are the developer of your own app. not me.
If you are willing to use behaviors, you can also do the same thing this way:
<Page.Resources>
<Storyboard x:Name="FadeAway">
<DoubleAnimation Duration="0:0:1" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBox" d:IsOptimized="True"/>
</Storyboard>
</Page.Resources>
<TextBox x:Name="textBox">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="TextChanged">
<Media:ControlStoryboardAction Storyboard="{StaticResource FadeAway}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</TextBox>
I suppose you can have your "pure" MVVM approach using a behavior. It gets you 100% XAML, and that makes some developers feel warm and fuzzy; I get that. And, I like behaviors. Look. I don't want to argue with you here, it's just that the top approach is certainly not "wrong".
Learn more about behaviors: http://blog.jerrynixon.com/2013/10/everything-i-know-about-behaviors-in.html
Best of luck.

Fading out a wpf window on close

I want to fade a window in/out in my application.
Fading in occurs on Window.Loaded and I wanted to fade out on close (Window.Closed or Window.Closing).
Fading in works perfectly, but Window.Closing is not allowed value for RoutedEvent property.
What RoutedEvent should I be using for Close?
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2" FillBehavior="HoldEnd" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Window.Closing">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:2" FillBehavior="HoldEnd" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
I get a error on , Value 'Window.Closing' cannot be assigned to property 'RoutedEvent'. Invalid event name.

Closing is not a routed event, so you can't use it in an EventTrigger. Perhaps you could start the storyboard in the handler of the ClosingEvent in the code-behind and cancel the event... something like that :
private bool closeStoryBoardCompleted = false;
private void Window_Closing(object sender, CancelEventArgs e)
{
if (!closeStoryBoardCompleted)
{
closeStoryBoard.Begin();
e.Cancel = true;
}
}
private void closeStoryBoard_Completed(object sender, EventArgs e)
{
closeStoryBoardCompleted = true;
this.Close();
}

I thought I'd add another solution of doing this, using behaviors from the Expression SDK and combining it with the solution from #Thomas. Using that, we can define a "CloseBehavior" that handles the code behind of starting a storyboard and closing the window when it's done.
using System.ComponentModel;
using System.Windows;
using System.Windows.Interactivity;
using System.Windows.Media.Animation;
namespace Presentation.Behaviours {
public class CloseBehavior : Behavior<Window> {
public static readonly DependencyProperty StoryboardProperty =
DependencyProperty.Register("Storyboard", typeof(Storyboard), typeof(CloseBehavior), new PropertyMetadata(default(Storyboard)));
public Storyboard Storyboard {
get { return (Storyboard)GetValue(StoryboardProperty); }
set { SetValue(StoryboardProperty, value); }
}
protected override void OnAttached() {
base.OnAttached();
AssociatedObject.Closing += onWindowClosing;
}
private void onWindowClosing(object sender, CancelEventArgs e) {
if (Storyboard == null) {
return;
}
e.Cancel = true;
AssociatedObject.Closing -= onWindowClosing;
Storyboard.Completed += (o, a) => AssociatedObject.Close();
Storyboard.Begin(AssociatedObject);
}
}
}
The behavior defines a storyboard as a dependency property, so we can set it in xaml and when the AssociatedObject (the window where we define the behavior) is closing, this storyboard is started using Storyboard.Begin(). Now, in xaml we simply add the behavior to the window using the following xaml
<Window x:Class="Presentation.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:behave="clr-namespace:Presentation.Behaviours"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
x:Name="window">
<Window.Resources>
<Storyboard x:Key="ExitAnimation">
<DoubleAnimation Storyboard.Target="{Binding ElementName='window'}"
Storyboard.TargetProperty="(Window.Opacity)"
Duration="0:0:1" From="1" To="0"/>
</Storyboard>
</Window.Resources>
<i:Interaction.Behaviors>
<behave:CloseBehavior Storyboard="{StaticResource ExitAnimation}"/>
</i:Interaction.Behaviors>
<Grid>
</Grid>
</Window>
Note the xml namespace i from the System.Windows.Interactivity dll, and also that the window is referenced, so it has to have a x:Name assigned. Now we simply add the behavior to every window on which we wish to execute a storyboard before closing the application, instead of copying the logic to every code-behind in each window.

I'm not an expert on WPF but I believe that unless you cancel the initial Closing event the window will be gone before the animation is even started.
Upon receiving the Window.Closing event, you should cancel the event and start the animation. When the animation is done you can close the window.

This is even simpler and shorter. Add a behavior as follows:
public class WindowClosingBehavior : Behavior<Window>
{
protected override void OnAttached()
{
AssociatedObject.Closing += AssociatedObject_Closing;
}
private void AssociatedObject_Closing(object sender, System.ComponentModel.CancelEventArgs e)
{
Window window = sender as Window;
window.Closing -= AssociatedObject_Closing;
e.Cancel = true;
var anim = new DoubleAnimation(0, (Duration)TimeSpan.FromSeconds(0.5));
anim.Completed += (s, _) => window.Close();
window.BeginAnimation(UIElement.OpacityProperty, anim);
}
protected override void OnDetaching()
{
AssociatedObject.Closing -= AssociatedObject_Closing;
}
}
Then in your window add a reference :
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:wt="clr-namespace:Desktop.Themes.WindowTask;assembly=Desktop.Themes"
Insert the behavior:
<i:Interaction.Behaviors>
<wt:WindowClosingBehavior />
</i:Interaction.Behaviors>

Set AutoReverse To "True"
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" AutoReverse="True" From="0" To="1" Duration="0:0:0.5" FillBehavior="HoldEnd" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>