How can I display a list based on a variable from another iterated list on axaml?

[viniyr]

I'm trying to implement a ListBox that displays a list of items (List1). Each item has an Expander component, and when the user expands it, I need to display another ListBox (or ItemsRepeater) inside the Expander.Content.

The inner ListBox should dynamically bind its ItemsSource to a property of the parent item in the data context. I'm struggling with how to properly set up this binding to access the parent property.

<ListBox ItemsSource="{Binding List1}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Expander>
                <!-- Expander Header or other properties here -->
                ...
                <Expander.Content>
                    <!-- Inner ListBox bound to a property from the parent data context -->
                    <ListBox ItemsSource="{Binding Path=(ObjectFromDataContext)[$parent.Property]}">
                    </ListBox>
                </Expander.Content>
            </Expander>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

[Nemonek]

Hey there, if I correctly understood what you want it's not complicated:

<ListBox ItemsSource="{Binding List1}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Expander>
                <!-- Expander Header or other properties here -->
                ...
                <Expander.Content>
                    <ListBox ItemsSource="{Binding InnerList}">
                    </ListBox>
                </Expander.Content>
            </Expander>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

From the docs "When binding, Avalonia performs a hierarchical search of the logical control tree, starting with the control where the binding is defined, until it finds a data context to use."
For example, let's say that list1 is a list of User, which will have some properties and a list of emails: each item of the outer listbox will have a User instance as DataContext, and the expander, per what waid in the docs ( since you're not setting a specific DC) Avalonia will find the User of the parent control as DC for the expander and just use that.

If you need some more clarification feel free to ask!

[viniyr]

Its a little more complicated, I should have provided a more specific example with the actual use case. Here is the real scenario:

• I have a list of Country in List1, where each country has a CountryName ( e.g: United States , Brazil, Switzerland ) , CountryCode ( e.g US, BR, CH ), etc...
• These countries are displayed in a ListBox with an associated Expander.

( Here is the problem )

• When the user clicks the expand icon it should trigger an API call, passing CountryCode as parameter
• Then the function should populate the Expander.Content with the servers related to that country
• Users can have one or more items expanded at the same time

I dont know if my structure/logic is really bad here, but the Server is not directly related to the Country object (codewise) . So when the api is called I attach a property to another object, like CountryServers, that has the following structure:

CountryServers
{
BR: [server1, server2, server3],
CH: [server1]
}

And then on the expander content I tried to iterate over CountryServers[CountryCode(from the parent binding)] but it didnt work.

I’m not sure if I expressed myself clearly, but I would greatly appreciate it if you could help me. And thanks for the previous answer

[Nemonek]

I think I understand your problem.
You can try wrapping both your objects in another object like this:

    public class CountryServers
    {
        // With backing field
        public Country Country { get => this._country; }

        //With backing field
        public List<Server> Servers
        {
            get
            {
                // Check for null to initiate just one time. I'm not sure if it's going to be called instantly when the expander gets created.
                // I think not, because the expander content wouldn't be rendered so why access the servers list.
                // Also, you can check for this by doing F12 and checking the content property of the expander and see if there are those elements or not.
                if(this._servers == null)
                {
                    this._servers = // API call
                }
                return this._servers;
            }
        }
    }

Maybe even just have the country code instead of the whole reference to the Country instance ( dependin on what you need ).
Now you can just bind a list of this objects to the main listbox, still displays the country code, and then you can access the list of servers making an API call for the inner listbox.
The call results will be cached in the list, so that you won't make api calls every time for data you requested 5 seconds before.

Sorry for the late reply, I saw this now and today I'm quite busy. Hope this helps!