Forum› Xamarin› Xamarin.Forms

DropDownList in Xamarin.Forms

BacNongTienBacNongTien VNMember ✭✭
in Xamarin.Forms

Hi all,

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

  1. Button Title (HeightRequest = 50)
  2. 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,

Tagged:

Answers

  • JarvanJarvan Member, Xamarin Team Xamurai

    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.

  • BacNongTienBacNongTien VNMember ✭✭

    @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.

    1. So what is the solution if I want to show/hide like that?
    2. 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
  • JarvanJarvan Member, Xamarin Team Xamurai

    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;
    }
}

  • BacNongTienBacNongTien VNMember ✭✭

    @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.

  • JiriMatejkaJiriMatejka CZMember ✭✭✭

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

  • BacNongTienBacNongTien VNMember ✭✭
    > @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 :(
  • JarvanJarvan Member, Xamarin Team Xamurai

    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/

  • BacNongTienBacNongTien VNMember ✭✭
    > @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
Sign In or Register to comment.