Create custom hint in Xojo IDE using Window control

kuba - Monday, 26 March 2018
Share:
Create custom hint in Xojo IDE using Window control

Welcome back to our Xojo tutorial series. We learned already how to create custom Listbox looks and display two types of notifications on Mac in Xojo IDE. Today we will write a hint component using Window control. Let's start coding!

A hint is a great way to display user a suggestion or reveal additional information about anything we like. Because we will use Window control to display the hint we can design it using available controls from Xojo Library. To make the project more interesting we will use Listbox as our information database. After running Xojo IDE create Desktop project and go to Window Editor. Next drag and drop from the Library ListBox component on our application Window1.

Add some text using Listbox1 InitalValue property from Xojo Inspector. We used basic software description, but you can type everything you like. Additionally, you can create a second column with Listbox ColumnCount property. To do it enter value 2 and you are ready to go. Now from menu select Insert -> Window. On our Window2 we will drag now two StaticText and one Canvas1 control. Change the frame type of your Window2 to Plain Box and you can also select a different Window2 color.

The only part where we will add code is on Mouse EventHandler. Add MouseEnter EventHandler to Listbox1 and insert there Window2.Show. Add MouseExit EventHandler to Listbox1 and insert there Window2.Close. The most difficult part of this tutorial is to display text from Listbox depending on mouse position. To do it create Listbox1 MouseMove EventHandler. Now add the code below.

Dim row, column As Integer

row=Me.RowFromXY(System.MouseX - Me.Left - Self.Left, System.MouseY - Me.Top - Self.Top)
column=Me.ColumnFromXY(System.MouseX - Me.Left - Self.Left, System.MouseY - Me.Top - Self.Top)

Window2.Top = System.MouseY+ 18
Window2.Left = System.MouseX+ 10

Window2.StaticText1.Text = Listbox1.cell(row, 0)
Window2.StaticText2.Text = Listbox1.cell(row, 1) 

When you start the application using Xojo IDE you will see our designed hint always when you move the cursor on Listbox control. This is just a quick example how can you use Window control to make it a working component in Xojo IDE. Hope you find this tutorial useful and see you next time!