Implementing Xamarin Forms context actions - c#

I am trying to implement context actions on my list in Xamarin Forms but can't get it to work.
I am not using XAML, but instead creating my layout in code.
I am trying to follow the steps in https://developer.xamarin.com/guides/xamarin-forms/user-interface/listview/interactivity/#Context_Actions and I want to push a new page when "Edit" is clicked.
I cleaned up my code and removed my feeble attempts to make things work.
So this is my custom list cell:
public class PickerListCell : TextCell
{
public PickerListCell ()
{
var moreAction = new MenuItem { Text = App.Translate ("Edit") };
moreAction.SetBinding (MenuItem.CommandParameterProperty, new Binding ("."));
moreAction.Clicked += async (sender, e) => {
var mi = ((MenuItem)sender);
var option = (PickerListPage.OptionListItem)mi.CommandParameter;
var recId = new Guid (option.Value);
// This is where I want to call a method declared in my page to be able to push a page to the Navigation stack
};
ContextActions.Add (moreAction);
}
}
And here is my model:
public class OptionListItem
{
public string Caption { get; set; }
public string Value { get; set; }
}
And this is the page:
public class PickerPage : ContentPage
{
ListView listView { get; set; }
public PickerPage (OptionListItem [] items)
{
listView = new ListView () ;
Content = new StackLayout {
Children = { listView }
};
var cell = new DataTemplate (typeof (PickerListCell));
cell.SetBinding (PickerListCell.TextProperty, "Caption");
cell.SetBinding (PickerListCell.CommandParameterProperty, "Value");
listView.ItemTemplate = cell;
listView.ItemsSource = items;
}
// This is the method I want to activate when the context action is called
void OnEditAction (object sender, EventArgs e)
{
var cell = (sender as Xamarin.Forms.MenuItem).BindingContext as PickerListCell;
await Navigation.PushAsync (new RecordEditPage (recId), true);
}
}
As you can see by my comments in the code, I have indicated where I believe things are missing.
Please assist guys!
Thanks!

Probably is too late for you, but can help others. The way i've found to do this is passing the instance of page on creation the ViewCell.
public class PickerListCell : TextCell
{
public PickerListCell (PickerPage myPage)
{
var moreAction = new MenuItem { Text = App.Translate ("Edit") };
moreAction.SetBinding (MenuItem.CommandParameterProperty, new Binding ("."));
moreAction.Clicked += async (sender, e) => {
var mi = ((MenuItem)sender);
var option = (PickerListPage.OptionListItem)mi.CommandParameter;
var recId = new Guid (option.Value);
myPage.OnEditAction();
};
ContextActions.Add (moreAction);
}
}
So, in your page:
public class PickerPage : ContentPage
{
ListView listView { get; set; }
public PickerPage (OptionListItem [] items)
{
listView = new ListView () ;
Content = new StackLayout {
Children = { listView }
};
var cell = new DataTemplate(() => {return new PickerListCell(this); });
cell.SetBinding (PickerListCell.TextProperty, "Caption");
cell.SetBinding (PickerListCell.CommandParameterProperty, "Value");
listView.ItemTemplate = cell;
listView.ItemsSource = items;
}
void OnEditAction (object sender, EventArgs e)
{
var cell = (sender as Xamarin.Forms.MenuItem).BindingContext as PickerListCell;
await Navigation.PushAsync (new RecordEditPage (recId), true);
}
}

