How we can show image as tool tip in WPF application,
we will learn this here. Here I am binding some images in a List Box and if you
mouse hover then that image will show as ToolTip.
Below is my XAML Code:
<Window x:Class="Image_As_ToolTip_In_WPF.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Image As ToolTip"
Height="400" Width="713" Loaded="Window_Loaded" Background="AliceBlue">
<Window.Resources>
<Style x:Key="ListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="2,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" SnapsToDevicePixels="true"
Background="#EEFFFFFF"
BorderBrush="#FFCCCCCC" RenderTransformOrigin="1,1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
BorderThickness="1">
<Grid>
<Image x:Name="img" ToolTipService.Placement="Top"
Source="{Binding Path=BookImageURI}" Height="70" Stretch="Fill" Width="70">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1" x:Name="scaleTrans"/>
</TransformGroup>
</Image.RenderTransform>
<Image.ToolTip>
<ToolTip BorderBrush="{x:Null}" Background="{x:Null}" Effect="{x:Null}"
DataContext="{Binding Path=PlacementTarget,
RelativeSource={x:Static RelativeSource.Self}}"
HasDropShadow="False">
<Border Background="{x:Null}" VerticalAlignment="Center"
Height="160" Margin="0" Width="100"
HorizontalAlignment="Center">
<Grid Background="{x:Null}">
<!--<Image
Source="Assets/thisimage.png" Stretch="Fill"/>-->
<Border Margin="8,9.583,8,52.5" Width="82" Height="95.197">
<Border.Background>
<LinearGradientBrush EndPoint="0.859,0.893" StartPoint="0.141,0.107">
<GradientStop Color="#FF98C897" Offset="0"/>
<GradientStop Color="#FFACE500" Offset="1"/>
<GradientStop Color="#FFCFF163" Offset="0.289"/>
</LinearGradientBrush>
</Border.Background>
<Image Source="{Binding Path=Source}"/>
</Border>
</Grid>
</Border>
</ToolTip>
</Image.ToolTip>
</Image>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
<VirtualizingStackPanel IsItemsHost="True" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</Window.Resources>
<Grid>
<ListBox x:Name="lbBook" Margin="38,181,41,26" ItemsPanel="{DynamicResource ItemsPanelTemplate1}"
ItemContainerStyle="{DynamicResource ListBoxItemStyle}" ItemsSource="{Binding}" />
</Grid>
</Window>
MyClass:
using System;
using System.Collections.Generic;using System.Linq;
using System.Text;
namespace Image_As_ToolTip_In_WPF
{
public class Book
{
public string
BookName
{
get;
set;
}
public string
BookImageURI
{
get;
set;
}
}
}
My XAML.cs code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace Image_As_ToolTip_In_WPF
{
/// <summary>
/// Interaction logic for
Window1.xaml
/// </summary>
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
List<Book>
bookList = new List<Book>
{
new Book{BookName="C#", BookImageURI="BookImage/1.jpg"},
new Book{BookName=".NET", BookImageURI="BookImage/2.jpg"},
new Book{BookName="Learn .NET", BookImageURI="BookImage/3.jpg"},
new Book{BookName="C#", BookImageURI="BookImage/4.png"},
new Book{BookName="C#", BookImageURI="BookImage/5.jpg"},
new Book{BookName="C#", BookImageURI="BookImage/6.png"},
new Book{BookName="C#", BookImageURI="BookImage/7.jpg"},
new Book{BookName="C#", BookImageURI="BookImage/8.jpg"},
new Book{BookName="C#", BookImageURI="BookImage/9.jpg"},
new Book{BookName="C#", BookImageURI="BookImage/10.png"},
};
lbBook.ItemsSource = bookList;
}
private void
Window_Loaded(object sender, RoutedEventArgs e)
{
}
}
}
When run the application:
Image 1.
Image 2.