Rich User Experience through Tool Tip and Trigger in WPF

Shahvimall
Posted by in WPF category on for Beginner level | Points: 250 | Views : 2654 red flag

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.

Page copy protected against web site content infringement by Copyscape

About the Author

Shahvimall
Full Name: vimal shah
Member Level: Starter
Member Status: Member
Member Since: 10/11/2012 11:36:29 PM
Country: India
http://vimalshah26-howdowedoit.blogspot.in/

Vimal is a .Net Developer who has exposure to C#, VB, WPF, WCF, Silver Light, ADO.NET, SQL

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)