Animating TabItems' Margin - storyboard not being executed after TabItem has been selected once

Question

Hi folks,

I'm having a very strange problem here. When a TabItem gets selected, it's supposed to be higher compared to the ones unselected (or disabled). Also, when the mouse hovers over a TabItem, I'd like its height to be in between the selected and unselected heights. Furthermore, I'd like a transistion between those states.
For all this, I created a TabItem-Style. In the Style, three Storyboards will perform the animations. Not much of a problem until here. Here's a (simplified) sample that covers all aspects mentioned above:

<Window x:Class="WpfTests.StyledTabControl_AnimationTest"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Animating TabItems (bug?)" 
        Height="200" 
        Width="400">
   <Window.Resources>
      <Storyboard x:Key="TabItemStoryBoard_Unselected">
         <ThicknessAnimation Storyboard.TargetName="Border" 
                             Storyboard.TargetProperty="Margin"
                             To="0,8,0,0"
                             FillBehavior="HoldEnd"
                             Duration="0:0:0.1"/>
      </Storyboard>
      <Storyboard x:Key="TabItemStoryBoard_Selected">
         <ThicknessAnimation Storyboard.TargetName="Border" 
                             Storyboard.TargetProperty="Margin"
                             To="0,0,0,0"
                             FillBehavior="HoldEnd"
                             Duration="0:0:0.1"/>
      </Storyboard>

      <!-- This is the problematic animation: -->
      <Storyboard x:Key="TabItemStoryBoard_Hover">
         <!--<ThicknessAnimation Storyboard.TargetName="Border" 
                             Storyboard.TargetProperty="Margin"
                             By="0,-4,0,0"
                             FillBehavior="HoldEnd"
                             Duration="0:0:0.1"/>-->
         <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="Border" 
                                           Storyboard.TargetProperty="Margin">
            <SplineThicknessKeyFrame KeyTime="0:0:0.1"
                                     Value="0,2,0,0"/>
            <SplineThicknessKeyFrame KeyTime="0:0:0.2"
                                     Value="0,4,0,0"/>
         </ThicknessAnimationUsingKeyFrames>
      </Storyboard>


      <!-- The Style for TabItems (strips). -->
      <Style TargetType="{x:Type TabItem}">
         <Setter Property="Template">
            <Setter.Value>
               <ControlTemplate TargetType="{x:Type TabItem}">
                  <Grid Height="35" VerticalAlignment="Bottom">
                     <Border Name="Border"
                                BorderBrush="DarkGray"
                                BorderThickness="2,1,1,0" 
                                CornerRadius="3,3,0,0">
                        <ContentPresenter x:Name="ContentSite"
                                          VerticalAlignment="Center"
                                          HorizontalAlignment="Center"
                                          ContentSource="Header"
                                          Margin="7,2,12,2"
                                          RecognizesAccessKey="True"/>
                     </Border>
                  </Grid>
                  <ControlTemplate.Triggers>

                     <!-- The appearance of a TabItem when it's inactive/unselected -->
                     <Trigger Property="IsSelected" Value="False">
                        <Trigger.EnterActions>
                           <BeginStoryboard Storyboard="{StaticResource TabItemStoryBoard_Unselected}"/>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                           <BeginStoryboard Storyboard="{StaticResource TabItemStoryBoard_Unselected}"/>
                        </Trigger.ExitActions>
                        <Setter TargetName="Border" Property="Background" Value="LightGray" />
                     </Trigger>

                     <!-- The appearance of a TabItem when it's disabled (in addition to Selected=False) -->
                     <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="Border" Property="Background" Value="DarkGray" />
                     </Trigger>

                     <!-- The appearance of a TabItem when the mouse hovers over it -->
                     <MultiTrigger>
                        <MultiTrigger.Conditions>
                           <Condition Property="Border.IsMouseOver" Value="True"/>
                           <Condition Property="IsSelected" Value="False"/>
                        </MultiTrigger.Conditions>
                        <MultiTrigger.EnterActions>
                           <BeginStoryboard Storyboard="{StaticResource TabItemStoryBoard_Hover}"/>
                        </MultiTrigger.EnterActions>
                        <MultiTrigger.ExitActions>
                           <BeginStoryboard Storyboard="{StaticResource TabItemStoryBoard_Unselected}"/>
                        </MultiTrigger.ExitActions>
                        <Setter TargetName="Border" Property="Background" Value="White" />
                     </MultiTrigger>

                     <!-- The appearance of a TabItem when it's active/selected -->
                     <Trigger Property="IsSelected" Value="True">
                        <Trigger.EnterActions>
                           <BeginStoryboard Storyboard="{StaticResource TabItemStoryBoard_Selected}"/>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                           <BeginStoryboard Storyboard="{StaticResource TabItemStoryBoard_Unselected}"/>
                        </Trigger.ExitActions>
                        <Setter TargetName="Border" Property="Background" Value="LightSalmon" />
                        <Setter TargetName="Border" Property="BorderBrush" Value="LightSalmon" />
                     </Trigger>
                  </ControlTemplate.Triggers>
               </ControlTemplate>
            </Setter.Value>
         </Setter>
      </Style>
   </Window.Resources>

   <TabControl x:Name="tc" Margin="5" 
               SelectedIndex="0"
               Background="LightSalmon"
               BorderBrush="LightSalmon">
      <TabItem Header="Tab 1"/>
      <TabItem Header="Tab 2"/>
      <TabItem Header="Tab 3" IsEnabled="False"/>
      <TabItem Header="Tab 4"/>
      <TabItem Header="Tab 5"/>
   </TabControl>
