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

1 comment: