Develop Reference

WPF Custom Control with Colour Animation Between User-Settable Values

I've been trying to make a custom control that represents an alarm annunciator. visually, the control is quite simple and looks something like this:
The important design criteria for the Annunciator control are:
Can be shipped as part of a control library
Has a default style (colours, fonts) that differ from the system defaults but can be overridden by the user
Has text (usually one word, e.g. "ALARM") that can be specified by the user.
The text must flash with one of a number of different cadences, depending on alert severity. Cadence is settable by the user. Cadences include SteadyOn and SteadyOff and a few different alternatives in between.
When the annunciator is on/illuminated, it renders in a colour specified by ActiveColor property.
When the annunciator is off, it renders in the InactiveColor property. InactiveColor is typically close but not identical to the background colour
ActiveColor and InactiveColor can be set by the user.
I have based my custom control on the Control class. The visual tree consists of basically a border and a TextBlock, defined in Generic.xaml like this:
<Style TargetType="{x:Type local:Annunciator}">
<Setter Property="FontFamily" Value="OCR A Extended" />
<Setter Property="FontSize" Value="12" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="Margin" Value="2" />
<Setter Property="Padding" Value="2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Annunciator}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<TextBlock x:Name="AnnunciatorTextBlock"
TextWrapping="Wrap"
Text="{TemplateBinding AnnunciatorText}"
Foreground="{TemplateBinding ActiveColor}"
TextAlignment="Center"
/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Initially I tried to get the animations working using story boards and triggers. This would have been an elegant solution but I ran into a brick wall because in a control template, I was unable to use {TemplateBinding} for the To property of a ColorAnimation. After many hours and much reading, I concluded that this was not a viable option (maybe I'm wrong?).
So I tried again using code-behind and basing my solution on a similar control I did for Windows Forms, several years ago. In that solution I have a Cadencemanager singleton. My controls then register with the CadenceManager and whenever the control needs to be updated, the CadenceManager calls the control's ICadencedControl.CadenceUpdate() method. I tried this technique using a DispatcherTimer to avoid any cross-threading update issues and all of the code runs. In my custom control's update method, I update the foreground colour of the text block like so:
public void CadenceUpdate(bool newState)
{
var brush = newState && IsEnabled && !Muted ? ActiveColor : InactiveColor;
textBlockControl.Foreground = brush;
}
The update method is being called as expected (as evidenced by setting a breakpoint in the debugger). However, the text colour never updates.
So how do I make the colour of my TextBlock element in my custom control update in response to a DispatcherTimer tick event? I just can't see why this isn't working.

You could use VisualStates for the different flashing states:
<ControlTemplate TargetType="{x:Type local:Annunciator}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Border.Resources>
<Storyboard x:Key="BlinkingStoryboard">
<ColorAnimation
Storyboard.TargetName="AnnunciatorTextBlock"
Storyboard.TargetProperty="Foreground.Color"
From="{Binding InactiveColor,
RelativeSource={RelativeSource TemplatedParent}}"
To="{Binding ActiveColor,
RelativeSource={RelativeSource TemplatedParent}}"
Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="Forever"/>
</Storyboard>
<!-- more Storyboards -->
</Border.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="FlashStates">
<VisualState Name="Blinking"
Storyboard="{StaticResource BlinkingStoryboard}"/>
<!-- more VisualStates -->
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBlock x:Name="AnnunciatorTextBlock" Text="Hello">
<TextBlock.Foreground>
<SolidColorBrush Color="{TemplateBinding Foreground}"/>
</TextBlock.Foreground>
</TextBlock>
</Border>
</ControlTemplate>
Note that the Storyboards are declared as resources to make the InactiveColor and ActiveColor bindings work with RelativeSource TemplatedParent.
You would now activate a VisualState like this:
VisualStateManager.GoToState(annunciator, "Blinking", false);

ColorAnimation stuck on color when button is pressed repeatedly

I have a custom button-style with a ColorAnimation.
This works fine, but when pressed multiple times repeatedly, it stays stuck on the target color.
<Style TargetType="Button" x:Key="mainButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Duration="0:0:0.10"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
To="Red"
AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How can I resolve this ?

Update
Yeh if you cannot afford to remove the Storyboard in Trigger.ExitActions then you do indeed have to address the From issue for intermediate starting Storyboard's yourself.
However specifying a hard-coded From isn't the only solution. You can let the animation reset itself to the underlying base color when it's starting up.
The benefit of this is by not specifying a From you got one less thing to keep track of with future updates.
<Storyboard AutoReverse="True">
<!-- By not specifying a To or From we pretty much reset the property to un-animated state(Exactly what the hard-coded from does) -->
<ColorAnimation Duration="0:0:0"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" />
<!-- This part is same as original time to kick into new Foreground as desired -->
<ColorAnimation Duration="0:0:1.5"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
To="Red" />
</Storyboard>

You have not set the From property on your ColorAnimation. So when you press the button in the middle of its animation, the Storyboard takes the current Foreground color value as its From, and this is the color that the animation reverses back to.
Now when you repeatedly press the button, the From color moves closer and closer to red, giving the impression that the color is stuck on red.
Update:
This answer only points out the problem. Refer to Viv's answer for an elegant solution

preventing label border from being bold

I am using viewbox to fill the space available, it kind of gives me right result but not exactly.
<Viewbox Grid.Row="0" Grid.Column="0">
<StackPanel Name="letters" Orientation="Horizontal">
<Label ..>...</Label>
...
</StackPanel>
</Viewbox>
When I keep adding labels to the StackPanel when they exceed the container width they get smaller.
It's the behaviour I want, however I don't want labels' border to be 'bold' (because of viewbox).
How should I change my code structure?

I've modified kzen's answer to ensure that you don't have to explicitly define the style in code every time you add a new label to that stack panel. (Warning: coding in-place, but AFAIK, it should compile fine as is)
<Viewbox Grid.Row="0" Grid.Column="0">
<StackPanel Name="letters" Orientation="Horizontal">
<StackPanel.Resources>
<ResourceDictionary>
<Style TargetType="{x:Type Label}">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Margin" Value="0"/> <!-- not sure if this is also something you want -->
<Setter Property="Padding" Value="0"/> <!-- not sure if this is also something you want -->
</Style>
</ResourceDictionary>
</StackPanel.Resources>
<Label></Label>
...
</StackPanel>
</Viewbox>

Create a style for your labels with BorderThickeness property set to 0...
<Style x:Key="MyLabelStyle" TargetType="{x:Type Label}">
<Setter Property="BorderThickness" Value="0"/>
</Style>
<Viewbox Grid.Row="0" Grid.Column="0">
<StackPanel Name="letters" Orientation="Horizontal">
<Label Style="{DynamicResource MyLabelStyle}"></Label>
...
</StackPanel>
</Viewbox>

Anyway.. I should have asked if it's possible to have something constant size inside viewbox, that should have been more clear.

What can cause my template to be ignored in this Custom Control