</Window>

However, if you run the sample, you'll notice one problem that I haven't been able to get rid off: When you initially hover over the TabItems, the transistion will be animated, just as desired. However, after you select a TabItem once, the hover-effect/-animation will no longer be processed. I.e., when the window shows, the hover-animation will show for tabs 2, 4 and 5. If you then click Tab 4, the animation will no longer show for Tab 1. Likewise, if click Tab 1 again and hover over Tab 5, the effect will be gone. This applies to all tabs - after they were selected once, the animation will no longer run.

I've tried many things, to no avail. It also doesn't seem to matter what sort of animation I'm using (I've left one of the other things I tried in the above XAML), the behaviour was identical all the time. I've also traced the triggers - they're executing just as I thought they would.

Any pointers much appreciated ...

Cheers,
Olaf

Answer 1

Hi Olaf Rabbachin,

-->if click Tab 1 again and hover over Tab 5, the effect will be gone. This applies to all tabs - after they were selected once, the animation will no longer run.

I reproduce the steps as you mentioned above, but I can see the animated effected when I click the TabItem agaion, so could you please elaborate on it?

Thanks.
Sincerely.

---

Jim Zhou -MSFT

Answer 2

Hi Jim,

-->if click Tab 1 again and hover over Tab 5, the effect will be gone. This applies to all tabs - after they were selected once, the animation will no longer run.

I reproduce the steps as you mentioned above, but I can see the animated effected when I click the TabItem agaion, so could you please elaborate on it?

yep, the animations that run when a TabItem is selected or unselected always work. It's the one geared at the hover-effect (TabItemStoryboard_Hover) that'll stop working for each TabItem that has been selected at least once.

---

Cheers,
Olaf

Answer 3

Hi folks,

<bump> - anyone ..?

---

Cheers,
Olaf

Answer 4

Hi Olaf Rabbachin,

-->that'll stop working for each TabItem that has been selected at least once

I am sorry for late response.
You can set the RepeatBehavior property of Timeline class to control the repeated times. I will see to in details tomorrow.

Thanks.
Sincerely.

---

Jim Zhou -MSFT

Answer 5

Hi Olaf,

I posted a solution for your problem to your thread in the german WPF forum.

http://social.msdn.microsoft.com/Forums/en-US/wpfde/thread/633f1f52-0e5a-4d47-ba0e-05627d5b2b17

Stopping the StoryBoard on Trigger.ExitAction makes the effect working again.

Answer 6

Hi Günter,

thanks for the tips there (which got me on the right track).

The solution to the problem was to stop each Storyboard in the ExitTrigger. This lead to the Unselected-animation no longer running when the mouse left an unselected tab-strip though. However, starting the Unselected-animation once again from there re-enabled that.

