Question

我正在开发一个Xamarin Forms项目，我需要有一个下拉列表，如html下拉图片。

我已经将StackLayout用于按钮和Listview（最初隐藏），点击按钮时会将可见性更改为true。列表应该在其他按钮上方打开，但是当列表打开时，所有其他stackLayout在图像中移动到下面。

我希望列表视图在其他视图上方打开。屏幕代码如下。任何人都可以帮助我在下面的代码中做出改变。

 <StackLayout Orientation="Vertical">

    <StackLayout Orientation="Horizontal" WidthRequest="400">
         <Label Text="Label 1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> </Label>
         <StackLayout x:Name="addList" WidthRequest="200"  HorizontalOptions="Start">
            <Button Clicked="onBtnClicked" Text="Button 1" WidthRequest="200"></Button>
            <ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
         </StackLayout>
   </StackLayout>

    <StackLayout Orientation="Horizontal" WidthRequest="400">
        <Label Text="Label 2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Label>
        <StackLayout x:Name="addList" WidthRequest="200"  HorizontalOptions="Start">
            <Button Clicked="onBtnClicked" Text="Button 2" WidthRequest="200"></Button>
            <ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
        </StackLayout>
    </StackLayout>

   <StackLayout Orientation="Horizontal" WidthRequest="400">
        <Label Text="Label 3" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Label>
        <StackLayout x:Name="addList" WidthRequest="200"  HorizontalOptions="Start">
            <Button Clicked="onBtnClicked" Text="Button 3" WidthRequest="200"></Button>
            <ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
        </StackLayout>
    </StackLayout>

</StackLayout>

编辑：

这是我的实际XAML

   <StackLayout BackgroundColor="#FFFFFF" Padding="20,20,200,20" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

    <StackLayout x:Name="PreferencesBodyLayout" Padding="10,10,10,10" Orientation="Vertical">



        <StackLayout x:Name="LanguageLayout" Orientation="Horizontal" HeightRequest="50" HorizontalOptions="FillAndExpand"  >
            <Label Text="Change Language"   Font="Large" TextColor="Black" HorizontalOptions="StartAndExpand" />

            <RelativeLayout x:Name="LanguageSelectionRelativeLayout" HorizontalOptions="EndAndExpand">
                <StackLayout  Padding="2" Spacing="0" BackgroundColor="#EFEFEF" WidthRequest="150"  >
                    <StackLayout x:Name="LanguageDropDown" Padding="0" Spacing="0"  Orientation="Horizontal" BackgroundColor="White"  VerticalOptions="FillAndExpand">
                        <StackLayout HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
                            <Label x:Name="SelectedLanguageLabel" StyleId="Settings_ChangeLanguage_Label" Margin="5" Text="{Binding SelectedLanguageLabelText}" TextColor="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Font="Medium"/>
                        </StackLayout>
                        <StackLayout  HorizontalOptions="End">
                            <Image Source="ge_arrow_down.png" HeightRequest="20" WidthRequest="20" VerticalOptions="CenterAndExpand" >
                            </Image>
                        </StackLayout>
                    </StackLayout>

                    <ListView x:Name="LanguageList"  IsVisible="{Binding ShowLanguagePopup}"  BackgroundColor="Gray" VerticalOptions = "FillAndExpand"

                          RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
        ElementName=LanguageDropDown, Property=Y,Factor=1,Constant=40}"         
                          RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
        ElementName=LanguageDropDown,Property=X,Factor=1,Constant=0}"      
                          RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView,
        ElementName=LanguageDropDown,Property=Width,Factor=1,Constant=0}"        
                          RelativeLayout.HeightConstraint="{ConstraintExpression
        Type=RelativeToView,
        ElementName=LanguageDropDown,Property=Height,Factor=1,Constant=10}"
        />

                </StackLayout>
            </RelativeLayout>
            <StackLayout.GestureRecognizers>
                <TapGestureRecognizer
                    Command="{Binding ChangeLanguageCommand}" />
            </StackLayout.GestureRecognizers>
        </StackLayout>

        <StackLayout   Orientation="Horizontal" HeightRequest="50">
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand"  >
                <Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
            </StackLayout>
            <Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
            </Image>
        </StackLayout>

        <StackLayout >
            <BoxView  BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
        </StackLayout>

        <StackLayout   Orientation="Horizontal" HeightRequest="50">
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand"  >
                <Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
            </StackLayout>
            <Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
            </Image>
        </StackLayout>

        <StackLayout >
            <BoxView  BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
        </StackLayout>

        <StackLayout   Orientation="Horizontal" HeightRequest="50">
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand"  >
                <Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
            </StackLayout>
            <Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
            </Image>
        </StackLayout>

        <StackLayout >
            <BoxView  BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
        </StackLayout>

        <StackLayout   Orientation="Horizontal" HeightRequest="50">
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand"  >
                <Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
            </StackLayout>
            <Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
            </Image>
        </StackLayout>

        <StackLayout >
            <BoxView  BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
        </StackLayout>

    </StackLayout>

</StackLayout>

Answer 1

我从未使用过它，但我认为你可以尝试使用RelativeLayout。这是一个小演示：2个按钮和一个ListView。 ListView对RedButton有一些约束。您可以尝试显示/隐藏它并查看绿色按钮（对RedButton有约束）也不会移动

(?s)(^.*)

在xamarin表单的另一个视图上打开下面的列表视图按钮

1 个答案: