WPF : Create a Hover over menu and show tab header in 2 lines for Infragistic Tab control

Requirement : In this post I am going to create a hover over menu, which will display a list of actions user can take whenever he moves his mouse over a textblock. I am also going to show how we can break tabheader text into 2 lines to reduce horizontal space taken by tab headers in Infragistic tab header contol.

Here is how application will look

Before user moves over Launch action

After user movers over Launch

Approach: I am going to create a user control which will use a label control ("lblLaunch" in my example) , a popup control which will hold a list of labels to indicates actions.

Here is my code for HoveroverMenu.xaml user control

<UserControl x:Class="CaseTrail.HoveroverMenu"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             Height="Auto" Width="Auto">
 <UserControl.Resources>
  <ControlTemplate x:Key="LabelControlTemplate1" TargetType="{x:Type Label}">
   <Border x:Name="brdName" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
    <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Black" Offset="1"/>
                        <GradientStop Color="#FFEDE7E7" Offset="0.196"/>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
   <ControlTemplate.Triggers>
    <Trigger Property="IsEnabled" Value="False">
     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
    </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" TargetName="brdName">
                        <Setter.Value>
                            <SolidColorBrush Color="#FFA7A2A2" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>
  </ControlTemplate>
 </UserControl.Resources>
    <StackPanel>
        <Label Width="100" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" x:Name="lblLaunch"  Grid.Column="1" Mouse.MouseMove="Button_MouseMove">
            <Label.Background>
          <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
           <GradientStop Color="#FFF3F3F3" Offset="0"/>
           <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
           <GradientStop Color="#FFDDDDDD" Offset="0.5"/>
           <GradientStop Color="#FF45479F" Offset="1"/>
          </LinearGradientBrush>
            </Label.Background>
            
            <Label.Content>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Launch"></TextBlock>
                    <Path Margin="10,4,0,0"  Data="M160,24 L175.5,23.5 167.5,31.5 z" Fill="Blue" HorizontalAlignment="Left" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" />
                </StackPanel>
            </Label.Content>
        </Label>
        
        <Popup Width="100"  x:Name="controls" StaysOpen="False"  >
            <ItemsControl Background="AliceBlue">
                <Label HorizontalContentAlignment="Center" Mouse.MouseDown="Label_MouseDown" VerticalContentAlignment="Center" HorizontalAlignment="Stretch" Content="Client Cases" Template="{DynamicResource LabelControlTemplate1}" />
                <Label HorizontalContentAlignment="Center" Mouse.MouseDown="Label_MouseDown" Template="{DynamicResource LabelControlTemplate1}"  VerticalContentAlignment="Center" HorizontalAlignment="Stretch" Content="Forms &amp; Letters" />
                <Label HorizontalContentAlignment="Center" Mouse.MouseDown="Label_MouseDown" Template="{DynamicResource LabelControlTemplate1}"  VerticalContentAlignment="Center" HorizontalAlignment="Stretch" Content="Search Rep." />
                <Label HorizontalContentAlignment="Center" Mouse.MouseDown="Label_MouseDown" Template="{DynamicResource LabelControlTemplate1}"  VerticalContentAlignment="Center" HorizontalAlignment="Stretch" Content="Log Call" />
            </ItemsControl>
        </Popup>
 
    </StackPanel>
</UserControl> 

 Here is my code for HoveroverMenu.xaml.cs file

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
 
namespace CaseTrail
{
    /// <summary>
    /// Interaction logic for HoveroverMenu.xaml
    /// </summary>
    public partial class HoveroverMenu : UserControl
    {
        public HoveroverMenu()
        {
            InitializeComponent();
        }
 
        private void Button_MouseMove(object sender, MouseEventArgs e)
        {
            if (!controls.IsOpen)
            controls.IsOpen = true;
        }
 
        private void Label_MouseDown(object sender, MouseButtonEventArgs e)
        {
            Label l = e.Source as Label;
            MessageBox.Show(l.Content.ToString());
        }
    }
} 

I am going to use my HoveroverMenu control in my view MainWindow.xaml file as shown below

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:igWindows="http://infragistics.com/Windows" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" x:Class="CaseTrail.MainWindow"
    xmlns:local="clr-namespace:CaseTrail"    
    Title="MainWindow" Height="350" Width="625">
    
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <igWindows:XamTabControl VerticalAlignment="Stretch" Grid.RowSpan="2" Grid.ColumnSpan="2" x:Name="xamTabControl1"  Theme="Office2k7Blue" ShowTabHeaderCloseButton="True" AllowTabClosing="True"   >
            
            <igWindows:TabItemEx  MaxWidth="100"   >
                <igWindows:TabItemEx.Header>
                    <TextBlock MaxWidth="100" Height="35" TextWrapping="Wrap" Text="Case (Opened)"></TextBlock>
                </igWindows:TabItemEx.Header>
                <Grid />
            </igWindows:TabItemEx>
 
            <igWindows:TabItemEx  MaxWidth="100"   >
                <igWindows:TabItemEx.Header>
                    <TextBlock MaxWidth="100" Height="35" TextWrapping="Wrap" Text="Merge"></TextBlock>
                </igWindows:TabItemEx.Header>
                <Grid />
            </igWindows:TabItemEx>
            <igWindows:TabItemEx  MaxWidth="100"   >
                <igWindows:TabItemEx.Header>
                    <TextBlock MaxWidth="100" Height="35" TextWrapping="Wrap" Text="Clone"></TextBlock>
                </igWindows:TabItemEx.Header>
                <Grid />
            </igWindows:TabItemEx>
            <igWindows:TabItemEx MaxWidth="100"   >
                <igWindows:TabItemEx.Header>
                    <TextBlock MaxWidth="100" Height="35" TextWrapping="Wrap" Text="Related"></TextBlock>
                </igWindows:TabItemEx.Header>
                <Grid />
            </igWindows:TabItemEx>
            <igWindows:TabItemEx  MaxWidth="100"   >
                <igWindows:TabItemEx.Header>
                    <TextBlock MaxWidth="100" Height="35" TextWrapping="Wrap" Text="Related Cases"></TextBlock>
                </igWindows:TabItemEx.Header>
                <Grid />
            </igWindows:TabItemEx>
            <igWindows:TabItemEx MaxWidth="100"  >
                <igWindows:TabItemEx.Header>
                    <TextBlock MaxWidth="100" Height="35" TextWrapping="Wrap" Text="Client View"></TextBlock>
                </igWindows:TabItemEx.Header>
                <Grid />
            </igWindows:TabItemEx>
        </igWindows:XamTabControl>
        
        <local:HoveroverMenu Grid.Column="1" Margin="0,5,5,0" />
           
    </Grid>
</Window>