Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

ANNOUNCING: ComboBox and Floating Label Entry for iOS and Android

ChaseFlorellChaseFlorell CAInsider, University mod
edited March 2017 in Xamarin.Forms

Hey folks, just wanted to let you all know that I've open sourced my Material Entry and AutoComplete (called ComboBox) today. Take a look and use it if you like.

note: only for Android and iOS at the moment
note: Android requires an AppCompat Theme


The repo can be found on github

<xfx:XfxEntry Placeholder="Enter your name"
              Text="{Binding Name}"
              ErrorText="{Binding NameErrorText}" />


<xfx:XfxComboBox Placeholder="Enter your email address"
                Text="{Binding EmailAddress}"
                ItemsSource="{Binding EmailSuggestions}"
                SortingAlgorithm="{Binding SortingAlgorithm}"/>
// here's an example of how to do the SortingAlgorithm
public class MyViewModel : INotifyPropertyChanged
{
    public Func<string, ICollection<string>, ICollection<string>> SortingAlgorithm { get; } = (text, values) => values
        .Where(x => x.ToLower().StartsWith(text.ToLower()))
        .OrderBy(x => x)
        .ToList();
}

Posts

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    excellent, thanks @ChaseFlorell

  • JohnHardmanJohnHardman GBUniversity admin

    @ChaseFlorell - If you want to add UWP support, take a look at AutoSuggestBox

  • ChaseFlorellChaseFlorell CAInsider, University mod

    @JohnHardman said:
    @ChaseFlorell - If you want to add UWP support, take a look at AutoSuggestBox

    I might have to rely on others as we don't do any windows dev, so I'm not even fully set up for it :disappointed:

  • blendedcoffeeblendedcoffee USMember

    @ChaseFlorell

    First of all thanks! This is a nice plugin! Btw how do we change the font of the placeholder text?

  • alexmartinezalexmartinez USMember ✭✭

    Hello,

    It works almost like a charm but when I put the app in the background and then resume it, the app crashes. I have put an entry like this:


    @ChaseFlorell said:

    Hey folks, just wanted to let you all know that I've open sourced my Material Entry and AutoComplete (called ComboBox) today. Take a look and use it if you like.

    note: only for Android and iOS at the moment
    note: Android requires an AppCompat Theme

    And yes, I also have checked those notes.> @ChaseFlorell said:

  • NMackayNMackay GBInsider, University admin

    @alexmartinez

    Just a tip but you don't have to specify twoway binding for input controls in Forms, I do it sometimes just to make it explicitly clear what the UI is doing but there's a tiny performance hit for overriding default params.

    I'd recommend downloading the project and adding it as a reference and testing again to get a better stack trace. Also a stack trace via mobilecenter/Insights/Hockeyapp(all the same thing) will help @ChaseFlorell

  • alexmartinezalexmartinez USMember ✭✭

    @NMackay said:
    @alexmartinez

    Just a tip but you don't have to specify twoway binding for input controls in Forms, I do it sometimes just to make it explicitly clear what the UI is doing but there's a tiny performance hit for overriding default params.

    I'd recommend downloading the project and adding it as a reference and testing again to get a better stack trace. Also a stack trace via mobilecenter/Insights/Hockeyapp(all the same thing) will help @ChaseFlorell

    Thanks for the tip! I have solved the problem reinstalling all the packages in my Android project.

  • gfkeoghgfkeogh AUMember ✭✭

    I'm evaluating the XfxComboBox in my Xamarin Forms project to autocomplete customer names. It's working well, but when I leave the content page containing the control I get an Exception. I spent considerable time searching and experimenting but I'm unable to make any progress at all. The functionality of this control is vital for my app, so advice in this problem would be most welcome. Here is the top of the Exception taken from Visual Studio for Mac:

    System.ArgumentNullException: Value cannot be null.
    Parameter name: source
      at System.Linq.Enumerable.ToList[TSource] (System.Collections.Generic.IEnumerable`1[T] source) [0x00003] in /Library/Frameworks/Xamarin.iOS.framework/Versions/10.10.0.36/src/mono/external/corefx/src/System.Linq/src/System/Linq/ToCollection.cs:26
      at Xfx.Controls.iOS.Renderers.XfxComboBoxRendererTouch.SetItemsSource () [0x0000b] in <d405a78853a54e068290684fad27bbc3>:0
      at Xfx.Controls.iOS.Renderers.XfxComboBoxRendererTouch.OnElementPropertyChanged (System.Object sender, System.ComponentModel.PropertyChangedEventArgs e) [0x0003c] in <d405a78853a54e068290684fad27bbc3>:0
      at at (wrapper delegate-invoke) <Module>:invoke_void_object_PropertyChangedEventArgs (object,System.ComponentModel.PropertyChangedEventArgs)
      at Xamarin.Forms.BindableObject.OnPropertyChanged (System.String propertyName) [0x0000a] in C:\BuildAgent3\work\ca3766cfc22354a1\Xamarin.Forms.Core\BindableObject.cs:136
    
  • ChaseFlorellChaseFlorell CAInsider, University mod

    Hey @gfkeogh, I think the issue is right here. Whereby your ItemsSource is null and isn't being checked.

    Please feel free to submit an issue, or better yet, a pull request.

  • gfkeoghgfkeogh AUMember ✭✭

    I saw the ToList at the top of the crash stack and as part of my experiments I took steps to ensure the source wasn't null, bu tit made no difference. Note though ... the BindingContext class for my whole app and all pages it contains is set once very early in App lifetime, in the App constructor. I am not setting the context during page lifetime as you do in the sample. In this situation, the BindingContext is null during the page ctor and becomes available sometime before the OnAppearing event. I suspect that when the parent page is unloaded, the BindingContext is being set null somewhere out of my control, and this is causing the crash.

    As an experiment, I manually set the combo's ItemsSource in code in the page ctor, and this fixes the crash. Sadly I can't use this workaround because my app BindingContext reference with the source strings is not available the page ctor.

    I think you need to test the control using a slightly different style of binding, as happens in my app. I'm sure I'm not the only person who will have the BindingContext set at the app level and not in each page.

    Greg

  • N_BauaN_Baua INMember ✭✭✭✭✭

    Hi @ChaseFlorell,

    I tried to implement your awesome ComboBox control (AutoComplete),
    This works great with the ItemsSource and Binding properties with the pre-defined values.

    However I need to call a REST service which has 1MLn plus records (Postal Codes of entire country ), so can not pre-load the data, what I need is a way to call the service and at the same time filter(sort) the received data and display as is on screen.

    FYI, I am on MVVM (Prism) so not looking for traditional approach of OnChange do something stuff.
    Any suggestion would help. Thanks

    Regards,
    N Baua

  • ChaseFlorellChaseFlorell CAInsider, University mod
    edited June 2017

    @N_Baua If I were doing this with prism

    private IRestCommand _restCommand;
    
    public MyViewModel(IRestCommand restCommand) 
    {
        // inject my actual ICommand that fetches REST data and updates the ObservableCollection (MyItemsSource)
        _restCommand = restCommand;
    }
    
    private string _entryText;
    public string EntryText
     {
        get { return _entryText; }
        // update the values every time the text property changes (no event required)
        set { SetProperty(ref _entryText, value, UpdateValues); } 
    }
    
    private ObservableCollection<string> _myItemsSource;
    public ObservableCollection<string>
    {
        get { return _myItemsSource; }
        set { SetProperty(ref _myItemsSource, value); }
    }
    
    public DelegateCommand RestCommand => new DelegateCommand<MyViewModel>(p => _restCommand.Execute(p), p => _restCommand.CanExecute(p));
    
    private void UpdateValues()
    {
        if(RestCommand.CanExecute(this))
            RestCommand.Execute(this);
    }
    
    

    Also, for performance I would consider pulling the list into the phone instead of fetching over the wire every time. Any given country can't have that many postal codes. Even several thousand records in Sqlite will be way faster than a REST call.

  • N_BauaN_Baua INMember ✭✭✭✭✭

    @ChaseFlorell ,

    Great stuff,

    I should've noticed the override ---> SetProperty(ref _entryText, value, UpdateValues);

    Someday my lazy-ness will kill me :wink:

    Many Thanks.. :star:

    Regards,
    N Baua

  • ChaseFlorellChaseFlorell CAInsider, University mod

    even if you didn't use the parameter, you could still do this

    if(SetProperty(ref _entryText, value)){
        UpdateValues();
    }
    
  • pratiuskumardubeypratiuskumardubey USMember ✭✭

    @ChaseFlorell Thanks , I'm using your control directly from NuGet package it's working perfect but one issues is there in IOS it's always getting default PlaceholderColor="#666666" . Is there any possibilities change the custom color for Placeholder text?

  • ChaseFlorellChaseFlorell CAInsider, University mod

    @pratiuskumardubey said:
    @ChaseFlorell Thanks , I'm using your control directly from NuGet package it's working perfect but one issues is there in IOS it's always getting default PlaceholderColor="#666666" . Is there any possibilities change the custom color for Placeholder text?

    I have a backlog item for this, just need to get to it.
    https://github.com/XamFormsExtended/Xfx.Controls/issues/6

  • kenneth.leekenneth.lee USMember ✭✭✭

    @ChaseFlorell Just curious... why is it that XfxEntry and XfxComboBox REQUIRES your app to use an AppCompat theme and wondering if its possible to change it somehow

  • ChaseFlorellChaseFlorell CAInsider, University mod

    @kenneth.lee said:
    @ChaseFlorell Just curious... why is it that XfxEntry and XfxComboBox REQUIRES your app to use an AppCompat theme and wondering if its possible to change it somehow

    Under the hood we're using it for the renderers. I'm not sure if we can change it
    https://github.com/XamFormsExtended/Xfx.Controls/blob/master/src/Xfx.Controls.Droid/Renderers/XfxEntryRendererDroid.cs#L24

    Pretty sure the floating labels require it for the time being.

  • kenneth.leekenneth.lee USMember ✭✭✭

    @ChaseFlorell Ahh i see now. Thanks for the explanation and reference to code.

  • ChaseFlorellChaseFlorell CAInsider, University mod

    @pratiuskumardubey said:
    @ChaseFlorell Thanks , I'm using your control directly from NuGet package it's working perfect but one issues is there in IOS it's always getting default PlaceholderColor="#666666" . Is there any possibilities change the custom color for Placeholder text?

    @pratiuskumardubey this is fixed in V1.1.1 available now

  • Brian_SnoddyBrian_Snoddy USUniversity ✭✭

    @ChaseFlorell Thank you for sharing this.

    Is there a way to show the list of items as soon as the combobox is clicked.

    Then filter the results as a user starts typing?

  • BradChase.2654BradChase.2654 USMember ✭✭✭

    @ChaseFlorell Great work! Is this something you are looking to build into X.F? I noticed the community sprint had this feature in it and had you linked in one of the conversations.

  • curtis.ehrhartcurtis.ehrhart USMember ✭✭

    This is great! How can I control the margins on the Entry fields? They are huge!

  • curtis.ehrhartcurtis.ehrhart USMember ✭✭

    It looks like there is a display issue when you take the entry form and place it in a gridview on Android.

  • Ahsanzz1Ahsanzz1 Member ✭✭

    @curtis.ehrhart said:
    This is great! How can I control the margins on the Entry fields? They are huge!

    You can use Margin with negative value.

  • curtis.ehrhartcurtis.ehrhart USMember ✭✭

    that works for me. Thanks!

  • JuliaKJuliaK USMember

    Sorry, I can't use it until you fix that issue with dropdown view position is at wrong position when combobox is not a direct child of scroll view on iOS

  • FrankCrowFrankCrow Member ✭✭
    edited August 2018

    Can someone please help me. When I start the android application I use an autocomplete Combobox and a picker, and works well. I have a issue when I close the app and I open it again, the Combobox does not autocomplete the text, it is empty and sometimes the picker too. I get those values from a webservice, I am very sure that the Json is not null, and the result is saved in a List string. Here is the code to load the values when the page open:

    protected override void OnAppearing()
    {
                try
                {
                    base.OnAppearing();
                    searchCombo.ItemsSource = existenciaVM.AutoCompleteDescripcion;
                    warehousePicker.ItemsSource = existenciaVM.Almacenes;
    
                }
                catch (Exception ex)
                {
                    string message = ex.Message;
                }
    }
    
  • aeodeveloperaeodeveloper Member ✭✭

    hello thank u for your great work @ChaseFlorell , and now Im looking for Picker floating label, any suggest?

Sign In or Register to comment.