Ok, so with the help of some posts, specifically this one https://forums.xamarin.com/discussion/27881/best-practive-mvvm-navigation-when-command-is-not-available, I came to the following solution, though I'm not perfectly satisfied with the way it looks.
My custom cell now announces when a command is being executed using MessagingCenter:
public class PickerListCell : TextCell
{
public PickerListCell ()
{
var moreAction = new MenuItem { Text = App.Translate ("Edit") };
moreAction.SetBinding (MenuItem.CommandParameterProperty, new Binding ("."));
moreAction.Clicked += async (sender, e) => {
var mi = ((MenuItem)sender);
var option = (PickerListPage.OptionListItem)mi.CommandParameter;
var recId = new Guid (option.Value);
// HERE I send a request to open a new page. This looks a
// bit crappy with a magic string. It will be replaced with a constant or enum
MessagingCenter.Send<OptionListItem, Guid> (this, "PushPage", recId);
};
ContextActions.Add (moreAction);
}
}
And in my PickerPage constructor I added this subscription to the Messaging service:
MessagingCenter.Subscribe<OptionListItem, Guid> (this, "PushPage", (sender, recId) => {
Navigation.PushAsync (new RecordEditPage (recId), true);
});
All this works just find, but I'm not sure if this is the way it was intended to. I feel like the binding should be able to solve this without the Messaging Service, but I can't find out how to bind to a method on the page, only to a model, and I don't want to pollute my model with methods that have dependencies on XF.

Related

ObserableCollection not triggering Change when Items are added/removed from list

I have a problem with ReactiveUI ObservableCollection. I am trying to update the UI based on a list that changes in a ReactiveObject, but for some reason my list change is not triggered and I am not sure what I am doing wrong.
There is a full repo here : https://github.com/SebiCiuca/ObserableCollection
App has a button, that when it's clicked calls a "RandomService" that removes items from a list and then adds a random number of items back into the list.
This list is an ObservableCollection that has a Subscribe on it, so I would like to see in my ViewModel that the list change happening in RandomService is triggering my ObservableCollection ModelList change.
Code below:
MainWindow
public partial class MainWindow : ReactiveWindow<MainWindowViewModel>
{
public MainWindow(MainWindowViewModel mainWindowViewModel)
{
InitializeComponent();
ViewModel = mainWindowViewModel;
DataContextChanged += (sender, args) => ViewModel = DataContext as MainWindowViewModel;
this.WhenActivated(cleanup =>
{
this.BindCommand(ViewModel, vm => vm.RandonListCommand, view => view.RandomButton).DisposeWith(cleanup);
});
}
}
MainWindowViewModel
public class MainWindowViewModel : ReactiveObject
{
private readonly IRandomService m_RandomService;
public ReactiveCommand<Unit, Unit> RandonListCommand { get; set; }
public MainWindowViewModel(IRandomService randomService)
{
m_RandomService = randomService;
RandonListCommand = ReactiveCommand.Create(() => { CallRandomService(); });
randomService.WhenAnyValue(rs => rs.ModelList).WhereNotNull().Subscribe(_ => TriggerUpdateUI());
}
private void CallRandomService()
{
Debug.WriteLine("Random is called");
var random = new Random();
var take = random.Next(1, 4);
Debug.WriteLine($"Take is {take}");
m_RandomService.UpdateList(take);
}
private void TriggerUpdateUI()
{
Debug.WriteLine("List changed");
foreach (var model in m_RandomService.ModelList)
{
Debug.WriteLine($"{model.Id} {model.Name}");
}
}
}
RandomService
public class RandomService : ReactiveObject, IRandomService
{
private List<RandomModel> _privateList;
public RandomService()
{
_privateList = new List<RandomModel>
{
new RandomModel { Id = 1, Name = "FirstRandom" },
new RandomModel { Id = 2, Name = "SecondRandom" },
new RandomModel { Id = 3, Name = "SecondRandom" },
new RandomModel { Id = 4, Name = "SecondRandom" }
};
_modelList = new();
}
private ObservableCollection<RandomModel> _modelList;
public ObservableCollection<RandomModel> ModelList
{
get => _modelList;
set => this.RaiseAndSetIfChanged(ref _modelList, value);
}
public void UpdateList(int take)
{
_modelList.Clear();
Debug.WriteLine($"ModelList count {_modelList.Count}");
var addToUI = _privateList.Take(take).ToList();
addToUI.Shuffle();
addToUI.ForEach(p => ModelList.Add(p));
Debug.WriteLine($"ModelList count {_modelList.Count}");
}
}
IRandomService
public interface IRandomService
{
ObservableCollection<RandomModel> ModelList { get; }
void UpdateList(int take);
}
From my point of view everything is correct if I read the definiton of ObservableCollection
"Represents a dynamic data collection that provides notifications when items get added or removed, or when the whole list is refreshed."
So my question is, why is my TriggerUpdateUI() never called. ( except at the start of the app when it's initialized).
randomService.WhenAnyValue(rs => rs.ModelList).WhereNotNull().Subscribe(_ => TriggerUpdateUI());
WhenAnyValue is just watching randomService for property change notifications for ModelList. You haven't set up anything to look for collection related changes.
From my point of view everything is correct if I read the definiton of ObservableCollection
"Represents a dynamic data collection that provides notifications when items get added or removed, or when the whole list is refreshed."
Your quote comes from the MS Docs on ObservableCollection. It is capable of producing collection change notifications, but you still need to setup something to react to them via ReactiveUI / DynamicData.
ReactiveUI Handbook - Collections

How to acces object inside CarouselView Xamarin.Forms

I have a Xamarin.Forms app that displays a ViewFlipper (https://github.com/TorbenK/ViewFlipper) inside a CarouselView.
I would like the ViewFlipper to flip back to the front when changing pages inside the carousel. But I can't seem to figure out how to access the ViewFlipper.
I have the following working code:
public class CarouselContent
{
public string FrontImg { get; set; }
public string BackImg { get; set; }
}
public class MainPage : ContentPage
{
public MainPage()
{
var pages = new ObservableCollection<CarouselContent>();
var page1 = new CarouselContent();
page1.FrontImg = "page1Front";
page1.BackImg = "page1Back";
var page2 = new CarouselContent();
page2.FrontImg = "page2Front";
page2.BackImg = "page2Back";
pages.Add(page1);
pages.Add(page2);
var carouselView = new Carousel(pages);
Content = carouselView;
}
}
public class Carousel : AbsoluteLayout
{
private DotButtonsLayout dotLayout;
private CarouselView carousel;
public Carousel(ObservableCollection<CarouselContent> pages)
{
carousel = new CarouselView();
var template = new DataTemplate(() =>
{
//create page
var absLayout = new AbsoluteLayout();
//create images for the flipper
var frontImg = new Image
{
Aspect = Aspect.AspectFit
};
frontImg.SetBinding(Image.SourceProperty, "FrontImg");
var backImg = new Image
{
Aspect = Aspect.AspectFit
};
backImg.SetBinding(Image.SourceProperty, "BackImg");
//create flipper
var flipper = new ViewFlipper.FormsPlugin.Abstractions.ViewFlipper();
flipper.FrontView = frontImg;
flipper.BackView = backImg;
//Add flipper to page
absLayout.Children.Add(flipper);
return absLayout;
});
carousel.ItemsSource = pages;
carousel.ItemTemplate = template;
Children.Add(carousel);
}
}
I tried adding the ViewFlipper to the CarouselContent but I couldn't get that to work. Any ideas?
EDIT:
I tried creating an AbsoluteLayout with bindable items and bind the items created in CarouselContent in the datatemplate of the CarouselView, but the line '(b as BindableAbsLayout).Children.Add((View)v);' in BindableAbsLayout is never called. What am I doing wrong?
class BindableAbsLayout : AbsoluteLayout
{
public static readonly BindableProperty ItemsProperty =
BindableProperty.Create(nameof(Items), typeof(ObservableCollection<View>), typeof(BindableAbsLayout), null,
propertyChanged: (b, o, n) =>
{
(n as ObservableCollection<View>).CollectionChanged += (coll, arg) =>
{
switch (arg.Action)
{
case NotifyCollectionChangedAction.Add:
foreach (var v in arg.NewItems)
(b as BindableAbsLayout).Children.Add((View)v);
break;
case NotifyCollectionChangedAction.Remove:
foreach (var v in arg.NewItems)
(b as BindableAbsLayout).Children.Remove((View)v);
break;
}
};
});
public ObservableCollection<View> Items
{
get { return (ObservableCollection<View>)GetValue(ItemsProperty); }
set { SetValue(ItemsProperty, value); }
}
}
public class CarouselContent
{
private ViewFlipper.FormsPlugin.Abstractions.ViewFlipper _flipper;
private ObservableCollection<View> _items;
public ObservableCollection<View> Items
{
get { return _items; }
}
public CarouselContent(string frontImgStr, string backImgStr)
{
_items = new ObservableCollection<View>();
_flipper = new ViewFlipper.FormsPlugin.Abstractions.ViewFlipper();
var frontImg = new Image
{
Aspect = Aspect.AspectFit
};
frontImg.Source = frontImgStr;
var backImg = new Image
{
Aspect = Aspect.AspectFit
};
backImg.Source = backImgStr;
_flipper.FrontView = frontImg;
_flipper.BackView = backImg;
AbsoluteLayout.SetLayoutBounds(_flipper, new Rectangle(0.5, 0.05, 0.85, 0.85));
AbsoluteLayout.SetLayoutFlags(_flipper, AbsoluteLayoutFlags.All);
Items.Add(_flipper);
}
}
public class Carousel : AbsoluteLayout
{
private DotButtonsLayout dotLayout;
private CarouselView carousel;
public Carousel(ObservableCollection<CarouselContent> pages)
{
carousel = new CarouselView();
var template = new DataTemplate(() =>
{
var absLayout = new BindableAbsLayout();
absLayout.BackgroundColor = Color.FromHex("#68BDE4");
absLayout.SetBinding(BindableAbsLayout.ItemsProperty,"Items");
return absLayout;
});
carousel.ItemsSource = pages;
carousel.ItemTemplate = template;
Children.Add(carousel);
}
}
Not sure what the best practice is here, but you could try accessing it via the ItemSelected Event (which fires every time you change back and forth in the carouselview)
Wire it up
carousel.ItemSelected += carouselOnItemSelected;
Get your ViewFlipper
private void carouselOnItemSelected(object sender, SelectedItemChangedEventArgs selectedItemChangedEventArgs)
{
CarouselContent carouselContent = selectedItemChangedEventArgs.SelectedItem;
ViewFlipper viewFlipper = carouselContent.Children[0];
viewFlipper.FlipState = ViewFlipper.FrontView;
}

instant Search functionality to listview using edittext in xamarin android

I am trying to implement instant search functionality using edittext.I have just binded the json array response to listview and added edittext at top of listview and trying to filter or search data in listview as user starts to type in edittext below code is used.Please help me. Any kind of suggestion,guidence and help is appreciated.
MainActivity.cs
SetContentView(Resource.Layout.HomeScreen);
tableItems = new List<TableItem>();
var client = new RestClient("http://azurewebsites.net/");
var request = new RestRequest("Service/regionSearch", Method.POST);
request.RequestFormat = DataFormat.Json;
tableItems = client.Execute<List<TableItem>>(request).Data;
listView.Adapter = new HomeScreenAdapter(this, tableItems);
region = FindViewById<TextView> (Resource.Id.viewtext);
area= FindViewById<TextView> (Resource.Id.viewtext2);
_filterText = FindViewById<EditText>(Resource.Id.search);
listView = FindViewById<ListView>(Resource.Id.listView);
_filterText.TextChanged += (object sender, Android.Text.TextChangedEventArgs e) => {
// filter on text changed
var searchTerm = _filterText.Text;
};
listView.ItemClick += OnListItemClick;
}
protected void OnListItemClick(object sender, Android.Widget.AdapterView.ItemClickEventArgs e)
{
var listView = sender as ListView;
var t = tableItems[e.Position];
// var clickedTableItem = listView.Adapter[e.Position];
Android.Widget.Toast.MakeText(this, clickedTableItem.DDLValue, Android.Widget.ToastLength.Short).Show();
}
HomeScreenAdapter.cs
public class HomeScreenAdapter : BaseAdapter<TableItem> {
List<TableItem> items;
Activity context;
public HomeScreenAdapter(Activity context, List<TableItem> items)
: base()
{
this.context = context;
this.items = items;
}
public override long GetItemId(int position)
{
return position;
}
public override TableItem this[int position]
{
get { return items[position]; }
}
public override int Count
{
get { return items.Count; }
}
public override View GetView(int position, View convertView, ViewGroup parent)
{
var item = items[position];
// TableItem item = items[position];
View view = convertView;
if (view == null) // no view to re-use, create new
view = context.LayoutInflater.Inflate(Resource.Layout.CustomView, null);
view.FindViewById<TextView>(Resource.Id.Text1).Text = item.DDLValue;
view.FindViewById<TextView>(Resource.Id.Text2).Text = item.areaMsg;
return view;
}
}
It looks like you're pretty close. The last step is to use the searchTerm to filter out the results in tableItems. The easiest way to do this is to simply create a new HomeScreenAdapter with the filtered list, and set that as the ListView.Adapter. Check out this example code that implements: getting the search text, filtering all of your TableItem instances, and then giving the ListView a new Adapter.
_filterText.TextChanged += (object sender, Android.Text.TextChangedEventArgs e) => {
// filter on text changed
var searchTerm = _filterText.Text;
var updatedTableItems = tableItems.Where(
// TODO Fill in your search, for example:
tableItem => tableItem.Msg.Contains(searchTerm) ||
tableItem.DDLValue.Contains(searchTerm)
).ToList();
var filteredResultsAdapter = new HomeScreenAdapter(this, updatedTableItems);
listView.Adapter = filteredResultsAdapter;
};
Notice the TODO inside of the Where clause. I have no idea how you want to search on your TableItem but once you write your Where clause, this should do what you want.
It looks like your TableItem class is something like this (for reference):
public class TableItem {
public int Id {get; set;}
public string DDLValue {get; set;}
public string Msg {get; set;}
public int Status {get; set;}
}

Programmatically binding TreeViewItem to List of custom object

How I can set programmatically Binding "Header" property of newTableList.Items elements to TableModel.TABLE_NAME ?
foreach (SchemaModel schema in connection.schemas)
{
TreeViewItem newSchema = new TreeViewItem()
{
Header = schema.SCHEMA_NAME.ToString()
};
Binding newTableBinding = new Binding();
newTableBinding.Source = schema.tables;
TreeViewItem newTableList = new TreeViewItem()
{
Header = "Tables",
};
BindingOperations.SetBinding( newTableList, TreeViewItem.ItemsSourceProperty, newTableBinding);
newSchema.Items.Add(newTableList);
newTVI.Items.Add(newSchema);
}
My old, very slow code looks like that:
foreach (TableModel table in schema.tables)
{
newTableList.Items.Add(new TreeViewItem()
{
Header = table.TABLE_NAME.ToString()
});
}
OLD TOPIC ( FOR BETTER VIEW )
I try to build custom TreeView and change my "VERY SLOW METHOD" with fastest with Binding to list of custom objects.
I have SchemaModel which contains
List<TableModel> tables
and every TableModel have
string TABLE_NAME.
My previous very slow method Was :
/* VERY SLOW METHOD !!! */
//foreach (TableModel table in schema.tables)
//{
// newTableList.Items.Add(new TreeViewItem()
// {
// Header = table.TABLE_NAME.ToString()
// });
//}
Creating each time TreeViewItem is slowing my UI which I cannot repair with multitasking.
I decided to programmatically Bind to list of TableModels like that :
Binding newTableBinding = new Binding();
newTableBinding.Source = schema.tables;
TreeViewItem newTableList = new TreeViewItem()
{
Header = "Tables",
// ItemsSource = schema.tables // also works
};
BindingOperations.SetBinding( newTableList, TreeViewItem.ItemsSourceProperty, newTableBinding);
How Can i Bind the Header property to "TABLE_NAME" for Items based on schema.tables list?
My full code
Code:
foreach (ConnectionModel connection in aliases)
{
TreeViewItem newTVI = new TreeViewItem() { Header = connection.alias.ToString() };
foreach (SchemaModel schema in connection.schemas)
{
TreeViewItem newSchema = new TreeViewItem() { Header = schema.SCHEMA_NAME.ToString() };
Binding newTableBinding = new Binding();
newTableBinding.Source = schema.tables;
// newTableBinding.Path = new PropertyPath("TABLE_NAME");
TreeViewItem newTableList = new TreeViewItem()
{
Header = "Tables",
// ItemsSource = schema.tables
};
BindingOperations.SetBinding( newTableList, TreeViewItem.ItemsSourceProperty, newTableBinding);
TreeViewItem newIndexList = new TreeViewItem() { Header = "Indexes" };
/* VERY SLOW METHOD !!! */
//foreach (TableModel table in schema.tables)
//{
// newTableList.Items.Add(new TreeViewItem()
// {
// Header = table.TABLE_NAME.ToString()
// });
//}
newSchema.Items.Add(newTableList);
newSchema.Items.Add(newIndexList);
newTVI.Items.Add(newSchema);
}
tmpAliasTree.Items.Add(newTVI);
}
tmpAliasTree is my TreeView.
My ConnectionModel
[Serializable()]
public class ConnectionModel
{
private int _id;
private string _dsn;
private string _alias ;
private string _host ;
private string _port ;
private string _database;
private string _username;
private string _password;
public List<SchemaModel> schemas = new List<SchemaModel>();
}
My SchemaModel :
[Serializable()]
public class SchemaModel
{
[System.Xml.Serialization.XmlElement("SCHEMA_NAME")]
public string SCHEMA_NAME { get; set; } = "";
[XmlArray("tables"), XmlArrayItem("TableModel", typeof(TableModel), ElementName = "TableModel")]
public List<TableModel> tables = new List<TableModel>();
}
My TableModel
[Serializable()]
public class TableModel
{
[System.Xml.Serialization.XmlElement("TABLE_CAT")]
public string TABLE_CAT { get; set; } = "";
[System.Xml.Serialization.XmlElement("TABLE_SCHEM")]
public string TABLE_SCHEM { get; set; } = "";
[System.Xml.Serialization.XmlElement("TABLE_NAME")]
public string TABLE_NAME { get; set; } = "";
[System.Xml.Serialization.XmlElement("TABLE_TYPE")]
public string TABLE_TYPE { get; set; } = "";
[System.Xml.Serialization.XmlElement("REMARKS")]
public string REMARKS { get; set; } = "";
}
Thank You for any advise.
Although I agree that you should consider moving your view definition to XAML, you can achieve what you're asking by utilizing ItemsControl.ItemContainerStyle property (both TreeView and TreeViewItem derive from ItemsControl). Basically, you need to define a style targeting TreeViewItem and add a setter for TreeViewItem.HeaderProperty with value holding an appropriate binding, and then assign that style either to your tree view, or particular items (depending on your needs). Here's an example:
TreeViewItem newTVI = new TreeViewItem() { Header = connection.alias.ToString() };
var tableModelItemStyle = new Style(typeof(TreeViewItem));
tableModelItemStyle.Setters.Add(new Setter
{
Property = TreeViewItem.HeaderProperty,
//since items will present instances of TableModel, the DataContext will hold
//the model, so we can define the binding using only the property name
Value = new Binding("TABLE_NAME"),
});
foreach(...)
{
...
TreeViewItem newTableList = new TreeViewItem
{
...
ItemContainerStyle = tableModelItemStyle,
};
...
}
If you want to set the style for all items in the tree view (which I do not recommend), you can do it like so:
newTVI.ItemContainerStyle = tableModelItemStyle;

UISearchController and MvvmCross

I want add search logic for my application (IOS8). I have simple MvxTableViewController and display my data by UITableViewSource. Here is:
...controller:
MvxViewFor(typeof(MainViewModel))]
partial class MainController : MvxTableViewController
{
public MainController(IntPtr handle) : base(handle) { }
public override void ViewDidLoad()
{
base.ViewDidLoad();
// make background trasnsparent page
this.View.BackgroundColor = UIColor.Clear;
this.TableView.BackgroundColor = UIColor.Clear;
this.NavigationController.NavigationBar.BarStyle = UIBarStyle.Black;
this.SetBackground ();
(this.DataContext as MainViewModel).PropertyChanged += this.ViewModelPropertyChanged;
}
private void SetBackground()
{
// set blured bg image
}
private void ViewModelPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
var viewModel = this.ViewModel as MainViewModel;
if (e.PropertyName == "Title")
{
this.Title = viewModel.Title;
}
else if (e.PropertyName == "Topics")
{
var tableSource = new TopicTableViewSource(viewModel.Topics);
tableSource.TappedCommand = viewModel.NavigateToChildrenPageCommand;
this.TableView.Source = tableSource;
this.TableView.ReloadData();
}
}
I read about search in IOS and choosed UISearchController for IOS8 app. But I don't understand, how I can add this controller to my view :(
I found sample from Xamarin (TableSearch) - but they don't use UITableViewSource and I don't understand what I should do with this.
I tried add controller:
this.searchController = new UISearchController (this.searchTableController)
{
WeakDelegate = this,
DimsBackgroundDuringPresentation = false,
WeakSearchResultsUpdater = this,
};
this.searchController.SearchBar.SizeToFit ();
this.TableView.TableHeaderView = searchController.SearchBar;
this.TableView.WeakDelegate = this;
this.searchController.SearchBar.WeakDelegate = this;
what should I do in this.searchTableController? Do I need move my display logic there?
Yes. The "searchTableController" should be responsible for the presentation of search results.
Here is the test project (native, not xmarin) which help you understand.
The searchController manages a "searchBar" and "searchResultPresenter". His not need add to a view-hierarchy of the carrier controller. When user starts typing a text in the "searchBar" the "SearchController" automatically shows your SearchResultPresenter for you.
Steps:
1) Instantiate search controller with the SearchResultsPresenterController.
2) When user inputs text in the search-bar you should invoke a your own service for the search. Below a sample of code..
#pragma mark - UISearchResultsUpdating
- (void)updateSearchResultsForSearchController:(UISearchController *)searchController
{
NSString *searchString = searchController.searchBar.text;
if (searchString.length > 1)
{
// TODO - call your service for the search by string
// this may be async or sync
// When a data was found - set it to presenter
[self.searchResultPresenter dataFound:<found data>];
}
}
3) In the search presenter need to reload a table in the method "dataFound:"
- (void)dataFound:(NSArray *)searchResults
{
_searchResults = searchResults;
[self.tableView reloadData];
}
Here are some advice on how to use the UISearchController with Xamarin.iOS.
Create a new class for the results table view subclassing UITableViewSource. This is gonna be the view responsible of displaying the results. You need to make the items list of that table view public.
public List<string> SearchedItems { get; set; }
In your main UIViewController, create your UISearchController and pass your result table view as an argument. I added some extra setup.
public UISearchController SearchController { get; set; }
public override void ViewDidLoad ()
{
SearchController = new UISearchController (resultsTableController) {
WeakDelegate = this,
DimsBackgroundDuringPresentation = false,
WeakSearchResultsUpdater = this,
};
SearchController.SearchBar.SizeToFit ();
SearchController.SearchBar.WeakDelegate = this;
SearchController.HidesNavigationBarDuringPresentation = false;
DefinesPresentationContext = true;
}
The best way to add the search bar to your UI in term of user experience, in my opinion, is to add it as a NavigationItem to a NavigationBarController.
NavigationItem.TitleView = SearchController.SearchBar;
Add methods to perform the search in the main UIViewController:
[Export ("updateSearchResultsForSearchController:")]
public virtual void UpdateSearchResultsForSearchController (UISearchController searchController)
{
var tableController = (UITableViewController)searchController.SearchResultsController;
var resultsSource = (ResultsTableSource)tableController.TableView.Source;
resultsSource.SearchedItems = PerformSearch (searchController.SearchBar.Text);
tableController.TableView.ReloadData ();
}
static List<string> PerformSearch (string searchString)
{
// Return a list of elements that correspond to the search or
// parse an existing list.
}
I really hope this will help you, good luck.

Categories

Resources