Silverlight—–Simulate Realization of Tooltip Based on Popup Floating Form Control

In this post, I want to introduce one tip: how to simulate Tip suspended effect by using Popup floating form. When we move mouse on one control, MouseMove method will be triggered. At the same time, Popup control setting will be displayed. Also, we can get the mouse location at that time. Accroding to changes of mouse location, we move Popup HorizontalOffset property (get or set horizontal distance between origin point and popup alignment point) and VerticalOffset property (get and set vertical distance between origin point and popup alignment point) meanwhile. If mouse is left custom control, set IsOpen property of Popup floating form as false to hide it.

Create a Custom Control and Name it TipWindow. XAML code as following:

<UserControl x:Class="SLRightMouseButton.TipWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
   
    <Grid x:Name="LayoutRoot" Background="White">
        <Popup x:Name="tip">
            <Grid x:Name="toolTip" Width="312" Height="200" >
                <Grid.Background>
                    <ImageBrush ImageSource="./BG.png"></ImageBrush>
                </Grid.Background>
                <Grid.RowDefinitions>
                    <RowDefinition  Height="auto"/>
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Row="0" Grid.Column="0" x:Name="mainContent" Foreground="White" FontSize="14" Height="Auto" HorizontalAlignment="Center"  Margin="0 20 0 0" VerticalAlignment="Top" />
            </Grid>

        </Popup>
    </Grid>
 </UserControl>

Note:

                      <Grid.Background>
                    <ImageBrush ImageSource="./BG.png"></ImageBrush>
                 </Grid.Background>

The above sentences are used to set background image of Grid as BG.png under current category. So, we need to add this file as reference in project.

The following shows important part source code of TipWindow.cs.

        public void BindControl(UIElement uc)

        {

            uc.MouseLeave += new MouseEventHandler(ti_MouseLeave);

            uc.MouseMove += new MouseEventHandler(ti_MouseMove);

        }

        public void CancelBindControl(UIElement uc)

        {

          

            uc.MouseLeave -= new MouseEventHandler(ti_MouseLeave);

            uc.MouseMove -= new MouseEventHandler(ti_MouseMove);

        }

        ///<summary>

        ///Hide Tooltip when Mouse Leaving Custom Control

        ///</summary>

        ///<param name="sender"></param>

        ///<param name="e"></param>

        private void ti_MouseLeave(object sender, MouseEventArgs e)

        {

            this.tip.IsOpen = false;

        }

        ///<summary>

        ///Tooltip Moves when Mouse Moving

        ///</summary>

        ///<param name="sender"></param>

        ///<param name="e"></param>

        private void ti_MouseMove(object sender, MouseEventArgs e)

        {

            this.tip.IsOpen = true;

            this.tip.HorizontalOffset = e.GetPosition(null).X – 158;

            this.tip.VerticalOffset = e.GetPosition(null).Y – 202;

        }

There is a binding function BindControl(UIElement uc) on the above code. It can bind MouseMove and MouseLeave method by uc control which needs to get TipWindow floating box. Then, create a new custom control Rect.xaml and add a IsFlag propery, which indicates if TipWindow floating box is displayed. Add one rectangle control ti in xaml code.

        <Rectangle x:Name="ti" Width="50" Height="50" RadiusX="5" RadiusY="5" Fill="YellowGreen"></Rectangle>

Enter the following code in Rect.xaml.cs.

        private bool _IsFlag;

        TipWindow tipWindow = new TipWindow();

        ///<summary>

        ///Display TipWindow or not

        ///</summary>

        public bool IsFlag

        {

            get { return _IsFlag; }

            set

            {

                _IsFlag = value;

                if (_IsFlag == true)

                {

                    tipWindow.BindControl(this.ti);

                }

                else

                {

                   // tipWindow.CancelBindControl(this.ti);

                }

            }

        }

Rect custom control is created. Instantiate it and set IsFlag property as True.

MainPage.xaml.cs:

            Rect rect = new Rect();

            rect.Margin = new Thickness(250);

            rect.IsFlag = true;

            this.LayoutRoot.Children.Add(rect);

Two Components Recommend:

Spire.Doc, is used to operate MS Word document for .Net and Silverlight, including basic manipulations (generate, open, edit documents), mail merge and other Word functions manipulations.

Spire.XLS, is used to operate MS Excel for .NET and Silverlight, including basic manipulations (generate, open, edit files), chart creation and data exporting.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s