XAML 控件布局，在视图上覆盖其他控件

Question

我想创建带有建议的自定义条目控件。在我的应用程序中，我想使用XF.Material library - 我的应用程序需要在 iOS 和 Android 的 Material Design 中。现在我想用库中的材料条目来实现自动完成条目，所以我试图修改Xamarin Custom Controls Autocomplete

它工作正常，但我想在其他控件前面显示 Frame。目前 Frame with items 不是 z-indexed 并且会向下移动其他控件。有什么办法可以实现将其他控件隐藏在框架后面？

1. 没有列表的条目

1. 带有列表的条目：

<?xml version="1.0" encoding="UTF-8" ?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:MyApp.Controls"
             xmlns:ui="clr-namespace:XF.Material.Forms.UI;assembly=XF.Material.Forms"
             x:Class="MyApp.Controls.MaterialAutocomplete">
    <ContentView.Content>
        <StackLayout Spacing="0">
            <ui:MaterialTextField x:Name="MainEntry" TextChanged="SearchText_TextChanged" Focused="SearchText_Focused" Unfocused="SearchText_Unfocused" />
            <StackLayout x:Name="SuggestedItemsContainerBottom" IsVisible="false" BackgroundColor="Transparent" Margin="10,-17,10,0">
                <Frame x:Name="SuggestedItemsOuterContainer" BackgroundColor="White" HasShadow="false" OutlineColor="Silver" Padding="0">
                    <controls:RepeaterView x:Name="SuggestedItemsRepeaterView" ShowSeparator="true" SeparatorColor="Silver" SeparatorHeight="1" />
                </Frame>
            </StackLayout>
        </StackLayout>
    </ContentView.Content>
</ContentView>

带控件的我的视图：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:ui="clr-namespace:XF.Material.Forms.UI;assembly=XF.Material.Forms"
             xmlns:controls="clr-namespace:MyApp.Controls"
             x:Class="MyApp.Views.AddAddressPage">
    <ContentPage.Content>
        <ScrollView>
            <StackLayout Orientation="Vertical">
                <controls:MaterialAutocomplete 
                    BackgroundColor="Transparent"
                    AlwaysShowUnderline="True"
                    OpenOnFocus="true"
                    SearchMember="Value" 
                    SuggestionBorderColor="Silver" 
                    ShowSeparator="true" MaxResults="5" EmptyText="No element found"
                    SuggestionBackgroundColor="WhiteSmoke" 
                    Placeholder="Miasto" 
                    ItemsSource="{Binding Cities}" SelectedItemCommand="{Binding CitySelectedCommand}">
                    <controls:MaterialAutocomplete.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout Orientation="Horizontal" Padding="3">
                                    <Label Text="{Binding Value}" TextColor="Black" FontSize="Medium" />
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </controls:MaterialAutocomplete.ItemTemplate>
                </controls:MaterialAutocomplete>
                <Label Text=" tesst"/>
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

Answer 1

只需为边距和宽度/高度提供绑定。我已经这样做了，这很有效。 但是自动建议通常是通过键和计时器事件完成的。最后一个是短暂的重复键事件之间的超时。 codeproject上有一些例子。

Answer 2

我建议将StackLayout 切换为Grid 并将所有内容放入其中，然后您将获得覆盖（这就是我喜欢Grid 的方式）。您可以使用VerticalOptions 的MaterialAutoComplete 和Label 来调整所有内容，如果VerticalOptions 属性不完全符合您希望的显示方式，则使用每个属性的Margin 调整所有内容。

我确实测试了它及其工作（在我们的一个项目中），也许您可​​以更改Label 上的Margin 值，或者在MaterialAutoComplete 上添加一些值，或者尝试使用Padding 也是网格的属性。

注意顺序，如果你想让Grid“在”你的MaterialAutoComplete控制之下，你必须把Label放在第一位。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:ui="clr-namespace:XF.Material.Forms.UI;assembly=XF.Material.Forms"
             xmlns:controls="clr-namespace:MyApp.Controls"
             x:Class="MyApp.Views.AddAddressPage">
    <ContentPage.Content>
        <ScrollView>
            <Grid>
                <Label VerticalOptions = "Center" Margin="0,0,0,100" Text=" tesst"/>
                <controls:MaterialAutocomplete 
                    BackgroundColor="Transparent"
                    AlwaysShowUnderline="True"
                    OpenOnFocus="true"
                    SearchMember="Value" 
                    VerticalOptions = "StartAndExpand"
                    SuggestionBorderColor="Silver" 
                    ShowSeparator="true" MaxResults="5" EmptyText="No element found"
                    SuggestionBackgroundColor="WhiteSmoke" 
                    Placeholder="Miasto" 
                    ItemsSource="{Binding Cities}" SelectedItemCommand="{Binding CitySelectedCommand}">
                    <controls:MaterialAutocomplete.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout Orientation="Horizontal" Padding="3">
                                    <Label Text="{Binding Value}" TextColor="Black" FontSize="Medium" />
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </controls:MaterialAutocomplete.ItemTemplate>
                </controls:MaterialAutocomplete>
            </Grid>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>