Collapse All Expand All

This walkthrough shows you how to display a rich tooltip by using UXCallOut control.

In this walkthrough, you perform the following tasks:

• Create a new ClientUI Application project using Intersoft ClientUI Application project template.
• Create UXCallOut to display rich tooltip.

Prerequisites

You need the following components to complete this walkthrough:

• Visual Studio 2010
• Silverlight 4 Tools for Visual Studio 2010
• Intersoft ClientUI

Creating a new ClientUI Application Project

The first step is to create a new ClientUI Application project using Intersoft ClientUI Application project template in Visual Studio.

To create the ClientUI Application project

1. Start Visual Studio 2010.
2. Create a new ClientUI Application project using Intersoft ClientUI Application project template. To learn more, see Walkthrough: Create New Intersoft ClientUI Application Template.

To add the resources file

1. In your project, create new folder with name Images.
2. In Images folder, copy Information.png from [Intersoft Installation Folder]\Intersoft WebUI Studio 2010 R1\Samples\SL4\ClientUI Samples\Intersoft.ClientUI.Samples.Assets\Images\Commands\).

Creating Simple Application Using UXCallOut to Display Rich ToolTip 

This section shows you how to create UXCallOut to display rich tooltip.

1. Add a new UXPage to your Silverlight project and name it RegisterPage.xaml. For more information on how to add a new item in Visual Studio, see Walkthrough: Add New Item such as Page, Dialog Box and Window in VS 2010.
2. Open RegisterPage.xaml.
3. Set Width property and Height property in LayoutRoot to 220 and 120.
4. Add Intersoft:DockPanel to the LayoutRoot and set FillChildMode property to Custom.
5. Add GlassLabel control to the Intersoft:DockPanel and set the Intersoft:DockPanel.Dock property to Top and the Content property to Register.

   XAML	Copy Code
   <Grid x:Name="LayoutRoot" Width="220" Height="120"> <Intersoft:DockPanel FillChildMode="Custom"> <Intersoft:GlassLabel Intersoft:DockPanel.Dock="Top" Content="Register" /> </Intersoft:DockPanel></Grid>

   
   
6. Add StackPanel after GlassLabel control and set the Intersoft:DockPanel.IsFillElement to True and HorizontalAlignment to Center.
7. Add FieldLabel control to the StackPanel and set the Header property to Username and the HeaderWidth to 70.
8. Add UXTextBox control to the FieldLabel control and set the Width property to 100.

   XAML	Copy Code
   <Intersoft:DockPanel... > ... <StackPanel Intersoft:DockPanel.IsFillElement="True" HorizontalAlignment="Center"> <Intersoft:FieldLabel Header="Username" HeaderWidth="70"> <Intersoft:UXTextBox Width="100" /> </Intersoft:FieldLabel> </StackPanel></Intersoft:DockPanel>

   
   
9. Add more FieldLabel control and set the Header property to Password and the HeaderWidth property to 70.
10. Add StackPanel to the FieldLabel control and set the Orientation to Horizontal.
11. Add UXTextBox control to the StackPanel and set the Width property to 100.

    XAML	Copy Code
    <StackPanel Intersoft:DockPanel.IsFillElement="True" HorizontalAlignment="Center"> ... <Intersoft:FieldLabel Header="Password" HeaderWidth="70"> <StackPanel Orientation="Horizontal"> <Intersoft:UXTextBox Width="100" /> </StackPanel> </Intersoft:FieldLabel></StackPanel>

    
    
12. Add UXCallOut control after UXTextBox control and set the PreferredPosition to Right, the MouseEnterAction to ShowPopup and the MouseLeaveAction to HidePopup, this control used to show a tooltip when mouse over it and will hide the the tooltip when mouse leave.
13. Add UXCallOut.Header to the UXCallOut.
14. Add Image control to the UXCallOut.Header and set the Source property to /WalkthroughUseUXCalloutToAchieveRichTooltip;component/Images/Information.png.
15. Add TextBlock control to the UXCallOut control and set the Text property to Password must be insert.

    XAML

    Copy Code

    <Intersoft:FieldLabel... > <StackPanel...> ... <Intersoft:UXCallOut PreferredPosition="Right" MouseEnterAction="ShowPopup" MouseLeaveAction="HidePopup"> <Intersoft:UXCallOut.Header> <Image Source="/WalkthroughUseUXCalloutToAchieveRichTooltip;component/Images/Information.png" Margin="5 0 0 0" /> </Intersoft:UXCallOut.Header> <TextBlock Text="Password must be insert" /> </Intersoft:UXCallOut> </StackPanel></Intersoft:FieldLabel>

    
    
16. Add UXButton after the FieldLabel and set the following properties to the control.
    

    Property	Value
    Content	Register
    Width	100
    HorizontalAlignment	Right
    Margin	0 0 25 0

    XAML	Copy Code
    <Intersoft:UXButton Content="Register" Width="100" HorizontalAlignment="Right" Margin="0 0 25 0" />

    
    
17. Finally build and run the project.

After the application is running in the browser, you can try to move your cursor towards information image. When the mouse enters the boundary of the image, the tooltip will be shown. Likewise, the tooltip will be hidden when the mouse leaves the images. See the following figure for the result.

Conclusion

In this walkthrough, you have learned how to create ClientUI project using project template. You also learned how to create UXCallOut to display a rich tooltip.