I would like to ask how does it work the "Selected Background Color Number" for a listbox into the editor? Because I would like to do exactly something like this but without using colors, I would like to use an image like an highlight bar whenever I select an index inside the list box. I can make to work this with the first 5 items into the listbox but whenever I have more than 5 items and use the scroll up or down button then everything go messy. To display the highlight bar I am doing something like this:
function PlaceBrightButtonForSave()
{
if (ListSave.SelectedIndex >= 0)
{
BtnBrightSave.Visible = true;
if (ListSave.SelectedIndex == 0) BtnBrightSave.SetPosition(20, 59);
else if (ListSave.SelectedIndex == 1) BtnBrightSave.SetPosition(20, 68);
else if (ListSave.SelectedIndex == 2) BtnBrightSave.SetPosition(20, 77);
else if (ListSave.SelectedIndex == 3) BtnBrightSave.SetPosition(20, 86);
else if (ListSave.SelectedIndex == 4) BtnBrightSave.SetPosition(20, 95);
}
}
Whenever I use to scroll up or down the listbox I have something like this:
function BtnDown1_OnClick(GUIControl *control, MouseButton button)
{
ListSave.ScrollDown();
SliderSaveSroll.Value = SliderSaveSroll.Max - ListSave.TopItem;
}
How do I should go ahead and to make this to work fine?
This is how the listbox and the highlight bar is looking in game:
(http://i.imgur.com/nnqhOnu.png)
When I have more than 5 items the list is acting weird. When I select a slot and then push the arrow down/up button on the right the font becomes gray (selected) but the bar doesn't place at the correct position, so to the selected index. For example, if I select the five item "a3" and then go to scroll the list down then the highlight bar is placed wrong as you can see here:
(http://i.imgur.com/1uLWOEG.png)
The highlight bar is placed to "a2" instead of "a3". How do I should handle this correctly?
Sorry I am really too busy right now to think about full solution, but I wanted to give a hint:
if (ListSave.SelectedIndex == 0) BtnBrightSave.SetPosition(20, 59);
else if (ListSave.SelectedIndex == 1) BtnBrightSave.SetPosition(20, 68);
else if (ListSave.SelectedIndex == 2) BtnBrightSave.SetPosition(20, 77);
else if (ListSave.SelectedIndex == 3) BtnBrightSave.SetPosition(20, 86);
else if (ListSave.SelectedIndex == 4) BtnBrightSave.SetPosition(20, 95);
What you have here is a formula where Y position depends on SelectedIndex. First position is at 59 and each next position is 9 pixels lower (68 - 59 = 9, 77 - 68 = 9 and so on).
So this code will do the same but is much shorter and will work regardless of how many items you want to put on screen:
int y = 59 + ListSave.SelectedIndex * 9;
BtnBrightSave.SetPosition(20, y);
EDIT: regarding scrolling, I think you need to take account of the topmost visible item. I am not sure, but maybe this could work:
int y = 59 + (ListSave.SelectedIndex - ListSave.TopItem) * 9;
BtnBrightSave.SetPosition(20, y);
First of all I would like to thank you very much for your time even though you are very busy, for me this means a lot. I have replaced my code with your formula:
function PlaceBrightButtonForSave()
{
if (ListSave.SelectedIndex >= 0)
{
BtnBrightSave.Visible = true;
int y = 59 + ListSave.SelectedIndex * 9;
BtnBrightSave.SetPosition(20, y);
}
}
Which is working beautifully. I have edited my scrolling code by adding your other formula as well too:
function BtnDown1_OnClick(GUIControl *control, MouseButton button)
{
ListSave.ScrollDown();
SliderSaveSroll.Value = SliderSaveSroll.Max - ListSave.TopItem;
int y = 59 + (ListSave.SelectedIndex - ListSave.TopItem) * 9;
BtnBrightSave.SetPosition(20, y);
}
function BtnUp1_OnClick(GUIControl *control, MouseButton button)
{
ListSave.ScrollUp();
SliderSaveSroll.Value = SliderSaveSroll.Max - ListSave.TopItem;
int y = 59 + (ListSave.SelectedIndex - ListSave.TopItem) * 9;
BtnBrightSave.SetPosition(20, y);
}
This is behaving insane, for example if I select the third item "r3" then I do scroll down with the list, the selected item is still "r3" as well but now the item is on the second position:
(http://i.imgur.com/DhDmD0g.png)
But supposely the highlight bar should be placed in the second position so to the selected index. Now the highlight bar is placed at the third position and if I do click the fourth position then the hightlight bar go to the last position (practically it jump a position) and if I click the last position I can see the highlight bar be placed outside the listbox graphic:
(http://i.imgur.com/SNnuY42.png)
Thing is the highlight bar can't be placed more down than the fifth position eventhough we have a thousand of items inside the listbox. I noticed that the highlight bar which I am using should be acting essentially like how Ags do the "Selected Background Color Number" into the editor, but I am not quite sure how to do this.
This is unexpected. I do not have this behavior when I make a test game, it moves with the scrolling properly.
First of all, I suggest not copying the placement code everywhere and instead call PlaceBrightButtonForSave(). This way you know the highlight button placement is always done using same rules.
Then, double check that your coordinates in PlaceBrightButtonForSave are correct. Test this by calling PlaceBrightButtonForSave from listbox's OnSelectionChanged event and click around.
One extra problem I was having myself is that when you scroll much and selected item goes away from the sight the button will still be displayed outside the listbox. This may be solved in two ways:
1) Make button invisible if SelectedIndex is outside the visible range of items:
2) Move selection to keep it in visible items.
The first variant could be perhaps done by adding code to PlaceBrightButtonForSave():
function PlaceBrightButtonForSave()
{
if (ListSave.SelectedIndex >= 0 && ListSave.SelectedIndex >= ListSave.TopItem && ListSave.SelectedIndex < ListSave.TopItem + ListSave.RowCount)
{
BtnBrightSave.Visible = true;
int y = 59 + (ListSave.SelectedIndex - ListSave.TopItem) * 9;
BtnBrightSave.SetPosition(20, y);
}
else
{
BtnBrightSave.Visible = false;
}
}
I have replaced the function "PlaceBrightButtonForSave()" with the one you showed me and then instead of copying the code for the scrolling I am calling the function "PlaceBrightButtonForSave()" and this is working 100% fine now! I really can't thank you enough for your help, I deeply appreciate it!