Extended ToolTip for UI Elements

Question

i have a problem with the ToolTips and need some helping hand. I want to create a custom design for all tooltips, adding a header and a footer.

Because it should be the default tooltip style/template i created attached properties, to set the values for header and footer on all UI elements.

public class ToolTipExtensions
{
    public static readonly DependencyProperty HeaderProperty = DependencyProperty.RegisterAttached("Header",
        typeof(string), typeof(ToolTipExtensions), new PropertyMetadata(null));

    public static readonly DependencyProperty FooterProperty = DependencyProperty.RegisterAttached("Footer",
        typeof(string), typeof(ToolTipExtensions), new PropertyMetadata(null));

    public static void SetHeader(UIElement element, string value)
    {
        element.SetValue(HeaderProperty, value);
    }

    public static string GetHeader(UIElement element)
    {
        return (string)element.GetValue(HeaderProperty);
    }

    public static void SetFooter(UIElement element, string value)
    {
        element.SetValue(FooterProperty, value);
    }

    public static string GetFooter(UIElement element)
    {
        return (string)element.GetValue(FooterProperty);
    }
}

Im using the following style.

<Style TargetType="{x:Type ToolTip}">
    <Setter Property="MinHeight" Value="150" />
    <Setter Property="Width" Value="350" />
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="Background" Value="#ECEFF4" />
    <Setter Property="BorderBrush" Value="#394F6D" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToolTip}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,1">
                    <Grid Background="{TemplateBinding Background}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="40" />
                            <RowDefinition Height="*" />
                            <RowDefinition Height="30" />
                        </Grid.RowDefinitions>

                        <Label
                            Grid.Row="0"
                            MinHeight="40"
                            Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:ToolTipExtensions.Header)}"
                            FontFamily="Arial"
                            FontSize="13"
                            FontWeight="Bold"
                            Foreground="{TemplateBinding Foreground}" />

                        <TextBlock
                            Grid.Row="1"
                            MinHeight="40"
                            Foreground="{TemplateBinding Foreground}"
                            Text="{Binding ToolTip, RelativeSource={RelativeSource Mode=TemplatedParent}}" />

                        <Label
                            Grid.Row="2"
                            MinHeight="30"
                            Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:ToolTipExtensions.Footer)}"
                            FontFamily="Arial"
                            FontSize="12"
                            FontStyle="Italic"
                            FontWeight="Regular" />
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Im doing something wrong, because the tooltip dosent show anything. No ToolTip, no Header, no Footer. Whats the problem with it? Wrong DataContext for the ToolTip?

Heres the usage:

<Button
    local:ToolTipExtensions.Header="Button"
    local:ToolTipExtensions.Footer="To show additional Info"
    Content="Test"
    ToolTip="Some fancy Text"
    ToolTipService.InitialShowDelay="500"
    ToolTipService.ShowDuration="999999999" />

Regards,

SyLuS

Answer 1

ToolTip for every control will be updated

Modified Style

<VM:DependecnyObjectTypeConverter x:Key="ConverterPa"/>
    <Style TargetType="{x:Type ToolTip}">
        <Setter Property="MinHeight" Value="150" />
        <Setter Property="Width" Value="350" />
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="Background" Value="#ECEFF4" />
        <Setter Property="BorderBrush" Value="#394F6D" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,1">
                        <Grid Background="{TemplateBinding Background}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="40" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="30" />
                            </Grid.RowDefinitions>

                            <Label
                        Grid.Row="0"
                        MinHeight="40"
                        Content="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Converter={StaticResource ConverterPa},ConverterParameter=Header}"
                        FontFamily="Arial"
                        FontSize="13"
                        FontWeight="Bold"
                        Foreground="{TemplateBinding Foreground}" />

                            <TextBlock
                        Grid.Row="1"
                        MinHeight="40"
                        Foreground="{TemplateBinding Foreground}"
                        Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Converter={StaticResource ConverterPa},ConverterParameter=ToolTip}"/>
                            <Label
                        Grid.Row="2"
                        MinHeight="30"
                       Content="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Converter={StaticResource ConverterPa},ConverterParameter=Footer}"
                        FontFamily="Arial"
                        FontSize="12"
                        FontStyle="Italic"
                        FontWeight="Regular" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

IValueConverter:

  public class DependecnyObjectTypeConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var plTarget = value as System.Windows.Controls.ToolTip;
            if (parameter.ToString() == "Header")
            {
                return plTarget.PlacementTarget.GetValue(ToolTipExtensions.HeaderProperty);
            }
            if (parameter.ToString() == "ToolTip")
            {
                return plTarget.PlacementTarget.GetValue(Control.ToolTipProperty);
            }
            if (parameter.ToString() == "Footer")
            {
                return plTarget.PlacementTarget.GetValue(ToolTipExtensions.HeaderProperty);
            } 
            return null;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }