DropDownList in Xamarin.Forms

BacNongTien · May 14

Hi all,

I'm going to create new custom DropDownList in Xamarin.Forms. I created a new ContentView which contains very basic controls.

Button Title (HeightRequest = 50)
ListView

When click on the Button Title -> ListView will be toggled displaying (show/hide)

2 controls wrapped in an AbsoluteLayout (HeightRequest = 50).

I'm having Issues

-> When I click on the Button Title -> The ListView displayed but cannot clickable because the AbsoluteLayout has HeightRequest = 50.
-> When I put them into a StackLayout

                    <StackLayout Grid.Row="0" Orientation="Vertical">
                        <customDropDown:SimpleDropDown x:Name="ddl01"></customDropDown:SimpleDropDown>
                        <customDropDown:SimpleDropDown x:Name="ddl02"></customDropDown:SimpleDropDown>
                    </StackLayout>

When the ddl01 shown. It's z-index smaller than the ddl02. So the ListView of ddl01 is under ddl02.

-> Last thing, when I click ddl02 or any other control on the screen. How can I hide the ListView of ddl01 when it's showing?

Thanks & best regards,

Jarvan · May 14

When I click on the Button Title -> The ListView displayed but cannot clickable because the AbsoluteLayout has HeightRequest = 50.

You can only select the items within the height range.

Last thing, when I click ddl02 or any other control on the screen. How can I hide the ListView of ddl01 when it's showing?

Set the dd102.IsVisible = false in dd102's clicked_Event.

BacNongTien · May 15

@yelinzh said:

When I click on the Button Title -> The ListView displayed but cannot clickable because the AbsoluteLayout has HeightRequest = 50.

You can only select the items within the height range.

Last thing, when I click ddl02 or any other control on the screen. How can I hide the ListView of ddl01 when it's showing?

Set the dd102.IsVisible = false in dd102's clicked_Event.

So what is the solution if I want to show/hide like that?
Cannot do that, because there are several ddl like that. I can say, it will be hidden when lost focus. I don't have a solution yet

Jarvan · May 15

You can try to hide the list by clicking the button which also shows the list.

private void Button_Clicked(object sender, EventArgs e)
{
    if (listview.IsVisible)
    {
        listview.IsVisible = false;
    }
    else
    {
        listview.IsVisible = true;
    }
}

BacNongTien · May 15

@yelinzh said:
You can try to hide the list by clicking the button which also shows the list.
private void Button_Clicked(object sender, EventArgs e)
{
    if (listview.IsVisible)
    {
        listview.IsVisible = false;
    }
    else
    {
        listview.IsVisible = true;
    }
}

Hi yelinzh,

You quite don't understand my question. I want the listview on top of the other control in the same layout. Let's see the below image. When you click arrow on the DropDownList. The list will be displayed on top of the control under it. Normally if we use IsVisible, it only expands the height.

JiriMatejka · May 15

You can use SfComboBox component (www.syncfusion.com). It's for free for a single developer or small teams.

BacNongTien · May 15

> @JiriMatejka said:
> You can use SfComboBox component (www.syncfusion.com). It's for free for a single developer or small teams.

Unlucky, I have to create one mine

Jarvan · May 16

Expandable View can also achieve the dropdown list feature.

Refer to: https://www.c-sharpcorner.com/article/xamarin-forms-expandable-listview-with-a-sub-listview-mvvm-pattern/

BacNongTien · May 16

> @yelinzh said:
> Expandable View can also achieve the dropdown list feature.
>
>
>
> Refer to: https://www.c-sharpcorner.com/article/xamarin-forms-expandable-listview-with-a-sub-listview-mvvm-pattern/

Thanks for your post, I can do this but cannot do like the image I have attached

Xamarin

Quick Links

DropDownList in Xamarin.Forms

Answers