This article shows how to provide a rich user experience by providing a perfect tool tip.
Introduction
This topic gives insight to the powerful capabilities of WPF and how it can provide a perfect and a rich user interface through tooltip and triggers.
Objective
Provide a perfect tooltip for a image column of the data grid and also give rich user interface with making it bigger on mouse over through triggers.
Using the code
Below is a data grid displaying records of car with usual fields like Name, Company Name and a Picture.
Below is what we are trying to achieve, when user mouse overs on the image of the car it is displayed as a
tool tip and also the size of the image is increased.
Below is the declaration of tool tip having a grid with two rows in the first row we will display the image with double size than the original and in the second row we will display the name and company of the car in labels.
we wiil use tooltip property of the image to do this.
<ToolTipService.ToolTip>
<Grid x:Uid="Grid_3">
<Grid.RowDefinitions>
<RowDefinition x:Uid="RowDefinition_8"/>
<RowDefinition x:Uid="RowDefinition_9"/>
</Grid.RowDefinitions>
<Image x:Uid="Image_1" Source="{Binding Path=Picture}" Width="400" Stretch="Fill" Grid.Row="0"/>
<Grid x:Uid="Grid_4" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Uid="ColumnDefinition_6" Width="Auto"/>
<ColumnDefinition x:Uid="ColumnDefinition_7" Width="Auto"/>
</Grid.ColumnDefinitions>
<Label x:Uid="Label_6" Content="{Binding Path=Name}" Grid.Column="1" Margin="0" Padding="2"/>
<Label x:Uid="Label_7" Content="{Binding Path=Company}" Grid.Column="0" Margin="0" Padding="2"/>
</Grid>
</Grid>
</ToolTipService.ToolTip>
Now to increase the size of the image on mouse over event we need to write a trigger as below in the image.style or we can write it in page style and than use it here.
<Image.Style>
<Style x:Uid="Style_3" TargetType="Image">
<Style.Triggers>
<Trigger x:Uid="Trigger_2" Property="IsMouseOver" Value="True">
<Setter x:Uid="Setter_4" Property="Width" Value="400"/>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
In the trigger we will set the value of the Width property with setter when the 'IsMouseOver' property is true.
Conclusion
This article shows how we can use WPF to provide rich user experience.