CODEWITHSUNDEEP
c#wpfstylestooltip
BrianKE
BrianKE

Reputation: 4185

WPF: Style ToolTip with Image

Is it possible to create a style for ToolTip that would place an image next to the Item on which the tool tip resides and then show the tool tip text when the user hovers over the image? Something like this:

enter image description here

Currently I am doing a StackPanel to add the image with the tool tip like so:

<StackPanel Orientation="Horizontal">
    <CheckBox Content="Reload Employee Data"
              IsChecked="{Binding AdjustmentSettings.ReloadEmployeeData}" 
              Grid.Row="0"
              Grid.Column="0">
    </CheckBox>
    <Image Source="/DelphiaLibrary;Component/Resources/info.ico" 
           ToolTip="Check if you want to re-upload ...."/>
</StackPanel>

EDIT

Just to clarify, I am looking for a way to style ToolTip such that if I define ToolTip on any object (i.e., Button, CheckBox, etc.) the info image is shown and the tool tip text is placed on this info image.

I would like to be able to do something like this and still get the same as the stack panel above:

<CheckBox Content="Reload Employee Data"
                  IsChecked="{Binding AdjustmentSettings.ReloadEmployeeData}" 
                  Grid.Row="0"
                  Grid.Column="0"
                  ToolTip="Blah blah blah..."
                  Style="{StaticResource ToolTipImageStyle}">
</CheckBox>

And be able to apply this ToolTipImageStyle to any control (i.e., Button, CheckBox, TextBox, etc.). If that isn't possible can I style an individual control and just create different styles for different controls (one for buttons, another for TextBlock, etc.)?

Upvotes: 1

Views: 5789

Answers (1)

AzzamAziz
AzzamAziz

Reputation: 2161

This should do it. I couldn't figure out the color so just change that.

Source 1

Source 2

<Image Source="/DelphiaLibrary;Component/Resources/info.ico" Width="25" Height="25">
    <Image.ToolTip>
        <ToolTip Background="LightBlue">
            <TextBlock Width="200" TextWrapping="WrapWithOverflow">
                Check if you want to re-upload table foxpro.hrpersnl from the source. <LineBreak />
                Leave unchecked to use existing data that has been previously uplaoded.
            </TextBlock>
        </ToolTip>
    </Image.ToolTip>
</Image>

enter image description here

Update 1:

Source 1

In the App.xaml add this:

<Application.Resources>
    <Style TargetType="{x:Type ToolTip}">
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToolTip}" >
                    <TextBox Background="LightBlue" Width="200" TextWrapping="WrapWithOverflow" Text="{TemplateBinding ToolTip.Content}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Application.Resources>

Then in your XAML file change to:

Note: This will work with all object's tool tips.

<Image Source="Images/MenuImageZoomOut.png" Width="25" Height="25"
           ToolTip="Check if you want to re-upload table foxpro.hrpersnl from the source. Leave unchecked to use existing data that has been previously uplaoded." />

The image:

enter image description here

If this doesn't work, try this: Source

Upvotes: 1

Related Questions