Макет элемента управления XAML с наложением других элементов управления на представление - PullRequest
Новая
       26

Макет элемента управления XAML с наложением других элементов управления на представление

0 голосов
/ 31 марта 2019

Я хочу создать собственный элемент управления вводом с предложениями. В моем приложении я хочу использовать библиотеку XF.Material - мое приложение должно быть в Material Design для iOS и Android. Теперь я хочу реализовать автозаполнение при вводе материала из библиотеки, поэтому я пытаюсь изменить Xamarin Custom Controls Autocomplete

Это работает, но я хочу отобразить Рамку перед другими элементами управления. В настоящее время кадр с элементами не индексируется по 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>

My View с контролем: 

<?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 голосов
/ 01 апреля 2019

Просто укажите привязки для полей и, возможно, ширины / высоты.Я сделал это уже таким образом, и это сработало.Но самовнушение обычно выполняется с помощью события key и timer.Последний из них предназначен для тайм-аута между короткими событиями, которые можно повторить.Есть несколько примеров кода проекта.

0 голосов
/ 31 марта 2019

Я бы предложил переключить StackLayout на Grid и поместить все в него, тогда у вас будет оверлей (это то, что мне нравится с Grid). Вы можете поиграть с VerticalOptions из MaterialAutoComplete и 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>
...