I have a xamarin forms application search screen that allows a user to select an item from a list. Currently I am using a picklist and the user has to scroll and select and click done. This is using the native controls. Howerver I have noticed in iOS in settings menu etc where the have designed it so that when a user want to select from a list a arrow is shown on the right hand side which takes them to another page to select an item (s) from a list. To me this seems like a better UX. Here is an ex:
My question is there something built into this withing xamarin forms? I guess I could create a listview and then on click pass to another page. Any examples are appreciated.
There is no built-in for that, but it's not too hard to achieve this.
To set the disclosure indicator (the arrow), implement a custom renderer derived from ImageCellRenderer and override GetCell
public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv)
{
var viewCell = base.GetCell(item, reusableCell, tv);
viewCell.Accessory = UITableViewCellAccessory.DisclosureIndicator;
return viewCell;
}
When the user taps that cell you should navigate modally to the view showing the list of languages.
Adding that Cancel-Button is not really hard either, but needs another step. You'll need to wrap the new language selection page in a NavigationPage and push that NavigationPage modally. Furthermore you'll have to add a toolbar item to the wrapped page (see here).
Within the page there is a SearchBar view and a ListView below it. To add the checkmarks, you'll have to implement a custom cell with a custom renderer (derived from ImageCellRenderer like the one shown above), setting the UITableViewCell.Accessory to Checkmark if the custom cell is selected
if(item is SelectableCell selectableCell)
{
var selected = selectableCell.IsSelected;
viewCell.Accessory = selected ? UITableViewCellAccessory.Checkmark : UITableViewCellAccessory.Checkmark;
}
Please note: Selectable cell is no Xamarin.Forms stock cell, but one that you have to implement by yourself, including the bindable property IsSelected.
This should be basically the steps you need to achieve what you want. I've assumed basic Xamarin.Forms knowledge that is needed to fill the gaps.
Related
In my Prism application, I have a ribbon which I want to be able to update with context commands based on the currently active view and view model. I have my ribbon updating with context commands when a view is opened initially (in OnNavigatedTo), but I can't figure out how to update my ribbon as the user clicks between items in my tab control.
I'm planning on using Prism's IEventAggregator to send an "active view changed" event when the user clicks on a new tab, and then have each view model subscribe to that event and have the view model update the ribbon if the active tab item is that view model's tab. The problem is that I need my event data to include some parameters that specify what the active tab contains, but I don't know how to determine which view model is linked the active tab control item.
How do I know what view model corresponds to a tab control item, or is there another way of solving this problem?
You can just let the view model of the selected tab do the work, no need to over-complicate things:
xaml:
<TabControl SelectionChanged="OnSelectionChanged"/>
code-behind:
private void OnSelectionChanged( object sender, SelectionChangedEventArgs e ) => (((sender as TabControl)?.SelectedContent as FrameworkElement)?.DataContext as IRibbonAwareViewModel)?.OnSelected();
interface implemented by the tab's view model:
internal interface IRibbonAwareViewModel
{
void OnSelected(); // <-- here the view model updates the ribbon
}
I am using latest xamarin build 4.5 and trying to apply picker control with following facilities..
Binding option- I could not see ItemsSource property in latest xamarin release. I have used following code to bind picker control in c#
_pcPicker = this.FindByName("pcPicker");
foreach (var item in ParentCategory)
{
_pcPicker.Items.Add(item.Name);
}
I need to bind category id also along with category name...please guide me how to bind and get id of selected category.
I could not follow this link for bindable picker - https://blog.xamarin.com/new-bindable-picker-control-for-xamarin-forms/ ... example given is not complete.
I need add to additional link (Add New category..) at the end of the picker list just as shown in below image.
Please guide me how to customize picker control to achieve these two requirement-
Thanks,
#Paul
This nuget package is great and will allow you to achieve what you want.
https://github.com/rotorgames/Rg.Plugins.Popup
It allows you to create a pop up of any type of page. So for your picker, you could create a view that has a StackPanel, that has a ListView (so you can bind your ItemSource) and then 2 buttons New Category, Edit Category.
New to Xamarin here. How can I make each item on a listview go to a different page in Xamarin Forms?
For example, something like Facebook app:
Facebook is using a master detail page for this. Your should take a look at this Xamarin link about Master Detail Page. Let me know if this is not what you're looking for and I'll give you a solution for a listview. I personally would go with the master detail page.
The main flow is simple. You have your ListView, you attach an event on the ItemTapped to it, in code behind in the ItemTap handle method you can access which item was tapped and with that information you decide where you want to navigate.
void Handle_ItemTapped(object sender, ItemTappedEventArgs e)
{
// Item tapped
var item = e.Item as YourItemThatWasBinded;
if (item == null) return;
// Choose the page to navigate to based on the item selected.
// You decide what logic use inside this method if can be as simple using IFs.
var page = GetPageToNavigateWithItem(item);
// Navigate
Navigation.PushAsync(page);
}
I'm displaying a GroupedList view, and have both enabled the group header and jumplist. I've tried to hide the Group header, but so far with no luck. This property I want to hide is GroupDisplayBinding. If I don't set it, a default of ToString for my Item is displayed. I just want it gone, as a regular list only with the jump option enabled.
A little update: I searched some samples and what I want is a TableView with and indexed list as displayed here: https://developer.xamarin.com/guides/ios/user_interface/tables/part_2_-_populating_a_table_with_data/#Adding_an_Index
Best regards
Xamarin.Forms listview allows you to specify your own layout for the listview group via GroupHeaderTemplate property. You can use this layout to keep the header content empty.
Have a look at Customizing Listview Grouping
If you want to define the group header layout in code you will have to create a new subclass of ViewCell and build the layout. See an example at Enhancing Xamarin.Forms ListView with Grouping Headers
I am trying to dynamically fill a second panorama page based on what item was selected from the home application screen.
On the application's first start screen there is a listbox if items each with text. If a user taps on an item with text "foobar" a template page should load and the title of the template page should be set to "foobar" and this second panorama page should know that it's data should be related to "foobar".
Is there anyway to do this?
I currently have my MainPage navigate to a new page (DynamicPage.xaml). This navigation is triggered when a ListBox_SelectionChanged event occurs. I have the title text of the DynampicPage.xaml Binding to a TitleText variable that is located in MainPage.xaml.cs. However, when I do this the title of DynamicPage.xaml is ever only set to my initialization value for the titleText variable even though I am updating this variable right before I navigate to the page.
If anyone can provide some help I would be very grateful as I am just a beginner on the WP7 platform. Thanks!
The Binding you're using for the title is only going to update if the TitleText property is a dependency property or if your MainPage is implementing the INotifyPropertyChanged interface so your class can notify the UI when one of its properties changed.
http://windowsphonegeek.com/articles/All-about-Dependency-Properties-in-Silverlight-for-WP7
http://msdn.microsoft.com/en-us/library/system.componentmodel.inotifypropertychanged(v=vs.95).aspx
But I think this is not the best way for you to achieve this. For now a much better way is to store your data somewhere in a static class, in the main page's constructor load these data into the listbox, and when the user selected an item, navigate the user to the second page like this:
NavigationService.Navigate(new Uri("/DynamicPage.xaml?Item=" + selectedItem.Id, UriKind.Relative));
When you navigate like this a new instance of DynamicPage is created, and in the OnNavigatedTo method you can access the navigation parameters and populate your page with the selected data. For example:
<controls:Panorama x:Name="MyPanorama" Title="TitleHere">...</controls:Panorama>
Item selectedItem = StaticData.GetItem(NavigationContext.QueryString["Item"]);
MyPanorama.Title = selectedItem.Name.ToUpper();
Description.Text = selectedItem.Description;
This way you can use secondary tiles and toast notifications to directly point to a specific content in your application.
If you're getting to understand the navigation you should definitely use the pattern called Model-View-ViewModel which is about to solve these problems mostly with bindings, but trust me, probably this is the easier way for now.