Monday, August 30, 2010

WPF - Custom Tooltip in WPF

Custom Tooltip

In WPF Tooltip property can a host any control like textblock,grid,panel etc.In other words, we can display another window with any number of controls as a tooltip of a control.

Lets create a custom tooltip in wpf

Step 1
Create a WPF application.

Step 2
Add a Button Control on Window,it is look like this


<Grid >
      <Button Margin="12,12,0,0" Name="button1" Height="23" VerticalAlignment="Top" HorizontalAlignment="Left" Width="76">About Me
      </Button>
</Grid>

Step 3
Inside the button control add a tooltip property,it is look like this

<Button Margin="12,12,0,0" Name="button1" Height="23" VerticalAlignment="Top" HorizontalAlignment="Left" Width="76">About Me
       
            <Button.ToolTip>

            </Button.ToolTip>
           
</Button>

Step 4
Inside a tooltip property add the contents like any controls like you want.it is look like this 

<Button.ToolTip>
                <Grid Background="DimGray" Width="400">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50*" />
                        <RowDefinition Height="93*" />
                        <RowDefinition Height="169*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="88*" />
                        <ColumnDefinition Width="190*" />
                    </Grid.ColumnDefinitions>

                    <Label Name="lblHeading" Grid.Column="0" Grid.ColumnSpan="2" Background="Brown" Foreground="white" FontSize="30" >About Me</Label>

                    <Image Name="img" Grid.Row="1" Grid.Column="0" Source="C:\Users\Kishor\Desktop\kishor.png" Stretch="Fill" />

                    <TextBlock Name="txtBAboutME" Padding="10" Grid.Column="1" 
         Grid.Row="1" Grid.RowSpan="2" TextWrapping="Wrap" TextAlignment="Left"
         HorizontalAlignment="Right" VerticalAlignment="Top" Foreground="White">
         My name is kishor naik. I am a freelancer dot net developer.I have a 2+ years experience in .net technology. 
         I have completed my BCA in 2009 with first class with distinction.My aiming to spread good information about developing software, usually on the Microsoft technologies.
         I have been mainly working on window based application and web based application.
                    </TextBlock>
                </Grid>
            </Button.ToolTip> 

Full XAML Code

<Window x:Class="SolWpfCustomTooltip.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Custom Tooltip" Height="300" Width="300" Background="Black">
    
    <Grid >
        <Button Margin="12,12,0,0" Name="button1" Height="23" VerticalAlignment="Top" HorizontalAlignment="Left" Width="76">About Me
        
            <Button.ToolTip>
                <Grid Background="DimGray" Width="400">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50*" />
                        <RowDefinition Height="93*" />
                        <RowDefinition Height="169*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="88*" />
                        <ColumnDefinition Width="190*" />
                    </Grid.ColumnDefinitions>

                    <Label Name="lblHeading" Grid.Column="0" Grid.ColumnSpan="2" Background="Brown" Foreground="white" FontSize="30" >About Me</Label>

                    <Image Name="img" Grid.Row="1" Grid.Column="0" Source="C:\Users\Kishor\Desktop\kishor.png" Stretch="Fill" />

                    <TextBlock Name="txtBAboutME" Padding="10" Grid.Column="1" 
         Grid.Row="1" Grid.RowSpan="2" TextWrapping="Wrap" TextAlignment="Left"
         HorizontalAlignment="Right" VerticalAlignment="Top" Foreground="White">
         My name is kishor naik. I am a freelancer dot net developer.I have a 2+ years experience in .net technology. 
         I have completed my BCA in 2009 with first class with distinction.My aiming to spread good information about developing software, usually on the Microsoft technologies.
         I have been mainly working on window based application and web based application.
                    </TextBlock>
                </Grid>
            </Button.ToolTip> 
            
        </Button>
    </Grid>
</Window>

Output
Move the mouser cursor pointer to the button control


Download
Download Source Code

2 comments:

  1. Nice articles!!!

    Prashant Bhopale

    ReplyDelete
  2. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a .Net developer learn from .Net Core Training in Chennai. or learn thru .Net Core Training in Chennai. Nowadays Dot Net has tons of job opportunities on various vertical industry.
    or Es6 Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete