Toggle ToolTip of a Button control using only XAML

Question

The title explains the end-goal.

Right now the problem is that I can't even change the ToolTip with one click to something else.

My XAML is:

<Button x:Name="btn" Height="24" Margin="107,59,109,0" VerticalAlignment="Top">
    <ToolTipService.ToolTip>
        <TextBlock>Hi</TextBlock>
    </ToolTipService.ToolTip>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Click">
            <ei:ChangePropertyAction TargetObject="{Binding ElementName=btn}" PropertyName="ToolTipService.ToolTip" Value="Jeroen"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <Image x:Name="icon" Height="16" Source="Images/FaceSad.png" Stretch="Fill" Width="16"/>
</Button>

I am doing this for a designer who works exclusively in XAML and I don't want to use C#. Is that possible? And does anyone know how to do this with XAML trigger and EventTriggers?

Answer 1

The ChangePropertyAction is a fairly simplistic object it literally looks for a public property called "ToolTipService.ToolTip". It does not parse this name to determine that its an Attached property.

Your code currently relies on the tool tip service creating a Tooltip control for you but if you create one yourself you can give it a name that can be referenced. You can then manipulate its Content property. Like this:-

<Button x:Name="btn" Height="24" Margin="107,59,109,0" VerticalAlignment="Top">
    <ToolTipService.ToolTip>
        <ToolTip x:Name="btnToolTip">
          <TextBlock>Hi</TextBlock>
        </ToolTip>
    </ToolTipService.ToolTip>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Click">
            <ei:ChangePropertyAction TargetObject="{Binding ElementName=btnToolTip}" PropertyName="Content">
              <ei:ChangePropertyAction.Value>
                <TextBlock>Jeroen</TextBlock>
              <ei:ChangePropertyAction.Value>
            </ei:ChangePropertyAction>
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <Image x:Name="icon" Height="16" Source="Images/FaceSad.png" Stretch="Fill" Width="16"/>
</Button>

Answer 2

Just as note:

This didn't help me reach my goal as stated in the title and what I ended up doing was this:

Firstly, on the UserControl I added:

< ... ToolTipService.ToolTip="Happy" Tag="Happy|Sad" MouseLeftButtonUp="ToolTipSwitch" />

Then, I have this function in my code behind:

    private void ToolTipSwitch(object sender, RoutedEventArgs e)
    {
        // ...
        // Whatever is in the code for a MouseButtonUp
        // ...

        #region ToolTip switch code

        UserControl tooltipParent = sender as UserControl;
        Char[] pipe = {'|'};
        String[] tooltips = tooltipParent.Tag.ToString().Split(pipe, StringSplitOptions.None);
        if (ToolTipService.GetToolTip(tooltipParent).ToString() == tooltips[0])
            ToolTipService.SetToolTip(tooltipParent, tooltips[1]);
        else if (ToolTipService.GetToolTip(tooltipParent).ToString() == tooltips[1])
            ToolTipService.SetToolTip(tooltipParent, tooltips[0]);

        #endregion ToolTip switch code
    }