EDIT: Original title: When I add a custom control based on a timer, my templates are ignored.
I'm working on the 70-511 training kit from Microsoft Press, and combined two practice exercises together from chapter 5.
The problem is that when I add the custom control to my MainWindow, it runs, but the triggers on the Button template are ignored. When the same control is removed, the triggers are honored.
For those who don't have access to the book, and don't feel like analyzing the code, it's a custom control with a label that has a dependency property setup to update on a timer object (once per second) with the current system time.
As you might infer from my attached code, the custom control is in a separate assembly referenced by the 5_3 project.
I'm a bit stumped on this one. What is causing this?
Here is the code:
MainWindow.xaml:
<Window x:Class="chapter5_3.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" xmlns:my="clr-namespace:chapter5_3CustomControl;assembly=chapter5_4CustomControl">
<Window.Resources>
<ControlTemplate TargetType="{x:Type Button}" x:Key="ButtonTemplate">
<Border Name="Bord1" BorderBrush="Olive" BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Rectangle Name="rect1">
<Rectangle.Fill>
<SolidColorBrush x:Name="rosyBrush" Color="RosyBrown"/>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
<Trigger.EnterActions>
<BeginStoryboard Name="bst2">
<Storyboard AutoReverse="False">
<ColorAnimation Duration="0:0:.3"
Storyboard.TargetProperty="Color"
Storyboard.TargetName="rosyBrush" >
<ColorAnimation.By>
<Color A="0" R="100" B="0" G="0"/>
</ColorAnimation.By>
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="bst2" />
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Name="bst1">
<Storyboard>
<ThicknessAnimation Storyboard.TargetName="Bord1"
Storyboard.TargetProperty="BorderThickness"
By=".1" Duration="0:0:.3" />
<ColorAnimation AutoReverse="False" To="DarkRed" Duration="0:0:.3"
Storyboard.TargetProperty="Color"
Storyboard.TargetName="rosyBrush" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="bst1" />
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="rect1" Property="Fill" Value="Gray"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<Grid>
<Button Template="{StaticResource ResourceKey=ButtonTemplate}" Height="23" Width="100" BorderThickness="2" Name="btnHello" Content="Hello" IsEnabled="False">
</Button>
<ToolBarPanel>
<CheckBox IsChecked="True" Content="Enable Button" Name="cbEnabled" Checked="cbEnabled_Checked" Unchecked="cbEnabled_Checked"/>
</ToolBarPanel>
<my:CustomControl1 Name="customControl11" />
</Grid>
CustomControl1.xaml: (separate assembly)
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:chapter5_3CustomControl">
<Style TargetType="{x:Type local:CustomControl1}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:CustomControl1}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<TextBlock Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Center"
Text="{Binding Path=Time}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
CustomControl.cs
public class CustomControl1 : Control
{
public static readonly DependencyProperty TimeProperty;
System.Timers.Timer myTimer = new System.Timers.Timer();
delegate void SetterDelegate();
static CustomControl1()
{
FrameworkPropertyMetadata metadata = new FrameworkPropertyMetadata();
TimeProperty = DependencyProperty.Register("Time", typeof(string), typeof(CustomControl1), metadata);
DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomControl1), new FrameworkPropertyMetadata(typeof(CustomControl1)));
}
public CustomControl1()
{
myTimer.Elapsed += timer_elapsed;
myTimer.Interval = 1000;
myTimer.Start();
this.DataContext = this;
}
void TimeSetter()
{
SetValue(TimeProperty, DateTime.Now.ToLongTimeString());
}
void timer_elapsed(object sender, System.Timers.ElapsedEventArgs e)
{
Dispatcher.Invoke(new SetterDelegate(TimeSetter),
System.Windows.Threading.DispatcherPriority.Normal);
}
}
Edit:
I wanted to plug a free tool that I use called snoop! You can find it here, and I recommend it as it allows you to inspect your controls at runtime! Snoop Lives here at time of edit: http://snoopwpf.codeplex.com/ It has saved me a lot of time!

Because your Button and CustomControl are in the same row and column of the Grid, your CustomControl is probably covering the Button. You probably just can't see it.
If you set the Background of your CustomControl to say Red, then you will see what area it is covering.
You would need to ensure that the CustomControl doesn't cover the Button, if you want the Button to respond to mouse events. Alternatively, you can set IsHitTestVisible to false on your CustomControl or ensure it's Background is null.

How can I set a border around a control during runtime in WPF?

I have an Image control on my WPF Form. How can I create a border around it during runtime?
Here's my XAML code:
<Image Margin="2.5"
Grid.Column="1" Grid.Row="0"
x:Name="Behemoth" Source="Images/Hero/Behemoth.gif" Stretch="Fill"
MouseEnter="HeroMouseEnter"
MouseLeave="HeroMouseLeave"
MouseDown="HeroMouseClick" />
Also, I want to know how to remove the border.
Maybe if I state my problem better there is an even better solution available.
I have many Images, and when a user says: "Hey, just show me the woman out of all the picture." I want a way to sort of highlight or draw the users attention to whatever images I need them to see. I was thinking about adding a border, but maybe that's too much work for something that can be solved easier.
Any help?

Although it's visually very different from a border, you could use an outter glow to signify the importance of the image. Then, you don't have to change the parent of the image.
Alternatively, you could use a custom Adorner to place a border around the image. Good info on Adorners can be found on msdn.

There's no straightforward way to do it, because the Border is a container, so you would have to remove the Image from its parent, put the Border instead, and put the Image back in the Border...
Another option would be to use templates :
<Window.Resources>
<ControlTemplate x:Key="imageWithBorder" TargetType="{x:Type Image}">
<Border BorderBrush="Red" BorderThickness="2">
<Image Source="{TemplateBinding Source}" />
</Border>
</ControlTemplate>
</Window.Resources>
...
<Image Name="image1" Source="foo.png"/>
When you want to put the border around the image, just assign the template to the image :
image1.Template = this.FindResource("imageWithBorder") as ControlTemplate;

For your stated needs, I suggest you use a ListBox with a custom ItemContainerStyle - one that always has a border but only makes it visible if the item is selected.
Here's the basic idea:
<ListBox ItemsSource="{Binding MyImageObjects}">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="border">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ListBoxItem.IsSelected" Value="True">
<Setter ElementName="border" Property="BorderBrush" Value="Blue" />
<Setter ElementName="border" Property="BorderThickness" Value="2" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>