Articles in this section

How to create a custom UI view with image and text in AutoComplete control

Custom creation of image and AutoComplete view can be possible using the UIView design.

 

You can create a UIView with an image and control SfAutoComplete using the SfAutoComplete ShowBorder set as false and providing the BorderWidth API of UIView set as desired, which will be shown as the border for the control.

 

Code Snippet:

 
    public partial class ViewController : UIViewController
    {
        protected ViewController(IntPtr handle) : base(handle)
        {
            // Note: this .ctor should not contain any initialization logic.
        }
 
        UIView autoView;
        SfAutoComplete autocomplete;
        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            autoView = new UIView();
            autoView.Layer.BorderWidth = 2;
            autoView.Layer.CornerRadius = 8f;
            autoView.Frame = new CGRect(10, 40, UIScreen.MainScreen.Bounds.Width - 20, 100);
            UIImageView image = new UIImageView();
            image.Frame = new CoreGraphics.CGRect(5, 40, 30, 40);
            image.Image = UIImage.FromBundle("search.png");
 
            //AUtoComplete UI
            autocomplete = new SfAutoComplete();
            autocomplete.Frame = new CGRect(30, 10, UIScreen.MainScreen.Bounds.Width - 60, 100);
            autocomplete.ShowBorder = false;
 
            //Add the items
            NSMutableArray resolutionList = new NSMutableArray();
            resolutionList.Add((NSString)"Value 1");
            resolutionList.Add((NSString)"Value 2");
            resolutionList.Add((NSString)"Value 3");
            resolutionList.Add((NSString)"Value 4");
            resolutionList.Add((NSString)"Value 5");
            resolutionList.Add((NSString)"Value 6");
            resolutionList.Add((NSString)"Value 7");
            resolutionList.Add((NSString)"Value 8");
            autocomplete.AutoCompleteSource = resolutionList;
            autoView.Add(autocomplete);
 
            autoView.Add(image);
            this.View.Add(autoView);
        }
 
       
    public override void DidReceiveMemoryWarning()
        {
            base.DidReceiveMemoryWarning();
            // Release any cached data, images, etc that aren't in use.
        }
    }
 

 

 

Output

 

Image.png

 

 

Please refer this sample link, for your reference.

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Access denied
Access denied