This sure is strange and I consider the overall behavior buggy! @Jim - thanks for your tip with the RepeatedBehavior, but I played around with that, too. The docs tell us that the default repeat behavior is that a Storyboard would run only once; also, setting RepeatBehavior to "1" will result in a very odd behavior and setting it to what the docs claim to be the default ("1.0") will result in an error. The fact that, here, we need to actually stop the animation also indicates that either the docs are incorrect or there might be another problem with this.
Another possible reason might be that there is some sort of interference between the animations. Whatever way I put it, it doesn't make much sense to me as it is now.

I'll leave this thread open for a while, maybe someone comes up with the reason for the unexpected behavior.

So, FWIW, here's the XAML of the window which is at least working as expected:

<Window x:Class="WpfTests.StyledTabControl_AnimationTest"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Animating TabItems (bug?)" 
        Height="200" 
        Width="400">
   <Window.Resources>
      <Storyboard x:Key="TabItemStoryBoard_Unselected">
         <ThicknessAnimation Storyboard.TargetName="Border" 
                             Storyboard.TargetProperty="Margin"
                             To="0,8,0,0"
                             FillBehavior="HoldEnd"
                             Duration="0:0:0.1"/>
      </Storyboard>
      <Storyboard x:Key="TabItemStoryBoard_Selected">
         <ThicknessAnimation Storyboard.TargetName="Border" 
                             Storyboard.TargetProperty="Margin"
                             To="0,0,0,0"
                             FillBehavior="HoldEnd"
                             Duration="0:0:0.1"/>
      </Storyboard>

      <!-- This is the problematic animation: -->
      <Storyboard x:Key="TabItemStoryBoard_Hover">
         <!--<ThicknessAnimation Storyboard.TargetName="Border" 
                             Storyboard.TargetProperty="Margin"
                             By="0,-4,0,0"
                             FillBehavior="HoldEnd"
                             Duration="0:0:0.1"/>-->
         <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="Border" 
                                           Storyboard.TargetProperty="Margin">
            <SplineThicknessKeyFrame KeyTime="0:0:0.1"
                                     Value="0,2,0,0"/>
            <SplineThicknessKeyFrame KeyTime="0:0:0.2"
                                     Value="0,4,0,0"/>
         </ThicknessAnimationUsingKeyFrames>
      </Storyboard>


      <!-- The Style for TabItems (strips). -->
      <Style TargetType="{x:Type TabItem}">
         <Setter Property="Template">
            <Setter.Value>
               <ControlTemplate TargetType="{x:Type TabItem}">
                  <Grid Height="35" VerticalAlignment="Bottom">
                     <Border Name="Border"
                                BorderBrush="DarkGray"
                                BorderThickness="2,1,1,0" 
                                CornerRadius="3,3,0,0">
                        <ContentPresenter x:Name="ContentSite"
                                          VerticalAlignment="Center"
                                          HorizontalAlignment="Center"
                                          ContentSource="Header"
                                          Margin="7,2,12,2"
                                          RecognizesAccessKey="True"/>
                     </Border>
                  </Grid>
                  <ControlTemplate.Triggers>

                     <!-- The appearance of a TabItem when it's inactive/unselected -->
                     <Trigger Property="IsSelected" Value="False">
                        <Trigger.EnterActions>
                           <BeginStoryboard  x:Name="sbUnselected" Storyboard="{StaticResource TabItemStoryBoard_Unselected}"/>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                           <StopStoryboard BeginStoryboardName="sbUnselected"/>
                        </Trigger.ExitActions>
                        <Setter TargetName="Border" Property="Background" Value="LightGray" />
                     </Trigger>

                     <!-- The appearance of a TabItem when it's disabled (in addition to Selected=False) -->
                     <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="Border" Property="Background" Value="DarkGray" />
                     </Trigger>

                     <!-- The appearance of a TabItem when the mouse hovers over it -->
                     <MultiTrigger>
                        <MultiTrigger.Conditions>
                           <Condition Property="Border.IsMouseOver" Value="True"/>
                           <Condition Property="IsSelected" Value="False"/>
                        </MultiTrigger.Conditions>
                        <MultiTrigger.EnterActions>
                           <BeginStoryboard x:Name="sbHover" Storyboard="{StaticResource TabItemStoryBoard_Hover}"/>
                        </MultiTrigger.EnterActions>
                        <MultiTrigger.ExitActions>
                           <StopStoryboard BeginStoryboardName="sbHover"/>
                           <BeginStoryboard Storyboard="{StaticResource TabItemStoryBoard_Unselected}"/>
                        </MultiTrigger.ExitActions>
                        <Setter TargetName="Border" Property="Background" Value="White" />
                     </MultiTrigger>

                     <!-- The appearance of a TabItem when it's active/selected -->
                     <Trigger Property="IsSelected" Value="True">
                        <Trigger.EnterActions>
                           <BeginStoryboard x:Name="sbSelected" Storyboard="{StaticResource TabItemStoryBoard_Selected}"/>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                           <StopStoryboard BeginStoryboardName="sbSelected"/>
                        </Trigger.ExitActions>
                        <Setter TargetName="Border" Property="Background" Value="LightSalmon" />
                        <Setter TargetName="Border" Property="BorderBrush" Value="LightSalmon" />
                     </Trigger>
                  </ControlTemplate.Triggers>
               </ControlTemplate>
            </Setter.Value>
         </Setter>
      </Style>
   </Window.Resources>

   <TabControl x:Name="tc" Margin="5" 
               SelectedIndex="0"
               Background="LightSalmon"
               BorderBrush="LightSalmon">
      <TabItem Header="Tab 1"/>
      <TabItem Header="Tab 2"/>
      <TabItem Header="Tab 3" IsEnabled="False"/>
      <TabItem Header="Tab 4"/>
      <TabItem Header="Tab 5"/>
   </TabControl>
