Reusing WPF user control by parametrizing it does not work - wpf

In a MVVM application I have below user control.
From different areas of my WPF main Window, I am creating different instances of this user control so I would like to parametrize this user control in order to reuse it and show a different message in its label each time I create a new instance of it. In order to accomplish this, I have created a dependency property in the user control code-behind called MessageText and I have bound it to the label in the user control style.
User Control:
<UserControl x:Class="My.Apps.WPF.Demo.Controls.UCBusy"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300">
<UserControl.Resources>
<Color x:Key="FilledColor" A="255" B="222" R="176" G="196"/>
<Color x:Key="UnfilledColor" A="0" B="222" R="176" G="196"/>
<Style x:Key="BusyAnimationStyle" TargetType="Control">
<Setter Property="Background" Value="white" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Control">
<ControlTemplate.Resources>
<Storyboard x:Key="Animation0" BeginTime="00:00:00.0" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse0" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation1" BeginTime="00:00:00.2" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation2" BeginTime="00:00:00.4" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation3" BeginTime="00:00:00.6" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse3" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation4" BeginTime="00:00:00.8" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse4" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation5" BeginTime="00:00:01.0" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse5" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation6" BeginTime="00:00:01.2" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse6" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation7" BeginTime="00:00:01.4" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse7" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<ControlTemplate.Triggers>
<Trigger Property="IsVisible" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Animation0}" x:Name="Storyboard0" />
<BeginStoryboard Storyboard="{StaticResource Animation1}" x:Name="Storyboard1"/>
<BeginStoryboard Storyboard="{StaticResource Animation2}" x:Name="Storyboard2"/>
<BeginStoryboard Storyboard="{StaticResource Animation3}" x:Name="Storyboard3"/>
<BeginStoryboard Storyboard="{StaticResource Animation4}" x:Name="Storyboard4"/>
<BeginStoryboard Storyboard="{StaticResource Animation5}" x:Name="Storyboard5"/>
<BeginStoryboard Storyboard="{StaticResource Animation6}" x:Name="Storyboard6"/>
<BeginStoryboard Storyboard="{StaticResource Animation7}" x:Name="Storyboard7"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="Storyboard0"/>
<StopStoryboard BeginStoryboardName="Storyboard1"/>
<StopStoryboard BeginStoryboardName="Storyboard2"/>
<StopStoryboard BeginStoryboardName="Storyboard3"/>
<StopStoryboard BeginStoryboardName="Storyboard4"/>
<StopStoryboard BeginStoryboardName="Storyboard5"/>
<StopStoryboard BeginStoryboardName="Storyboard6"/>
<StopStoryboard BeginStoryboardName="Storyboard7"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<Grid>
<Canvas Height="60" Width="60">
<Canvas.Resources>
<Style TargetType="Ellipse">
<Setter Property="Width" Value="15"/>
<Setter Property="Height" Value="15" />
<Setter Property="Fill" Value="#009B9B9B" />
</Style>
</Canvas.Resources>
<Ellipse x:Name="ellipse0" Canvas.Left="1.75" Canvas.Top="21"/>
<Ellipse x:Name="ellipse1" Canvas.Top="7" Canvas.Left="6.5"/>
<Ellipse x:Name="ellipse2" Canvas.Left="20.5" Canvas.Top="0.75"/>
<Ellipse x:Name="ellipse3" Canvas.Left="34.75" Canvas.Top="6.75"/>
<Ellipse x:Name="ellipse4" Canvas.Left="40.5" Canvas.Top="20.75" />
<Ellipse x:Name="ellipse5" Canvas.Left="34.75" Canvas.Top="34.5"/>
<Ellipse x:Name="ellipse6" Canvas.Left="20.75" Canvas.Top="39.75"/>
<Ellipse x:Name="ellipse7" Canvas.Top="34.25" Canvas.Left="7" />
<Ellipse Width="39.5" Height="39.5" Canvas.Left="8.75" Canvas.Top="8" Visibility="Hidden"/>
<Label Content="{Binding Path=MessageText}"
FontSize="17"
Canvas.Left="60.5" Canvas.Top="11.5"
HorizontalContentAlignment="Center"
VerticalAlignment="Center"/>
</Canvas>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Control Style="{StaticResource BusyAnimationStyle}" />
</UserControl>
User Control Code-behind:
public partial class UCBusy : UserControl
{
public UCBusy()
{
InitializeComponent();
}
public static readonly DependencyProperty MessageTextProperty =
DependencyProperty.Register("MessageText", typeof(string), typeof(UCBusy));
public string MessageText
{
get
{
return this.GetValue(MessageTextProperty) as string;
}
set
{
this.SetValue(MessageTextProperty, value);
}
}
}
Then in the view, I bind the user control dependency property just created with properties in view model:
View Model:
<!-- Instance 1 -->
<controls:UCBusy MessageText="{Binding Path=WaitMessageText_1}" />
<!-- Instance 2 -->
<controls:UCBusy MessageText="{Binding Path=WaitMessageText_2}" />
... and in view model ...
View Model:
private string _waitMessageText_1 = "Hi there! I am message 1";
private string _waitMessageText_2 = "Hi there! I am message 2";
/// <summary>
/// Gets or sets the wait message text 1.
/// </summary>
public string WaitMessageText_1
{
get
{
return _waitMessageText_1;
}
set
{
if (_waitMessageText_1 == value) return;
_waitMessageText_1 = value;
OnPropertyChanged("WaitMessageText_1");
}
}
/// <summary>
/// Gets or sets the wait message text 2.
/// </summary>
public string WaitMessageText_2
{
get
{
return _waitMessageText_2;
}
set
{
if (_waitMessageText_2 == value) return;
_waitMessageText_2 = value;
OnPropertyChanged("WaitMessageText_2");
}
}
Finally, from view model I am setting these properties when needed but I note that my view is not being updated with the new messages I put, I mean, label in the user control does not display nothing. What am I doing wrong? I think I am missing something anywhere...
Note: In my case, Datacontext is always the same (I have set it to point to view model) so no need to change it each time I create a new instance of user control.

