iOS TKAutoCompleteTextView with dropdown wider than textbox (c#)

[Patrick]

I have not found the magic combination yet of making the dropdown items listview wider than the text box. Can someone show me what I am doing wrong. Here is my code for creating the auto complete:

01.private TKAutoCompleteTextView GetAutoComplete(string watermark, float itemHeight = 20)
02.{
03.    var leftColumnWidth = (View.Bounds.Width / 12) * 3;
04.
05.    var tkAutoComplete = new TKAutoCompleteTextView();
06.    AutomaticallyAdjustsScrollViewInsets = false;
07.
08.
09.    var dataSource = new TKDataSource();
10.
11.    var listView = (TKListView)tkAutoComplete.WeakSuggestionView;
12.    listView.RegisterClassForCell(new Class(typeof(DropDownItemListView)), "cell");
13.
14.    CGRect existingFrame = listView.Frame;
15.    listView.Frame = new CGRect(existingFrame.X, existingFrame.Y, View.Bounds.Width - 100, existingFrame.Height);
16.
17.
18.    var layout = new TKListViewGridLayout();
19.    layout.ItemAlignment = TKListViewItemAlignment.Left;
20.    layout.SpanCount = 1;
21.    layout.ItemSize = new CGSize(leftColumnWidth - 20, itemHeight);
22.    layout.LineSpacing = 0;
23.    layout.ItemSpacing = 0;
24.    listView.Layout = layout;
25.
26.    _autocompleteDelegate.Controller = this;
27.
28.    tkAutoComplete.DisplayMode = TKAutoCompleteDisplayMode.Tokens;
29.    tkAutoComplete.LayoutMode = TKAutoCompleteLayoutMode.Wrap;
30.    tkAutoComplete.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
31.    tkAutoComplete.MaximumWrapHeight = 150;
32.    tkAutoComplete.WeakDataSource = dataSource;
33.    tkAutoComplete.TextField.Placeholder = watermark;
34.    tkAutoComplete.NoResultsLabel.Text = "No items found";
35.    tkAutoComplete.MinimumCharactersToSearch = 1;
36.    tkAutoComplete.WeakDelegate = _autocompleteDelegate;
37.    tkAutoComplete.SuggestionViewHeight = 200;
38.    tkAutoComplete.SuggestMode = TKAutoCompleteSuggestMode.SuggestAppend;
39.
40.    return tkAutoComplete;
41.}

 

And here is the code for my DropDownItemListView (ideally, I'd like to get rid of the code that increases the height based on line breaks -- which doesn't work, anyway):

01.public class DropDownItemListView : TKAutoCompleteSuggestionCell
02. {
03.     public DropDownItemListView(IntPtr ptr) : base(ptr)
04.     {
05.         this.ContentView.BackgroundColor = UIColor.Clear;
06.         this.TextLabel.Lines = 0;
07.         this.TextLabel.LineBreakMode = UILineBreakMode.WordWrap;
08.         this.TextLabel.TextAlignment = UITextAlignment.Left;
09.         this.TextLabel.Font = UIFont.FromName("HelveticaNeue-Italic", 12);
10.         this.TextLabel.BackgroundColor = UIColor.White;
11.     }
12.
13.     public override void LayoutSubviews()
14.     {
15.         base.LayoutSubviews();
16.         this.ImageView.Frame = new CGRect(0, 0, 0, 0);
17.         var width = 400;
18.         int height = 20 + (TextLabel.Text.Count(p => p == '\n')*20);
19.         this.TextLabel.Frame = new CGRect(0, 0, width, height);
20.     }
21. }

Obviously I am missing something fundamental here.

 

[Patrick]

Perhaps I asked the question poorly? Maybe a rephrase:

Does anyone know of an iOS (xamarin / C#) example where the TKAutoCompleteTextView dropdown is wider than the text box? Preferably not using any designers.

[Sophi]

Hi Patrick,

The width of the dropdown is equal to the width of the autocomplete by default. However you are able to change the frame of the dropdown and set whatever size or position you like. 
You need to remove the dropdown from the current view hierarchy  and add it as a subview of whatever view you want, then you can set it's size according it's parent. Consider the following snippet.

TKListView listView = (TKListView)this.Autocomplete.WeakSuggestionView;
            listView.Frame = new CGRect (10, this.View.Bounds.Y + 15 + this.Autocomplete.Bounds.Height, this.View.Bounds.Size.Width-20, this.View.Bounds.Height - (15 + this.Autocomplete.Bounds.Height));
            listView.RemoveFromSuperview ();
            listView.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
            this.View.AddSubview (listView);

The snippet above is used in one of our SDK examples, here is link to it in our public repository. 

Regards,
Sophi
Telerik by Progress