</Window>

---

Cheers,
Olaf

Answer 7

Hi folks,

the issue actually wasn't quite fixed - the story went on in the German counterpart of this thread .

Since I presume most of the readers here will not be capable of German, here's a recap of what has been changed compared to the previous version:

• The Unselected Trigger is now a MultiTrigger - this was required due to the fact that one of the issues was that the Unselected Storyboard was executed both from the Unselected-Enter- and the Hover-Exit-Triggers. With a MultiTrigger this works as expected (even if it doesn't make much sense from a logical perspective)
• The BeginStoryboard calls now have names that are being assigned in the Enter-Triggers and will be stopped explicitly in the respective ExitTriggers; again, this doesn't really make sense as all animations only run once, but without stopping them explicitly, it won't work.

I have covered the whole thing in more detail in my blog about WPF: Styling the TabControl and its TabItems - Part 2: Animating TabItems . However, the article there uses a more complex example. Since I started this thread with a simplified sample, here it is again, now working as desired:

<Window x:Class="WpfTests.StyledTabControl_AnimationTest"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Animating TabItems (resolved)" 
        Height="200" 
        Width="400">
   <Window.Resources>
      <Storyboard x:Key="TabItemStoryBoard_Default" x:Name="res_sbUnselected_Default">
         <ThicknessAnimation Storyboard.TargetName="Border" 
                             Storyboard.TargetProperty="Margin"
                             To="0,4,0,0"
                             FillBehavior="HoldEnd"
                             Duration="0:0:0.1"/>
      </Storyboard>

      <Storyboard x:Key="TabItemStoryBoard_Unselected" x:Name="res_sbUnselected">
         <ThicknessAnimation Storyboard.TargetName="Border" 
                             Storyboard.TargetProperty="Margin"
                             To="0,8,0,0"
                             FillBehavior="HoldEnd"
                             Duration="0:0:0.1"/>
      </Storyboard>
      <Storyboard x:Key="TabItemStoryBoard_Selected" x:Name="res_sbSelected">
         <ThicknessAnimation Storyboard.TargetName="Border" 
                             Storyboard.TargetProperty="Margin"
                             To="0,0,0,0"
                             FillBehavior="HoldEnd"
                             Duration="0:0:0.1"/>
      </Storyboard>
      <Storyboard x:Key="TabItemStoryBoard_Hover" x:Name="res_">
         <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="Border" 
                                           Storyboard.TargetProperty="Margin">
            <SplineThicknessKeyFrame KeyTime="0:0:0.1"
                                     Value="0,2,0,0"/>
            <SplineThicknessKeyFrame KeyTime="0:0:0.2"
                                     Value="0,4,0,0"/>
         </ThicknessAnimationUsingKeyFrames>
      </Storyboard>

      <!-- The Style for TabItems (strips). -->
      <Style TargetType="{x:Type TabItem}">
         <Setter Property="Template">
            <Setter.Value>
               <ControlTemplate TargetType="{x:Type TabItem}">
                  <Grid Height="35" VerticalAlignment="Bottom">
                     <Border Name="Border"
                                BorderBrush="DarkGray"
                                BorderThickness="2,1,1,0" 
                                CornerRadius="3,3,0,0">
                        <ContentPresenter x:Name="ContentSite"
                                          VerticalAlignment="Center"
                                          HorizontalAlignment="Center"
                                          ContentSource="Header"
                                          Margin="7,2,12,2"
                                          RecognizesAccessKey="True"/>
                     </Border>
                  </Grid>
                  <ControlTemplate.Triggers>

                     <!-- The appearance of a TabItem when it's inactive/unselected -->
                     <MultiTrigger>
                        <MultiTrigger.Conditions>
                           <Condition Property="Border.IsMouseOver" Value="False"/>
                           <Condition Property="IsSelected" Value="False"/>
                        </MultiTrigger.Conditions>
                        <MultiTrigger.EnterActions>
                           <BeginStoryboard x:Name="sbUnselected" Storyboard="{StaticResource TabItemStoryBoard_Unselected}"/>
                        </MultiTrigger.EnterActions>
                        <MultiTrigger.ExitActions>
                           <StopStoryboard BeginStoryboardName="sbUnselected"/>
                        </MultiTrigger.ExitActions>
                        <Setter TargetName="Border" Property="Background" Value="LightGray" />
                     </MultiTrigger>

                     <!-- The appearance of a TabItem when it's disabled (in addition to Selected=False) -->
                     <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="Border" Property="Background" Value="DarkGray" />
                     </Trigger>

                     <!-- The appearance of a TabItem when the mouse hovers over it -->
                     <MultiTrigger>
                        <MultiTrigger.Conditions>
                           <Condition Property="Border.IsMouseOver" Value="True"/>
                           <Condition Property="IsSelected" Value="False"/>
                        </MultiTrigger.Conditions>
                        <MultiTrigger.EnterActions>
                           <StopStoryboard BeginStoryboardName="sbUnselected_Hover_Exit"/>
                           <BeginStoryboard x:Name="sbHover" Storyboard="{StaticResource TabItemStoryBoard_Hover}"/>
                        </MultiTrigger.EnterActions>
                        <MultiTrigger.ExitActions>
                           <BeginStoryboard x:Name="sbUnselected_Hover_Exit" Storyboard="{StaticResource TabItemStoryBoard_Unselected}"/>
                        </MultiTrigger.ExitActions>
                        <Setter TargetName="Border" Property="Background" Value="White" />
                     </MultiTrigger>

                     <!-- The appearance of a TabItem when it's active/selected -->
                     <Trigger Property="IsSelected" Value="True">
                        <Trigger.EnterActions>
                           <StopStoryboard BeginStoryboardName="sbUnselected_Selected_Exit"/>
                           <BeginStoryboard x:Name="sbSelected" Storyboard="{StaticResource TabItemStoryBoard_Selected}"/>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                           <BeginStoryboard x:Name="sbUnselected_Selected_Exit" Storyboard="{StaticResource TabItemStoryBoard_Unselected}"/>
                        </Trigger.ExitActions>
                        <Setter TargetName="Border" Property="Background" Value="LightSalmon" />
                        <Setter TargetName="Border" Property="BorderBrush" Value="LightSalmon" />
                     </Trigger>
                  </ControlTemplate.Triggers>
               </ControlTemplate>
            </Setter.Value>
         </Setter>
      </Style>
   </Window.Resources>

   <TabControl x:Name="tc" Margin="5" 
               SelectedIndex="0"
               Background="LightSalmon"
               BorderBrush="LightSalmon">
      <TabItem Header="Tab 1"/>
      <TabItem Header="Tab 2"/>
      <TabItem Header="Tab 3" IsEnabled="False"/>
      <TabItem Header="Tab 4"/>
      <TabItem Header="Tab 5"/>
   </TabControl>
</Window>

Cheers,
Olaf