I would have you start by taking a look at a prior answer I provided that did a bunch of each step on a customized control, properties, styling, etc. It too is here at S/O
A couple of direct issues... Your "Style" declaration is based on a "Control", but your class is based on "Control", but your custom class is explicitly a "UCBusy" control, so "Control" has no idea what "MessageText" is for the style binding.
Also, you got by it partially because you declared as a different class type.
EDITED WITH FULL SAMPLE per my previous suggestions.
Here is source code that works to see all the parts. I created a new project "StackHelp" and have the following. Notice the merged dictionary is referring to the "component/MyClasses…" subfolder where my custom classes and corresponding .xaml resource dictionaries are created.
APP.XAML
<Application
x:Class="StackHelp.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MyMainWindow.xaml">
<Application.Resources>
<!-- Generic up front for the entire application for the theme / styles to be used -->
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/StackHelp;component/MyClasses/UCBusy.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
MyClasses\UCBusy.cs (within the subfolder in the project)
using System.Windows;
using System.Windows.Controls;
namespace StackHelp.MyClasses
{
public class UCBusy : UserControl
{
public UCBusy()
{
// just to default so style will allow us to see where this will present
// even just during design time sample.
MessageText = "My Sample Text";
}
public static readonly DependencyProperty MessageTextProperty
= DependencyProperty.Register("MessageText",
typeof(string), typeof(UCBusy));
public string MessageText
{
get { return GetValue(MessageTextProperty) as string; }
set { SetValue(MessageTextProperty, value); }
}
}
}
MyClasses\UCBusy.xaml (the xaml is specifically RESOURCE DICTIONARY item)
Two styles defined... a basic just as a stand-alone label just to see HOW the bindings get done... A SECOND one specifically to do your elaborate style. The "xmlns:myC" means the "myC" alias refers to the classes found within the "MyClasses" subfolder of the project per namespace.
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:myC="clr-namespace:StackHelp.MyClasses">
<!-- resource dictionary is in-itself a list of resources -->
<!-- Just a SIMPLE Style to test the proper bindings... as basic as possible to test context working -->
<Style TargetType="{x:Type myC:UCBusy}" x:Key="BusyAnimationStyleBasic">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type myC:UCBusy}" >
<Label Content="{TemplateBinding MessageText}"
FontSize="17"
HorizontalContentAlignment="Center"
VerticalAlignment="Center"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Color x:Key="FilledColor" A="255" B="222" R="176" G="196"/>
<Color x:Key="UnfilledColor" A="0" B="222" R="176" G="196"/>
<!-- Now, your elaborate style with all animations...-->
<Style TargetType="{x:Type myC:UCBusy}" x:Key="BusyAnimationStyle">
<Setter Property="Background" Value="white" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type myC:UCBusy}" >
<ControlTemplate.Resources>
<Storyboard x:Key="Animation0" BeginTime="00:00:00.0" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse0" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation1" BeginTime="00:00:00.2" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation2" BeginTime="00:00:00.4" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation3" BeginTime="00:00:00.6" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse3" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation4" BeginTime="00:00:00.8" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse4" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation5" BeginTime="00:00:01.0" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse5" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation6" BeginTime="00:00:01.2" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse6" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation7" BeginTime="00:00:01.4" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse7" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<ControlTemplate.Triggers>
<Trigger Property="IsVisible" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Animation0}" x:Name="Storyboard0" />
<BeginStoryboard Storyboard="{StaticResource Animation1}" x:Name="Storyboard1"/>
<BeginStoryboard Storyboard="{StaticResource Animation2}" x:Name="Storyboard2"/>
<BeginStoryboard Storyboard="{StaticResource Animation3}" x:Name="Storyboard3"/>
<BeginStoryboard Storyboard="{StaticResource Animation4}" x:Name="Storyboard4"/>
<BeginStoryboard Storyboard="{StaticResource Animation5}" x:Name="Storyboard5"/>
<BeginStoryboard Storyboard="{StaticResource Animation6}" x:Name="Storyboard6"/>
<BeginStoryboard Storyboard="{StaticResource Animation7}" x:Name="Storyboard7"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="Storyboard0"/>
<StopStoryboard BeginStoryboardName="Storyboard1"/>
<StopStoryboard BeginStoryboardName="Storyboard2"/>
<StopStoryboard BeginStoryboardName="Storyboard3"/>
<StopStoryboard BeginStoryboardName="Storyboard4"/>
<StopStoryboard BeginStoryboardName="Storyboard5"/>
<StopStoryboard BeginStoryboardName="Storyboard6"/>
<StopStoryboard BeginStoryboardName="Storyboard7"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
<!--<StackPanel Orientation="Horizontal">
<TextBlock Text="{TemplateBinding MessageText}"/>
</StackPanel>-->
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<Grid>
<Canvas Height="60" Width="60">
<Canvas.Resources>
<Style TargetType="Ellipse">
<Setter Property="Width" Value="15"/>
<Setter Property="Height" Value="15" />
<Setter Property="Fill" Value="#009B9B9B" />
</Style>
</Canvas.Resources>
<Ellipse x:Name="ellipse0" Canvas.Left="1.75" Canvas.Top="21"/>
<Ellipse x:Name="ellipse1" Canvas.Top="7" Canvas.Left="6.5"/>
<Ellipse x:Name="ellipse2" Canvas.Left="20.5" Canvas.Top="0.75"/>
<Ellipse x:Name="ellipse3" Canvas.Left="34.75" Canvas.Top="6.75"/>
<Ellipse x:Name="ellipse4" Canvas.Left="40.5" Canvas.Top="20.75" />
<Ellipse x:Name="ellipse5" Canvas.Left="34.75" Canvas.Top="34.5"/>
<Ellipse x:Name="ellipse6" Canvas.Left="20.75" Canvas.Top="39.75"/>
<Ellipse x:Name="ellipse7" Canvas.Top="34.25" Canvas.Left="7" />
<Ellipse Width="39.5" Height="39.5" Canvas.Left="8.75" Canvas.Top="8" Visibility="Hidden"/>
<Label Content="{TemplateBinding MessageText}"
FontSize="17"
Canvas.Left="60.5" Canvas.Top="11.5"
HorizontalContentAlignment="Center"
VerticalAlignment="Center"/>
</Canvas>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
MyMainWindow.xaml.cs (the main window for the startup of the application)
using System.ComponentModel;
using System.Windows;
namespace StackHelp
{
public partial class MyMainWindow : Window, INotifyPropertyChanged
{
public MyMainWindow()
{
DataContext = this;
InitializeComponent();
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
private string _waitMessageText_1 = "Hi there! I am message 1";
public string WaitMessageText_1
{
get
{
return _waitMessageText_1;
}
set
{
if (_waitMessageText_1 == value) return;
_waitMessageText_1 = value;
OnPropertyChanged("WaitMessageText_1");
}
}
private string _waitMessageText_2 = "Hi there! I am message 2";
public string WaitMessageText_2
{
get
{
return _waitMessageText_2;
}
set
{
if (_waitMessageText_2 == value) return;
_waitMessageText_2 = value;
OnPropertyChanged("WaitMessageText_2");
}
}
}
}
MyMainWindow.xaml (actual xaml for the main window)
Here, I have two instances, one using the BASIC style, second using the fully defined/spinner style.
<Window x:Class="StackHelp.MyMainWindow"
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:myC="clr-namespace:StackHelp.MyClasses"
Title="My Main Window" Height="250" Width="800">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<!-- Instance 1 using the BASIC style version-->
<myC:UCBusy MessageText="{Binding WaitMessageText_1}"
Grid.Column="0" Style="{StaticResource BusyAnimationStyleBasic}" />
<!-- Instance 2 using the FINAL style version-->
<myC:UCBusy MessageText="{Binding WaitMessageText_2}"
Grid.Column="1" Style="{StaticResource BusyAnimationStyle}"/>
</Grid>
</Window>
Hope this finishes jump-starting you on your own styles and implementations.

Related

WPF - Async load of usercontrol using ContentControl so a loading animation can be displayed while loading

I have a usercontrol with some buttons, textblocks and a ContentControl that will load other (3) different usercontrols within the same usercontrol. The buttons from the parent usercontrol will stay so I can keep iterating through the other (3) usercontrols. Those (3) usercontrols contain 1, 2, or 3 DataGrids with several row, and this may take a second or two to load (at least while debugging). I want to display an animation to indicate this. However, I cannot load those user controls async in order to display the animation, which waits until the usercontrol is loaded.
I don't see why my code wouldn't work.
The parent usercontrol looks like this:
And when I click one of the three buttons at the bottom, a different usercontrol loads within the parent usercontrol, using the ContentControl.
The parent user control is something like this:
<UserControl>
<DockPanel LastChildFill="True">
<Grid DockPanel.Dock="Top" >
<Control Visibility="{Binding LoadingVisilibity}" Style="{StaticResource BusyAnimationStyle}" Panel.ZIndex="10"/>
<ContentControl Content="{Binding ContentPanel}"></ContentControl>
</Grid>
</DockPanel>
</UserControl>
The BusyAnimationStyle just displays circles turning around.
<Style x:Key="BusyAnimationStyle" TargetType="{x:Type Control}">
<Setter Property="Background" Value="#9F000000"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Control">
<ControlTemplate.Resources>
<Storyboard x:Key="Animation0" BeginTime="00:00:00.0" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse0" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:0.8" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation1" BeginTime="00:00:00.1" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:00.8" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation2" BeginTime="00:00:00.2" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:00.8" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation3" BeginTime="00:00:00.3" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse3" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:00.8" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation4" BeginTime="00:00:00.4" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse4" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:00.8" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation5" BeginTime="00:00:00.5" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse5" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:00.8" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation6" BeginTime="00:00:00.6" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse6" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:00.8" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation7" BeginTime="00:00:00.7" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse7" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:00.8" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<ControlTemplate.Triggers>
<Trigger Property="IsVisible" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Animation0}" x:Name="Storyboard0" />
<BeginStoryboard Storyboard="{StaticResource Animation1}" x:Name="Storyboard1"/>
<BeginStoryboard Storyboard="{StaticResource Animation2}" x:Name="Storyboard2"/>
<BeginStoryboard Storyboard="{StaticResource Animation3}" x:Name="Storyboard3"/>
<BeginStoryboard Storyboard="{StaticResource Animation4}" x:Name="Storyboard4"/>
<BeginStoryboard Storyboard="{StaticResource Animation5}" x:Name="Storyboard5"/>
<BeginStoryboard Storyboard="{StaticResource Animation6}" x:Name="Storyboard6"/>
<BeginStoryboard Storyboard="{StaticResource Animation7}" x:Name="Storyboard7"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="Storyboard0"/>
<StopStoryboard BeginStoryboardName="Storyboard1"/>
<StopStoryboard BeginStoryboardName="Storyboard2"/>
<StopStoryboard BeginStoryboardName="Storyboard3"/>
<StopStoryboard BeginStoryboardName="Storyboard4"/>
<StopStoryboard BeginStoryboardName="Storyboard5"/>
<StopStoryboard BeginStoryboardName="Storyboard6"/>
<StopStoryboard BeginStoryboardName="Storyboard7"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Grid>
<Canvas Height="60" Width="60">
<Canvas.Resources>
<Style TargetType="Ellipse">
<Setter Property="Width" Value="15"/>
<Setter Property="Height" Value="15" />
<Setter Property="Fill" Value="#009B9B9B" />
</Style>
</Canvas.Resources>
<Ellipse x:Name="ellipse0" Canvas.Left="1.75" Canvas.Top="21"/>
<Ellipse x:Name="ellipse1" Canvas.Top="7" Canvas.Left="6.5"/>
<Ellipse x:Name="ellipse2" Canvas.Left="20.5" Canvas.Top="0.75"/>
<Ellipse x:Name="ellipse3" Canvas.Left="34.75" Canvas.Top="6.75"/>
<Ellipse x:Name="ellipse4" Canvas.Left="40.5" Canvas.Top="20.75" />
<Ellipse x:Name="ellipse5" Canvas.Left="34.75" Canvas.Top="34.5"/>
<Ellipse x:Name="ellipse6" Canvas.Left="20.75" Canvas.Top="39.75"/>
<Ellipse x:Name="ellipse7" Canvas.Top="34.25" Canvas.Left="7" />
<Ellipse Width="39.5" Height="39.5" Canvas.Left="8.75" Canvas.Top="8" Visibility="Hidden"/>
</Canvas>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
private Visibility loadingVisilibity;
public Visibility LoadingVisilibity
{
get => loadingVisilibity;
set
{
loadingVisilibity = value;
OnPropertyChanged(nameof(LoadingVisilibity));
}
}
To change the Content of the ContentControl, I have three buttons each like:
private ICommand firstBtnCommand;
public ICommand FirstViewBtnCommand
{
get
{
return firstBtnCommand ?? (firstBtnCommand = new CommandHandler((param) => ChangeView("first"), true));
}
}
And the function:
private async void ChangeView(string view)
{
LoadingVisilibity = Visibility.Visible;
await Application.Current.Dispatcher.InvokeAsync(()=>
{
if (view == "first") { ContentPanel.Content = this.firstViewModel; }
else if (view == "second") { ContentPanel.Content = this.secondViewModel; }
else { ContentPanel.Content = this.thirdViewModel; }
});
LoadingVisilibity = Visibility.Collapsed;
}
I also tried:
await Application.Current.Dispatcher.BeginInvoke(
new ThreadStart(() =>
{
if (view == "first") { ContentPanel.Content = this.firstViewModel; }
else if (view == "second") { ContentPanel.Content = this.secondViewModel; }
else { ContentPanel.Content = this.thirdViewModel; }
}));
However, the animation doesn't happen. Sometimes I can see a bit just after the elements are loaded, but not while the ContentControl is loading.
I have done this before and usually goes like:
await Task.Run(() =>
{
if (view == "first") { ContentPanel.Content = this.firstViewModel; }
else if (view == "second") { ContentPanel.Content = this.secondViewModel; }
else { ContentPanel.Content = this.thirdViewModel; }
});
However, in this case tells me
The calling thread cannot access this object because a different thread owns it
I am lost now after trying so many different things, and I don't see anything wrong with my code.
How can I load the animation while the ContentControl content is loading? Is there a better way of doing this? Surely this looks like the right approach.
Let me know if there is more information that I can provide.

