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>
<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
Nice articles!!!
ReplyDeletePrashant Bhopale