### Accordion Container

Hints for the Accordion Container.
The node used is defined as:
`Sub Process_Globals
Private Accordion1 As Accordion
...
End Sub`
Add a TitledPane
Create a layout with the B4J Visual Designer.
Recommend to use anchors for views defined.
Add the layout to a form, which will create the TitledPane.
Example using layout TitledPane1 with title Pane 1:
Accordion1.LoadLayout("TitledPane1", "Pane 1")
Notes:
• Each TitledPane has its own layout. Ensure to set anchors to handle resizing.
• LoadLayout returns a TitledPane, which enables to change its properties, i.e. Title.
TitledPane Changed Event
The event
Accordion1_PaneChanged (ExpandedPane As TitledPane)
handles changing the selected TitledPane.
Note:
Recommend to use IsInitialized befor making changes, i.e.
If ExpandedPane.IsInitialized Then ExpandedPane.Text = $"${DateTime.time(DateTime.now)}"$
List of TitledPanes
Get the list of TitledPanes:
Accordion1.Panes
Loop thru the list with For Each:
For Each tp As TitledPane In Accordion1.Panes
' Do something with the TitledPane
Dim text as String = tp.Text
...
Next
Set TitledPane ID
One way of setting a Pane ID is by looping through the list of Panes and set the ID:
Dim id As Int = 0
For Each tp As TitledPane In Accordion1.Panes
tp.Id = id
' Do something with the id
If id = 0 Then tp.Image = fx.LoadImage(File.DirAssets, "list.png")
id = id + 1
Next
Load an Image to the TitledPane
Dim tp as TitledPane
tp.Image = fx.LoadImage(File.DirAssets, "list.png")
The image list.png is located in the dir.assets folder and added to the B4J IDE Files Manager.
Set the TitledPane Title (Loop)
A sub example to change the title of a TitledPane.
' Set the title of a titledpane using the old title (text) to indicate the titledpane.
`Sub SetAccordionTitledPaneTitle(Old As String, New As String)
For Each tp As TitledPane In Accordion1.Panes
If tp.Text.Contains(Old) Then
tp.Text = New
Return
End If
Next
End Sub`
Set the TitledPane Title (SelectedItem)
If a TitledPane is expanded, then the TitledPane can be ontained with Accordion1.SelectedItem.
To go for sure use like
If Accordion1.SelectedItem.IsInitialized Then Accordion1.SelectedItem.Text = "New Title"
Set the TitledPane Title (Accordion PaneChanged Event)
The PaneChanged Event of the Accordion enables to use the expanded (=selected) TitledPane.
Example setting the actual time as TitledPane Title:
`Sub Accordion1_PaneChanged (ExpandedPane As TitledPane)
If ExpandedPane.IsInitialized Then ExpandedPane.Text = $"${DateTime.time(DateTime.now)}"$
End Sub`

Changed: , Category: Accordion, File: T6C158M1139.htm, ID: 1139