2017-03-07 4 views
1

カスタムオートコンプリート:Xamarinフォーム - 次の質問で提案されているように、私はカスタムオートコンプリートを作ってみました

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; 
     } 

私は適切に自動補完やその他の方法で実装するなら、私を示唆してどのように設定するために私を助けてくださいオートコンプリートwith Xamarin forms

グリッドを使用すると、次のように表示されます。 GridImageこのような と私は、グリッドを使用しない場合は、それはショー:GridAbsoluteLayoutまたはRelativeLayoutを使用している場合 WithoutGridImage

+0

あなたはスクリーンショットを投稿できますか?問題の内容を理解できません。 – hankide

+0

@hankide、画像が追加されました –

答えて

0

コントロールが重なることができます。グリッドを使用して機能を実装するかどうかはわかりませんが、ほとんど完了してから修正する必要があります。

現在、オートコンプリートボックスはグリッドの2番目の行にあります。それは50の高さしか持たないので、それ以上伸ばすことはできません。 RowSpanプロパティを2または3に設定して、オートコンプリートボックスが必要なスペースを占めるようにする必要があります。

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

ありがとう、@ hankide。私はあなたの提案を試みたが、それは見栄えが良くないので、2番目のエントリのコントロールはlistviewの背景に表示されます。 –

+0

あなたもそのスクリーンショットを投稿できますか? – hankide

関連する問題