Blink tab header on receiving event

Question

I have a tab based chat application, which a user can chat with several people in different tab items. I want to notify the user of incoming messages by blinking the tab hea

Answer 1

You need to create a style for the header that includes an animation to flash/blink the header foreground. Once you have this you can then apply this when ever needed.

The example below does this. You may want to modify this so set the background instead to make the whole tab flash not just the TabItems text.

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">

    <Window.Resources>
        <Style x:Key="FlashingHeader" TargetType="TabItem">
            <Setter Property="TabItem.HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>

                        <!--Make The Header -->
                         <TextBlock x:Name="header" Foreground ="Black" Text="{Binding}"/>

                        <!--Make The Background Flash-->
                        <DataTemplate.Triggers>
                            <Trigger Property="Visibility" Value="Visible">
                                <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard Storyboard.TargetName="header" AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetProperty="Foreground.Color">
                                        <ColorAnimation To="Transparent" AutoReverse="True" Duration="0:0:0.5" />
                                    </Storyboard>
                                </BeginStoryboard>
                                </Trigger.EnterActions>
                            </Trigger>
                        </DataTemplate.Triggers>

                    </DataTemplate>

                </Setter.Value>
              </Setter>

        </Style>
    </Window.Resources>

    <StackPanel>

        <TabControl Height="150">
            <TabItem x:Name="one" Header="Page One"></TabItem>
            <TabItem x:Name="two" Header="Page Two"></TabItem>
            <TabItem x:Name="three" Header="Page Three"></TabItem>
        </TabControl> 

        <StackPanel Orientation="Horizontal">

            <Label >Tab Number:</Label>
            <TextBox x:Name="userInput" Width="80">two</TextBox>
            <Button Click="StartFlash_Click">Start Flash</Button>
            <Button Click="StopFlash_Click">Stop Flash</Button>

        </StackPanel> 


    </StackPanel>
</Window>

Then in the c# code you can set the style when ever needed:

   private void StartFlash_Click(object sender, RoutedEventArgs e)
        {
            TabItem ti = (TabItem)this.FindName(userInput.Text);

            if (ti != null)
            {
                ti.SetValue(Control.StyleProperty, (Style)this.Resources["FlashingHeader"]);
            }

        }

        private void StopFlash_Click(object sender, RoutedEventArgs e)
        {
            TabItem ti = (TabItem)this.FindName(userInput.Text);

            if (ti != null)
            {
                ti.Style = null;
            }
        }