Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

Image As A ToolTip in WPF

Article:
Viewed:  2581 
Posted On:  24/11/2013 20:02:20 
I am going to show how we can show Image as a ToolTip in WPF Application. 

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 As ToolTip 1.png

Image 1.


Image As ToolTip 2.png

Image 2.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us