Begin a storyboard in a ControlTemplate

[Kenneth Haugland]

So I was reading the documentation about Prism 7: Composing the User Interface Using the Prism Library 5.0 for WPF[^] and downloaded the source code for the application here: Prism for WPF Reference Implementation Code Sample in C# for Visual Studio 2013[^] I really liked the animated TabControl and thought I'd implement it based on that application. The trouble was that when I implemented it on a different new solution I ran into a problem with the animated Template.

    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="Padding" Value="4,4,4,4"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
    <Setter Property="Background" Value="#F9F9F9"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Controls:AnimatedTabControl">

                <Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="\*"/>
                    </Grid.RowDefinitions>

                    <Border Height="30" Margin="10,0,10,10"  HorizontalAlignment="Left" VerticalAlignment="Top" Width="Auto" Grid.Row="1" CornerRadius="12,12,12,12" Background="{TemplateBinding Background}" BorderThickness="2,2,2,2" BorderBrush="#FFFFFFFF">
                        <TabPanel x:Name="HeaderPanel" HorizontalAlignment="Center" VerticalAlignment="Center" IsItemsHost="true" Grid.Column="0" Grid.Row="0" KeyboardNavigation.TabIndex="1"/>
                    </Border>

                    <Grid Grid.Row="1" Margin="0,40,0,0" Horizonta</x-turndown>

[Pete OHanlon]

The problem you're facing is that you cannot have a Binding inside a storyboard. Fortunately, you might be able to leverage the technique here[^] to help solve this.

This space for rent

[Kenneth Haugland]

WPF won't let me play today, I can't seem to make the trick work. However, I have to say that not being able to make bindings on a ControlTemplate animation seems to be quite the limitation. What do pros do to make this work? Code behind?

[Pete OHanlon]

I would use a Behavior to solve this.

This space for rent

[Pete OHanlon]

Right, I thought I'd give the original implementation a run out to see what your problem might be. The first thing I did (once I'd created a Wpf application ready to test this), was to create AnimatedTabControl.cs. It contains this code:

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Threading;

namespace WpfTabSample
{
public class AnimatedTabControl : TabControl
{
public static readonly RoutedEvent SelectionChangingEvent = EventManager.RegisterRoutedEvent(
"SelectionChanging", RoutingStrategy.Direct, typeof(RoutedEventHandler), typeof(AnimatedTabControl));

    private DispatcherTimer timer;

    public AnimatedTabControl()
    {
        DefaultStyleKey = typeof(AnimatedTabControl);
    }

    public event RoutedEventHandler SelectionChanging
    {
        add { AddHandler(SelectionChangingEvent, value); }
        remove { RemoveHandler(SelectionChangingEvent, value); }
    }

    protected override void OnSelectionChanged(SelectionChangedEventArgs e)
    {
        this.Dispatcher.BeginInvoke(
            (Action)delegate
            {
                this.RaiseSelectionChangingEvent();

                this.StopTimer();

                this.timer = new DispatcherTimer { Interval = new TimeSpan(0, 0, 0, 0, 500) };

                EventHandler handler = null;
                handler = (sender, args) =>
                {
                    this.StopTimer();
                    base.OnSelectionChanged(e);
                };
                this.timer.Tick += handler;
                this.timer.Start();
            });
    }

    // This method raises the Tap event 
    private void RaiseSelectionChangingEvent()
    {
        var args = new RoutedEventArgs(SelectionChangingEvent);
        RaiseEvent(args);
    }

    private void StopTimer()
    {
        if (this.timer != null)
        {
            this.timer.Stop();
            this.timer = null;
        }
    }
}

}

Next I added in a XAML usercontrol, called RoundedBox. It looks like this:

<UserControl x:Class="WpfTabSample.RoundedBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.ope

[Kenneth Haugland]

It's working now, thank you so much. :) I had implemented the two first items but I got my error in the XAML file so I just posted that. The pictures you commented out just creates some nice shader effects. But, I'm not quite sure why It didn't work for me. :doh:

[Pete OHanlon]

I'm pleased you got it working.

This space for rent