Xamarin表单 - 自定义自动完成

时间:2017-03-07 05:08:15

标签: xamarin.forms

我尝试按照以下问题建议自定义自动填充:

Xamarin.Forms Autocomplete CrossPlatform

它工作正常,但UI存在一些问题。

当我们在当时键入文本框listview可见以供选择但listview下方的控件移动到屏幕底部时。如果我使用网格,那么listview无法正常显示。

Xaml代码如下:

<StackLayout VerticalOptions="FillAndExpand"
                 HorizontalOptions="FillAndExpand"
                 Orientation="Vertical"
                 Spacing="15">
      <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <Grid.RowDefinitions>
          <RowDefinition Height="50"></RowDefinition>
          <RowDefinition Height="50"></RowDefinition>
          <RowDefinition Height="Auto"></RowDefinition>
          <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*"></ColumnDefinition>
          <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
      <Entry x:Name="aaa" Grid.Row="0" Grid.Column="0"></Entry>
      <ListView x:Name="Equipment_listView" ItemsSource="{Binding SiteListViewSource}" IsVisible="false" Grid.Row="1" Grid.Column="0">
        <ListView.GroupHeaderTemplate>      
          <DataTemplate>
          </DataTemplate>
        </ListView.GroupHeaderTemplate>
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
              <StackLayout Padding="5,0,0,0" Orientation="Horizontal">
                <Label Text="{Binding Name}" YAlign="Center" />
              </StackLayout>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>
      <Entry x:Name="aa" Grid.Row="2" Grid.Column="0"></Entry>
      </Grid>
    </StackLayout>

.cs文件代码如下:

public pg1()
        {

            InitializeComponent();

            List<Person> people = new List<Person>
            {
                new Person("Abigail", new DateTime(1975, 1, 15), Color.Aqua,"images.png"),
                new Person("Bob", new DateTime(1976, 2, 20), Color.Black,"images.png"),
                new Person("Yvonne", new DateTime(1987, 1, 10), Color.Purple,"images.png"),
                new Person("Zachary", new DateTime(1988, 2, 5), Color.Red,"images.png")
            };
            Equipment_listView.ItemsSource = people;
            aaa.TextChanged += MyAutoComplete_TextChanged;

            Equipment_listView.ItemTapped += (sender, e) =>
            {
                Person item = (Person)e.Item;
                aaa.Text = item.Name;
                Equipment_listView.IsVisible = false;

            };
        }

        void MyAutoComplete_TextChanged(object sender, TextChangedEventArgs e)
        {
            List<Person> people = new List<Person>
            {
                new Person("Abigail", new DateTime(1975, 1, 15), Color.Aqua,"images.png"),
                new Person("Bob", new DateTime(1976, 2, 20), Color.Black,"images.png"),
                new Person("Yvonne", new DateTime(1987, 1, 10), Color.Purple,"images.png"),
                new Person("Zachary", new DateTime(1988, 2, 5), Color.Red,"images.png"),

            };
            Equipment_listView.ItemsSource = people.Where(x => x.Name.ToLower().Contains(aaa.Text.ToString().ToLower())).ToList();
            Equipment_listView.IsVisible = true;
        }

请帮助我如何正确设置自动填充功能或建议我使用Xamarin forms

实现自动填充功能的其他方法

当我使用网格时,它显示如下: GridImage

当我不使用网格时,它是这样的节目: WithoutGridImage

1 个答案:

答案 0 :(得分:0)

使用GridAbsoluteLayoutRelativeLayout时,控件可以相互重叠。我不确定我是否会使用Grid实现这些功能但是因为你差不多完成了,所以你应该修复这个问题。

目前,自动填充框位于网格的第二行。它只有50的高度,所以它不能扩展更多。您应该将RowSpan属性设置为2或3,以帮助自动填充框占用所需空间。

<ListView x:Name="Equipment_listView" ItemsSource="{Binding SiteListViewSource}" IsVisible="false" Grid.Row="1" Grid.RowSpan="3">