Forums | NoesisGUI

Hi,

Very much enjoying digging into Studio - very powerful capability. I'm trying to do something i think basic in Studio - but am a bit stumped. Gone through the following steps to try and understand how to change style of a selected item in a ListBox

- I have set up a main page with page/grid/listbox;
- created the schema for a list item and another for a list box containing the list item schema (just a single string);
- created a sample data set and assigned it to root
- added a data template to the list item schema
- in the template, added a textblock under the grid and bound it to the list item schema string
- and bound the listbox in the navigator with the listbox schema

all behaves fine when i run

What i'm trying to do is change from the default mouseover and selected styles.

I can manage mouseover - as i open the data template for the listbox item schema, go to the styling on the right to add style. Then i can add a setter for mouseover - very nice.
However, when i try to do the same for IsSelected - i don't see this option in the properties.

I experimented some thinking maybe i should have a listboxitem in the data template rather than a textBlock - however, when i try and create a binding for the listboxitem directly, it consistently crashes Studio.

I thought then i needed to add a listBoxItem element and a textblock underneath - and while i am able to now find IsSelected as an option - the style does not come through and i get an odd intermittent behavior when i select - it sporadically updates the selected cell with the default color. So, not sure if this parented approach of TextBlock to ListBoxItems works.

I looked through documents and forums - but couldn't find something similar - and went through the Squad code - but couldn't reverse engineer what steps were taken in Studio (i'm trying to working strictly through studio without hand editing the XAML under the hood)

Any guidance would be appreciated.

Cheers!

Hi,

I'm not sure what styles and templates you're using, but before asking anything I'm going to summarize all the elements involved in a ListBox (and any ItemsControl) because it is a complex scenario.

A ListBox is an ItemsControl which contains a list of items (usually from a collection set in the ItemsSource property). Each of the items (data items to be more specific) is wrapped by a ListBoxItem (the container) that manages the selection logic among other common things like mouse over or pressed states. The ListBoxItems are placed inside a panel defined by the ItemsPanel property, which is an ItemsPanelTemplate that just contains the panel class you want to use to layout your items (by default a VirtualizingStackPanel set to vertically stack).

To summarize the properties that are involved and what are they used for, see below:

ListBox

• ItemsSource: collection of data items
• Template: ControlTemplate defining the appearance of the ListBox control itself. Usually defined as a ScrollViewer with an ItemsPresenter as content.
• Style: List of property setter values you want to assign to all ListBox controls using this Style.

• ItemsPanel: ItemsPanelTemplate defining the panel used to layout the ListBoxItems.

• ItemContainerStyle: List of property setter values you want to assign to all ListBoxItem containers automatically generated to wrap each of the data items. This style usually sets the Template property, so you can define the aspect of the ListBoxItem (common visual states: mouse over, pressed, disabled; and selection visual states: selected, unselected).

• ItemTemplate: DataTemplate defining how the data is presented. This usually only deals with the data itself (binding to the item properties) to decide how it looks. You shouldn't put selection logic in this template unless it really affects how data is presented.

Given this information, if you have to define how an item looks when IsSelected is true, my first choice will be to use the ListBoxItem template set in the ListBox.ItemContainerStyle. There you will be able to access the Selection VisualStates and easily define that state. The next logical place will be the ItemContainerStyle itself, if you just want to change a ListBoxItem property depending on the value of IsSelected (using the conditional Setters in the Style). And the last resort will be the ItemTemplate (not recommended unless necessary), using conditional setters or triggers that bind to the relative ancestor type (Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListBoxItem}}").

Anyway, just want to remark that Studio could be buggy as we're still in alpha stage and don't show the correct list of properties in the triggers for example. In that case you should report it and we will fix it for the next release.

Hi sfernandez,

First off... many, many thanks for your quick and thorough response to my question. Just what i needed. And as a side note - the wisdom of building off of WPF is palpable. Not only is it a powerful framework for building exquisite UI's - dev's can leverage all the documentation/examples for WPF/XAML and cross-check with the Noesis documentation.

Secondly - the detail you provide is exactly the kind of helpful resource that developers can leverage when they review forums. You not just answered my question - but provided helpful guideposts for others.

Thirdly, your recommendation to utilize the ItemContainerStyle was spot on - easy to set up directly in Studio from the styling associated with the listbox and had all the setter options i needed.

I must say, i'm really seeing the power of leveraging Studio - i have a pipeline set up from Noesis Studio to Visual Studio to Unity - where now i can use Noesis Studio to directly edit the XAML and have it update immediately in my Unity environment - working the code-behind in visual studio along the way. The improved velocity using Noesis Studio, even in alpha state, is impressive.

And again, quick and thorough responses like these in the forums are super helpful to us Studio alpha users - many thanks!

Cheers!

-Fel