WPF user control not being visible on Visibility property change

Firstly I have a MVVM application whose main WPF Window contains many grid embedded and nested.
In one of these grids I have placed a user control to overlap the entire grid content as below:
View (Main WPF Window):
<controls:UCBusy Grid.Row="1" Grid.RowSpan="12"
Grid.ColumnSpan="3"
Visibility="{Binding Path=WaitMessageVisibility}"
Width="auto" Height="auto"/>
In view model I have defined the property bound:
private Visibility _waitMessageVisibility = Visibility.Visible;
public Visibility WaitMessageVisibility
{
get
{
return _waitMessageVisibility;
}
set
{
if (_waitMessageVisibility == value) return;
_waitMessageVisibility = value;
OnPropertyChanged("WaitMessageVisibility");
}
}
As you can see by default the visibility is set to Visible.
So my user control (spiner with message text on the right) should be visible but instead it is not being visible. What am I doing wrong? In order to make user control visible I set Panel.ZIndex to a higher value (100) when user control is visible using a ControlTemplate Trigger. See below.
User Control:
<UserControl x:Class="My.Apps.WPF.Demo.Controls.UCBusy"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300">
<UserControl.Resources>
<Color x:Key="FilledColor" A="255" B="222" R="176" G="196"/>
<Color x:Key="UnfilledColor" A="0" B="222" R="176" G="196"/>
<Style x:Key="BusyAnimationStyle" TargetType="Control">
<Setter Property="Background" Value="white" />
<Setter Property="Visibility" Value="Collapsed"/>
<Setter Property="Panel.ZIndex" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Control">
<ControlTemplate.Resources>
<Storyboard x:Key="Animation0" BeginTime="00:00:00.0" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse0" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation1" BeginTime="00:00:00.2" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation2" BeginTime="00:00:00.4" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation3" BeginTime="00:00:00.6" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse3" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation4" BeginTime="00:00:00.8" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse4" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation5" BeginTime="00:00:01.0" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse5" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation6" BeginTime="00:00:01.2" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse6" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation7" BeginTime="00:00:01.4" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse7" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<ControlTemplate.Triggers>
<Trigger Property="IsVisible" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Animation0}" x:Name="Storyboard0" />
<BeginStoryboard Storyboard="{StaticResource Animation1}" x:Name="Storyboard1"/>
<BeginStoryboard Storyboard="{StaticResource Animation2}" x:Name="Storyboard2"/>
<BeginStoryboard Storyboard="{StaticResource Animation3}" x:Name="Storyboard3"/>
<BeginStoryboard Storyboard="{StaticResource Animation4}" x:Name="Storyboard4"/>
<BeginStoryboard Storyboard="{StaticResource Animation5}" x:Name="Storyboard5"/>
<BeginStoryboard Storyboard="{StaticResource Animation6}" x:Name="Storyboard6"/>
<BeginStoryboard Storyboard="{StaticResource Animation7}" x:Name="Storyboard7"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="Storyboard0"/>
<StopStoryboard BeginStoryboardName="Storyboard1"/>
<StopStoryboard BeginStoryboardName="Storyboard2"/>
<StopStoryboard BeginStoryboardName="Storyboard3"/>
<StopStoryboard BeginStoryboardName="Storyboard4"/>
<StopStoryboard BeginStoryboardName="Storyboard5"/>
<StopStoryboard BeginStoryboardName="Storyboard6"/>
<StopStoryboard BeginStoryboardName="Storyboard7"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<Grid>
<Canvas Height="60" Width="60">
<Canvas.Resources>
<Style TargetType="Ellipse">
<Setter Property="Width" Value="15"/>
<Setter Property="Height" Value="15" />
<Setter Property="Fill" Value="#009B9B9B" />
</Style>
</Canvas.Resources>
<Ellipse x:Name="ellipse0" Canvas.Left="1.75" Canvas.Top="21"/>
<Ellipse x:Name="ellipse1" Canvas.Top="7" Canvas.Left="6.5"/>
<Ellipse x:Name="ellipse2" Canvas.Left="20.5" Canvas.Top="0.75"/>
<Ellipse x:Name="ellipse3" Canvas.Left="34.75" Canvas.Top="6.75"/>
<Ellipse x:Name="ellipse4" Canvas.Left="40.5" Canvas.Top="20.75" />
<Ellipse x:Name="ellipse5" Canvas.Left="34.75" Canvas.Top="34.5"/>
<Ellipse x:Name="ellipse6" Canvas.Left="20.75" Canvas.Top="39.75"/>
<Ellipse x:Name="ellipse7" Canvas.Top="34.25" Canvas.Left="7" />
<Ellipse Width="39.5" Height="39.5" Canvas.Left="8.75" Canvas.Top="8" Visibility="Hidden"/>
<Label Content="{Binding Path=WaitMessageText}"
FontSize="17"
Canvas.Left="60.5" Canvas.Top="11.5"
HorizontalContentAlignment="Center"
VerticalAlignment="Center"/>
</Canvas>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Control Style="{StaticResource BusyAnimationStyle}" />
</UserControl>

