Search code examples
c#wpfpopuptooltip

WPF: ToolTip in New Window


I have the following style for a ToolTip:

        <Style x:Key="ToolTipPopUp" TargetType="{x:Type ContentControl}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ContentControl}">
                        <StackPanel Orientation="Horizontal">
                            <StackPanel.ToolTip>
                                <ToolTip Visibility="Hidden" />
                            </StackPanel.ToolTip>
                            <ContentPresenter />
                            <Image Source="/Resources/info.png" 
                                   ToolTip="{TemplateBinding ToolTip}"
                                   Height="12"
                                   VerticalAlignment="Top" />
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

This is called via:

            <ContentControl Style="{StaticResource ToolTipPopUp}" ToolTip="Hello world">
                <CheckBox Content="I am a check box" />
            </ContentControl>

This allows me to attach a ToolTip to any control I want and displays the ToolTip as expected.

enter image description here

The customer is now requesting that the ToolTip be shown in a pop-up window as the content can sometimes be rather lengthy.

Is there a way to convert this style to show a pop-up window? I have read that a Window cannot be used by ContentControl so if there is a different way to do this I am open to that.

EDIT

I have a static resource of the instructions (not shown for clarity) that I bind to the ToolTip (that is what I am doing now). I was thinking of creating a singleton window that would open when the user clicks on the tooltip icon (blue 'i'), would update a property in the pop-up window (i.e., the tooltip content) whenever a tooltip icon is clicked (so if the window is already open, the instructions within the window change). The user can then close the window when they chose.

SOLUTION

Thanks to Theodosius for pointing me in the right direction. Here is how I implemented this:

MainPageViewModel.cs (top-most window of executing program):

    private Window _toolTipWindow;

    /// <summary>
    /// Display the tool tip text in a new window
    /// </summary>
    public void ToolTipPopUpClicked(object sender, RoutedEventArgs e)
    {
        if (_toolTipWindow == null || !_toolTipWindow.IsVisible)
        {
            _toolTipWindow = new Window();
        }

        String _instructions = (((Button)sender).TemplatedParent as ContentControl).ToolTip.ToString();

        _toolTipWindow.Width = 300;
        _toolTipWindow.Height = 200;

        _toolTipWindow.Content = _instructions;
        _toolTipWindow.Show();
    }

StylesDictionary.xaml

<Style x:Key="ToolTipPopUp" TargetType="{x:Type ContentControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ContentControl}">
                <StackPanel Orientation="Horizontal">
                    <ContentPresenter />
                    <Button Width="Auto">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="Click">
                                <ei:CallMethodAction TargetObject="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}},
                                                                                        Path=DataContext}"
                                                             MethodName="ToolTipPopUpClicked" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                        <Button.Template>
                            <ControlTemplate>
                                <Image Source="Resources/info.png" 
                                            ToolTip="{TemplateBinding ToolTip}"
                                            Height="12"
                                            VerticalAlignment="Top" >

                                </Image>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

XAML file

            <ContentControl Name="PopupExample" 
                            Style="{StaticResource ToolTipPopUp}" 
                            ToolTip="Hello world">
                <CheckBox Content="I am a check box" />
            </ContentControl>

This retains the standard ToolTip functionality and provides a pop-up window when the user clicks on the tool tip icon (blue 'i').


Solution

  • What about this then?

    <Style x:Key="ToolTipPopUp" TargetType="{x:Type ContentControl}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ContentControl}">
                        <StackPanel Orientation="Horizontal">
                            <StackPanel.ToolTip>
                                <ToolTip Visibility="Hidden" />
                            </StackPanel.ToolTip>
                            <ContentPresenter />
                            <Image Source="/info.png" 
                                   ToolTip="{TemplateBinding ToolTip}"
                                   Height="12"
                                   VerticalAlignment="Top" >
                                <Image.Style>
                                    <Style>
                                        <EventSetter Event="Mouse.MouseEnter" Handler="Show_PopupToolTip" />
                                        <EventSetter Event="Mouse.MouseLeave" Handler="Hide_PopupToolTip"/>
                                    </Style>
                                </Image.Style>
                            </Image>
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    

    Code-behind...

    Window win;
    
        private void Show_PopupToolTip(object sender, MouseEventArgs e)
        {
            var fred = ((Image)sender).TemplatedParent;
    
            if (fred != null)
            {
                ContentControl c = fred as ContentControl;
                string myText = c.ToolTip.ToString();
    
                if (!String.IsNullOrEmpty(myText))
                {
                    if (win == null || !win.IsVisible)
                        win = new Window();
                    win.Height = 275;
                    win.Width = 275;
                    win.Content = myText;
                    win.Show();
                }
            }
        }
        private void Hide_PopupToolTip(object sender, MouseEventArgs e)
        {
            //if (win != null)
            //{
            //    win.Close();
            //}
        }