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

时间:2019-03-31 17:36:26

标签: forms xamarin layout autocomplete custom-controls

我想创建带有建议的自定义进入控件。在我的应用中,我想使用XF.Material library-我的应用必须位于iOS和Android的Material Design中。现在,我想使用“库中的物料输入”实现自动完成输入,因此我尝试修改Xamarin Custom Controls Autocomplete

它正在工作,但是我想在其他控件前面显示Frame。当前,带有项的框架未进行z索引编制,并将其他控件下移。有什么方法可以隐藏框架后面的其他控件?

  1. 没有列表的条目

enter image description here

  1. 带有列表的条目:

enter image description here

<?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>

2 个答案:

答案 0 :(得分:0)

我建议将StackLayout切换为Grid并将所有内容放入其中,然后进行覆盖(这就是Grid所需要的)。您可以使用VerticalOptionsMaterialAutoComplete中的Label进行游戏,并在Margin属性不完全符合您的期望的情况下,使用每个属性的VerticalOptions属性进行调整显示。

(在我们的一个项目中)我确实对此进行了测试,并进行了工作,例如,您可以更改Margin上的Label值,或在MaterialAutoComplete上添加一些值,或尝试使用网格的Padding属性来做些事情。

请注意订单,如果您希望Label处于Grid控制之下,则必须将MaterialAutoComplete首先放在<?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>

brew install jupyterlab

答案 1 :(得分:0)

只需为边距(可能是宽度/高度)提供绑定。我已经用这种方式做到了,而且有效。 但是自动建议通常是通过键和计时器事件来完成的。最后一个是短暂的按键事件之间的超时。在codeproject上有一些示例。