WPF animation with custom text on the right cause text to not appear when overlapping entire grid content

I have a user control which contains an animation that I found here by HAdes (I have done some little changes, little color).
User Control:
<UserControl x:Class="My.Apps.WPF.Demo.Controls.UCBusy"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300">
<UserControl.Resources>
<Color x:Key="FilledColor" A="255" B="222" R="176" G="196"/>
<Color x:Key="UnfilledColor" A="0" B="222" R="176" G="196"/>
<!--<Color x:Key="FilledColor" A="255" B="155" R="155" G="155"/>
<Color x:Key="UnfilledColor" A="0" B="155" R="155" G="155"/>-->
<!-- Value="#7F000000"-->
<Style x:Key="BusyAnimationStyle" TargetType="Control">
<Setter Property="Background" Value="white" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Control">
<ControlTemplate.Resources>
<Storyboard x:Key="Animation0" BeginTime="00:00:00.0" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse0" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation1" BeginTime="00:00:00.2" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation2" BeginTime="00:00:00.4" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation3" BeginTime="00:00:00.6" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse3" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation4" BeginTime="00:00:00.8" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse4" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation5" BeginTime="00:00:01.0" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse5" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation6" BeginTime="00:00:01.2" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse6" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation7" BeginTime="00:00:01.4" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse7" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<ControlTemplate.Triggers>
<Trigger Property="IsVisible" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Animation0}" x:Name="Storyboard0" />
<BeginStoryboard Storyboard="{StaticResource Animation1}" x:Name="Storyboard1"/>
<BeginStoryboard Storyboard="{StaticResource Animation2}" x:Name="Storyboard2"/>
<BeginStoryboard Storyboard="{StaticResource Animation3}" x:Name="Storyboard3"/>
<BeginStoryboard Storyboard="{StaticResource Animation4}" x:Name="Storyboard4"/>
<BeginStoryboard Storyboard="{StaticResource Animation5}" x:Name="Storyboard5"/>
<BeginStoryboard Storyboard="{StaticResource Animation6}" x:Name="Storyboard6"/>
<BeginStoryboard Storyboard="{StaticResource Animation7}" x:Name="Storyboard7"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="Storyboard0"/>
<StopStoryboard BeginStoryboardName="Storyboard1"/>
<StopStoryboard BeginStoryboardName="Storyboard2"/>
<StopStoryboard BeginStoryboardName="Storyboard3"/>
<StopStoryboard BeginStoryboardName="Storyboard4"/>
<StopStoryboard BeginStoryboardName="Storyboard5"/>
<StopStoryboard BeginStoryboardName="Storyboard6"/>
<StopStoryboard BeginStoryboardName="Storyboard7"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<Grid>
<Canvas Height="60" Width="60">
<Canvas.Resources>
<Style TargetType="Ellipse">
<Setter Property="Width" Value="15"/>
<Setter Property="Height" Value="15" />
<Setter Property="Fill" Value="#009B9B9B" />
</Style>
</Canvas.Resources>
<Ellipse x:Name="ellipse0" Canvas.Left="1.75" Canvas.Top="21"/>
<Ellipse x:Name="ellipse1" Canvas.Top="7" Canvas.Left="6.5"/>
<Ellipse x:Name="ellipse2" Canvas.Left="20.5" Canvas.Top="0.75"/>
<Ellipse x:Name="ellipse3" Canvas.Left="34.75" Canvas.Top="6.75"/>
<Ellipse x:Name="ellipse4" Canvas.Left="40.5" Canvas.Top="20.75" />
<Ellipse x:Name="ellipse5" Canvas.Left="34.75" Canvas.Top="34.5"/>
<Ellipse x:Name="ellipse6" Canvas.Left="20.75" Canvas.Top="39.75"/>
<Ellipse x:Name="ellipse7" Canvas.Top="34.25" Canvas.Left="7" />
<Ellipse Width="39.5" Height="39.5" Canvas.Left="8.75" Canvas.Top="8" Visibility="Hidden"/>
</Canvas>
<Label Content="{Binding Path=Text}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<!--<Label Content="Waiting . . ." HorizontalAlignment="Center" VerticalAlignment="Center"/>-->
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<Control Style="{StaticResource BusyAnimationStyle}">
</Control>
<TextBlock Text="Waiting . . ." VerticalAlignment="Center" FontSize="20" Margin="10" />
</StackPanel>
</UserControl>
As you can see above in the last lines, I am trying to put a message "Waiting . . ." to the right of the animation so I have used a StackPanel and Orientation set as Horizontal. Ok, no problem until here.
Now I embed this user control into another user control (see below) and I want to overlap the entire content of a grid with the user control UCBusy so I set for it Panel.ZIndex="100". UCBusy appears at the front but only the spinner, the text on the right of the spinner does not appear. Why?
<UserControl x:Class="My.Apps.WPF.Demo.Controls.UCData"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:My.Apps.WPF.Demo.Controls"
Width="700" Height="250">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<!-- 6% -->
<ColumnDefinition Width="0.6*" />
<!-- 47% -->
<ColumnDefinition Width="*" />
<!-- 47% -->
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<controls:UCBusy Grid.Row="1" Grid.RowSpan="12"
Grid.ColumnSpan="3"
Panel.ZIndex="100"
Visibility="Visible"
Width="auto" Height="auto"/>
<!-- here grid components -->
</Grid>
</UserControl>

ListBox style in WPF - MouseLeave and UnSelect fadeout

I'm styling a listbox to have some effects like MouseLeave and UnSelect fadeout.
It works when no item selected. But once some items are selected one by one, effects not working for them anymore! even if they're not selected.
Ideal behavior is when, items behave constantly in response to events and property changes.
I want to have List Box items that respond to MouseOver and MouseLeave events when they're not selected, and respond to Unselect property change.
Resourse Dictionary:
<ResourceDictionary>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Color x:Key="DisabledControlLightColor-LS1">#FFE8EDF9</Color>
<Color x:Key="SelectedBackgroundColor-LS1">#FFC5CBF9</Color>
<Color x:Key="MouseOverBackgroundColor-LS1">#FFE5E9F7</Color>
<Color x:Key="SelectedUnfocusedColor-LS1">#FFDDDDDD</Color>
<Color x:Key="UnSelectedBackgroundColor-LS1">#00C5CBF9</Color>
<Color x:Key="ControlLightColor-LS1">White</Color>
<Color x:Key="ControlMediumColor-LS1">#FF7381F9</Color>
<Color x:Key="BorderMediumColor-LS1">#FF888888</Color>
<Color x:Key="DisabledBorderLightColor-LS1">#FFAAAAAA</Color>
<SolidColorBrush x:Key="ListBorder" Color="#828790"/>
<Style x:Key="LS1-MS" TargetType="ListBox">
<Setter Property="ItemContainerStyle" Value="{DynamicResource LSItem-LS1}"/>
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="MinWidth" Value="120" />
<Setter Property="MinHeight" Value="95" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border Name="Border" BorderThickness="1" CornerRadius="2">
<Border.Background>
<SolidColorBrush Color="{StaticResource ControlLightColor-LS1}" />
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="{StaticResource BorderMediumColor-LS1}" />
</Border.BorderBrush>
<ScrollViewer Margin="0" Focusable="false">
<StackPanel Margin="2" IsItemsHost="True" />
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<SolidColorBrush Color="{StaticResource DisabledControlLightColor-LS1}" />
</Setter.Value>
</Setter>
<Setter TargetName="Border" Property="BorderBrush">
<Setter.Value>
<SolidColorBrush Color="{DynamicResource DisabledBorderLightColor-LS1}" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="LSItem-LS1" TargetType="ListBoxItem">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ControlTemplate.Resources>
<Storyboard x:Key="MouseEnterBC">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource MouseOverBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MouseLeaveFadeOut">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="SelectBC">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="unSelectBcFadeOut">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Border x:Name="Border" Padding="1" SnapsToDevicePixels="true" BorderThickness="1">
<Border.Background>
<SolidColorBrush Color="{DynamicResource UnSelectedBackgroundColor-LS1}"/>
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource UnSelectedBackgroundColor-LS1}"/>
</Border.BorderBrush>
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.ExitActions>
<BeginStoryboard x:Name="MouseLeaveFadeOut_BeginStoryboard3" Storyboard="{StaticResource MouseLeaveFadeOut}"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard x:Name="MouseLeaveFadeOut_BeginStoryboard" Storyboard="{StaticResource MouseEnterBC}"/>
</Trigger.EnterActions>
</Trigger>
<EventTrigger RoutedEvent="Selector.Selected">
<BeginStoryboard x:Name="SelectBC_BeginStoryboard2" Storyboard="{StaticResource SelectBC}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Selector.Unselected">
<BeginStoryboard x:Name="MouseLeaveFadeOut_BeginStoryboard1" Storyboard="{StaticResource MouseLeaveFadeOut}"/>
<StopStoryboard BeginStoryboardName="SelectBC_BeginStoryboard2"/>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
MainWindow.Xaml
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ListBox Style="{DynamicResource LS1-MS}" Margin="42,10,72,10">
<ListBoxItem FlowDirection="RightToLeft" Content="Test List Box Items"/>
<ListBoxItem Content="Test List Box Items"/>
<ListBoxItem FlowDirection="RightToLeft" Content="Test List Box Items"/>
<ListBoxItem FlowDirection="RightToLeft" Content="Test List Box Items"/>
<ListBoxItem FlowDirection="RightToLeft" Content="Test List Box Items"/>
<ListBoxItem FlowDirection="RightToLeft" Content="Test List Box Items"/>
<ListBoxItem Content="Test List Box Items"/>
<ListBoxItem Content="Test List Box Items"/>
<ListBoxItem Content="Test List Box Items"/>
</ListBox>
</Grid>
You are never stopping the storyboards, so eventually they are all running.I have added file FillBehavior="Stop" in storyboard.You can set the FillBehavior of the Storyboards to Stop so that the Storyboard will stop setting the value after it completes.
<Style x:Key="LSItem-LS1" TargetType="ListBoxItem">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ControlTemplate.Resources>
<Storyboard x:Key="MouseEnterBC">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource MouseOverBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MouseLeaveFadeOut" FillBehavior="Stop">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="SelectBC">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="unSelectBcFadeOut" FillBehavior="Stop">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Border x:Name="Border" Padding="1" SnapsToDevicePixels="true" BorderThickness="1">
<Border.Background>
<SolidColorBrush Color="{DynamicResource UnSelectedBackgroundColor-LS1}"/>
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource UnSelectedBackgroundColor-LS1}"/>
</Border.BorderBrush>
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsSelected" Value="False" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard x:Name="MouseLeaveFadeOut_BeginStoryboard" Storyboard="{StaticResource MouseEnterBC}"/>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard x:Name="MouseLeaveFadeOut_BeginStoryboard3" Storyboard="{StaticResource MouseLeaveFadeOut}"/>
</MultiTrigger.ExitActions>
</MultiTrigger>
<Trigger Property="IsSelected" Value="True">
<Trigger.EnterActions>
<BeginStoryboard x:Name="SelectBC_BeginStoryboard2" Storyboard="{StaticResource SelectBC}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource MouseLeaveFadeOut}"></BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Display gif image

When I developed my WPF PC application, I used the following code to display my gif image, as I realized that there is no easy way of doing this:-
XAML:
<StackPanel Height="25" Name="stkProgressBar">
<wfi:WindowsFormsHost Background="Transparent" HorizontalAlignment="Center">
<winForms:PictureBox x:Name="pictureBoxLoading" Visible="False">
</winForms:PictureBox>
</wfi:WindowsFormsHost>
</StackPanel>
XAML.cs:
private void Page_Loaded(object sender, RoutedEventArgs e)
{
this.pictureBoxLoading.Image = Properties.Resources.progressbar;
}
Now when I use the same approach to display the image in my WPF Browser (XBAP) application, it is not loading the page because of this xaml code? Any ideas why is that so and if there is any other way to display GIFs on a XBAP page?
Thanks,
Abhi.
==================
Updated at 27/07/2010 11:AM
Now I tried the following code:-
XAML:
<Image Name="Image1"></Image>
XAML.cs:
Stream imageStreamSource = new FileStream(#"C:\Inetpub\ExchangeRate\ExchangeRate\Image\progressbar.gif", FileMode.Open, FileAccess.Read, FileShare.Read);
GifBitmapDecoder decoder = new GifBitmapDecoder(imageStreamSource, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);
Int32Animation anim = new Int32Animation(0, decoder.Frames.Count - 1, new Duration(new TimeSpan(0, 0, 0, decoder.Frames.Count / 10, (int)((decoder.Frames.Count / 10.0 - decoder.Frames.Count / 10) * 1000))));
anim.RepeatBehavior = RepeatBehavior.Forever;
BitmapSource bitmapSource = decoder.Frames[0];
Image1.Source = bitmapSource;
Image1.Stretch = Stretch.None;
It shows the image alright, but is not animated. I would appreciate any help in this regard.
Abhi.
After toiling for a day I worked it out using a different approach. Instead of using a gif image, I created a user control as follows:-
<UserControl.Resources>
<Color x:Key="FilledColor" A="255" B="112" R="147" G="160"/>
<Color x:Key="UnfilledColor" A="0" B="112" R="147" G="160"/>
<Storyboard x:Key="Animation0" FillBehavior="Stop" BeginTime="00:00:00.0" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="_00" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation1" BeginTime="00:00:00.2" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="_01" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation2" BeginTime="00:00:00.4" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="_02" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation3" BeginTime="00:00:00.6" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="_03" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation4" BeginTime="00:00:00.8" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="_04" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation5" BeginTime="00:00:01.0" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="_05" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation6" BeginTime="00:00:01.2" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="_06" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation7" BeginTime="00:00:01.4" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="_07" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource Animation0}"/>
<BeginStoryboard Storyboard="{StaticResource Animation1}"/>
<BeginStoryboard Storyboard="{StaticResource Animation2}"/>
<BeginStoryboard Storyboard="{StaticResource Animation3}"/>
<BeginStoryboard Storyboard="{StaticResource Animation4}"/>
<BeginStoryboard Storyboard="{StaticResource Animation5}"/>
<BeginStoryboard Storyboard="{StaticResource Animation6}"/>
<BeginStoryboard Storyboard="{StaticResource Animation7}"/>
</EventTrigger>
</UserControl.Triggers>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto" MinWidth="150" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Canvas Grid.Row="1" Grid.Column="1" Height="20" HorizontalAlignment="Left" VerticalAlignment="Top">
<Canvas.Resources>
<Style TargetType="Ellipse">
<Setter Property="Width" Value="15"/>
<Setter Property="Height" Value="15" />
<Setter Property="Fill" Value="#FFFFFFFF" />
</Style>
<Style TargetType="Rectangle">
<Setter Property="Width" Value="12"/>
<Setter Property="Height" Value="13" />
<Setter Property="Fill" Value="#FFFFFFFF" />
<Setter Property="RadiusX" Value="2" />
<Setter Property="RadiusY" Value="2" />
</Style>
</Canvas.Resources>
<Rectangle x:Name="_00" Canvas.Top="6" Canvas.Left="15"></Rectangle>
<Rectangle x:Name="_01" Canvas.Top="6" Canvas.Left="30"></Rectangle>
<Rectangle x:Name="_02" Canvas.Top="6" Canvas.Left="45"></Rectangle>
<Rectangle x:Name="_03" Canvas.Top="6" Canvas.Left="60"></Rectangle>
<Rectangle x:Name="_04" Canvas.Top="6" Canvas.Left="75"></Rectangle>
<Rectangle x:Name="_05" Canvas.Top="6" Canvas.Left="90"></Rectangle>
<Rectangle x:Name="_06" Canvas.Top="6" Canvas.Left="105"></Rectangle>
<Rectangle x:Name="_07" Canvas.Top="6" Canvas.Left="120"></Rectangle>
</Canvas>
<!-- <TextBlock Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Foreground="#AAA" TextAlignment="Center" FontSize="15" Text="{Binding Source={StaticResource Model}, Path=StatusMessage}"/> -->
</Grid>
In the usercontrol class, I created method as follows:-
public void Show()
{
this.Visibility = Visibility.Visible;
}
public void Hide()
{
this.Visibility = Visibility.Hidden;
}
This link pointed me in this direction.

Resources