How to use ComboBox in Xamarin forms - xamarin.forms

How to use ComboBox in Xamarin forms because xamarin forms does not have ComboBox Control, In my application i want to show list of country, so that user can select country(search as well as dropdown)both way, Give me suggestion to resolve this issue
Note:I found one solution syncfusion combobox but that is paid service, i don't want paid service

Xamarin Forms does include a combo box control, it just isn't called a combo box. XF calls it a Picker. It's pretty easy to use and includes properties you can bind to for ItemSource and SelectedItem/SelectedIndex.

You can use Picker control at xamarin to achieve list some objects in a box.
I recommend you to follow the MVVM pattern to bind datasource and handle events. There is code samples for it that created by Microsoft.
But basically you have to add a Picker to your xaml:
<StackLayout Margin="20">
<Label Text="Bindable Picker Demo" FontAttributes="Bold" HorizontalOptions="Center" />
<Picker Title="Select a country" ItemsSource="{Binding CountryList}" SelectedItem="{Binding SelectedColorName, Mode=TwoWay}" />
</StackLayout>
And in your model just set your Countrylist property and It is selected item.
public IList<string> CountryList
{
get
{
return new List<string> {"USA","Germany","England"};
}
}
If you want to make search in your Picker you have to create your own control. According your wishes an Entry and a Listview may be enough. You have to update your list in TextChanged event of Entry.

You can create your own ListView with ItemsSource as a country list, and SearchView with TextChanged method, where you change your ItemsSource by search value (and firstly, ItemsSource would be empty, because of empty search filter).
Also you can check this link, that could be also useful.
UPDATE:
If you need a searchable Picker, there is a github project, that you can use. It has a search. Link to project.

Using Picker Control is useful for creating Combo Box
Step1: Follow First Criteria for Layout Control in .xaml File
<StackLayout>
<Picker Title="Placeholder" BackgroundColor="Red" x:Name="liname"></Picker>
</StackLayout>
Step2: Now Add the the Values in .xaml.cs File
public yourcode()
{
InitializeComponent();
liname.Items.Add("class1");
liname.Items.Add("class2");
liname.Items.Add("class3");
liname.Items.Add("class4");
}
Now Start the Emulator in Vs, See the Output Screen Below of my Code

I got a solution guys. I am using picker instead of combo box, There is no combo box option in xamarin forms, If you want exact combo box, need to subscribe syncfusion

Related

How invoke a code behind method of page when property change happens in a custom view on the page

In Xamarin Forms, I have a custom view with a BindableProperty:
public static readonly BindableProperty SelectedItemProperty
= BindableProperty.Create(nameof(SelectedItem), typeof(object), typeof(OneOfNButtons), null,
BindingMode.TwoWay);
I use that custom view within a custom page:
<exodus:OneOfNButtons ItemsSource="{Binding Tabs}" SelectedItem="{Binding SelectedTab, Mode=TwoWay}"/>
The two-way binding works as expected.
Now I want to trigger an animation that moves the entire OneOfNButtons control up to middle of page, so I can show related content below it, whenever SelectedItem changes. That is, it is not the primary focus of the page, it is down at bottom. If user is interested in it, they click any of the buttons on it, and half the page becomes dedicated to that topic, with the row of buttons acting like tabs, just above the content.
I understand DataTriggers, but those are for specific values. I'm looking for a trigger on any change to SelectedItem property. (If the logic belonged within the custom control itself, I could add code to the SelectedItem setter.)
This is logic specific to the page, so it belongs with the page; is not part of the custom control.
This is logic specific to this UI, so it belongs with the page, not with page's view model.
I've written the question as "invoke a code behind method", because that is the technique I would like to know how to do in general, even if this specific situation could be handled entirely in XAML.
Though I would also be glad to know how to trigger other XAML, on any change.
(If you know a WPF XAML technique, it might work in Xamarin Forms, though XAML here is more limited. Specifically, X-Forms bound properties are not "DependencyProperty"s, so I don't know how to "chain" properties.)
There are a number of XAML & data binding questions on SO, but all the ones I have found either discuss binding between view and model, or within a single view (I need a change in one view to affect the containing view), or involve messaging between the views (the sub-view does not and should not know about this requirement, so messaging isn't applicable), or triggering on specific values, or are for WPF and don't appear to be supported in Xamarin Forms.
You can handle any property changed events with this.
this.YourControl.PropertyChanged += YourControlPropertyChanged;
private void YourControlPropertyChanged(object sender,PropertyChangedEventArgs e)
{
if(e.PropertyName == "SelectedItem")
{
//Code
}
}

StackLayout on pressed event

In my Xamarin.Forms app, I have a view in my StackLayout. I want to make an effect so that when the user presses on the StackLayout the background changes color, and then reverts the color back when the user releases his/her finger, for a "flash" effect.
I was advised that since views don't have an "on pressed" event, I would have to use a custom renderer. But I don't know how to make a custom renderer for a StackLayout?
You don't really need a CustomRenderer to have a "on pressed" event on your StackLayout, you can use TapGestureRecognizer instead.
<StackLayout>
...
<StackLayout.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnTapGestureRecognizerTapped" />
</StackLayout.GestureRecognizers>
</StackLayout>
You can read more about GestureRecognizers in the official documentation.
P.S.: If you really need to react to "finger release" than you might need an Effect or a CustomRenderer.

How to prevent clicking on a checkbox from firing the datagrid's selection_changed - Silverlight 3

I am currently using a Datagrid binding to a list of items in Silverlight 3. Each row has two checkboxes. Anyone please help me how to prevent the Datagrid from firing the Selection_Changed event each time I click on any checkbox? I have been stuck with this for some days, deadline is coming near.
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
<data:DataGridTemplateColumn Header="Track" SortMemberPath="IsTracked" CanUserResize="False" CanUserReorder="False">
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<CheckBox
Tag="{Binding unitID, Mode=OneWay}"
Click="ShowB_Clicked" IsChecked="{Binding IsTracked, Mode=TwoWay}"></CheckBox>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
</data:DataGrid.Columns>
When I click on either the checkbox, the dgList_SelectionChanged of the Datagrid is fired and the SelectedIndex/Item also changed to the row that contains the clicked checkbox. What I want is not change the SelectedItem, in other word not fire dgList_SelectionChanged, of the datagrid.
Please help.
Thanks alot in advance.
Middlevn
Having a similar issue, starting to contemplate putting a see-through image over the checkbox to prevent the click, then use the cell changed event to get the checkbox value, then on current cell change set the current cell to something else.
I can't wait for better support for html5 so I can dump this MS garbage

Indirect binding to child collections in XAML

I am currently using a Linq template with SubSonic3 to create my models. I have a simple Member class, which has a collection of Notes. A Note class has a PublishedDate and Title properties.
I have a UserControl which has a collection of Members for its DataContext. There are two ListBoxes and a bunch of TextBoxes and other controls on it. The first ListBox (membersList) gets its ItemsSource from the UserControl DataContext and it displays a few Member properties in each item. I would like the second ListBox (notesList) to display the Notes collection of the Member selected in the first ListBox.
So far on notesList I have:
<ListBox ... ItemsSource="{Binding Notes}"...>
<DataTemplate>
<TextBox Text="{Binding Title}"/>
</DataTemplate>
It partially works. When I selected a Member which has Note items there is the correct number of items in notesListBox but this is only visible in the alternating row colours - nothing else! The DataTemplate fails to render the Title of the Note. Basically all the visual styles in the ListBox and ListBoxItem works - alternating colours, selection border, mouseover, etc. but the content is not shown. I have a feeling the problem is my Binding syntax but I can't figure out what's wrong.
Any suggestions would be greatly appreciated.
Cheers,
Dany.
Make sure your template includes a ContentPresenter. It sounds like you may have left this out when you templated your list box.
Leaving this out could lead to the behavior you're experiencing - full template, but no "content", since there's no place for it to place the actual items that should go in each list box item.

How can I create a DataTemplate with Expression Blend 3?

I'm currently experimenting with Expression Blend 3 MIX09 version with the idea to use it primarily for an MVVM structured site with databinding, being able to view live data as I design. So far I've been very impressed and have to say that Blend 3's generated XAML is not as bad as people say it is. I got the following two examples working, one with data binding and one with user controls (views) being loaded dynamically. I can stay in Expression Blend 90% of the time while I design my application, seeing live data coming from my ViewModels as I design. I switch to Visual Studio only for e.g. creating config files, or adding references is easier. The improved intellisense of Blend 3 enabled me to stay in Blend for much of my coding as well:
MVVM base application that can be edited with Expression Blend and Visual Studio
How to structure a WPF application with DataBinding so you can enhance it in Expression Blend
One thing I'm surprised that I can't do in Expression Blend, though, is after I have created a ListBox, I would expect that I could do a right-click and create a DataTemplate. I can of course create a DataTemplate in code, then under Resources/Window I find it again, can click on a button next to it to "go into the DataTemplate" and see the controls inside in my Objects and Timeline panel, which is nice. But creating a DataTemplate from a control is so common, I would think there is a way to do it that I am just missing.
Where in Blend 3 can you "create a DataTemplate" for a ListBox or ListView, etc?
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TestDynamic456"
mc:Ignorable="d"
x:Class="TestDynamic456.CustomersView"
x:Name="UserControl"
d:DesignWidth="640" d:DesignHeight="480">
<UserControl.Resources>
<local:CustomersViewModel x:Key="CustomersDataProvider"/>
</UserControl.Resources>
<StackPanel x:Name="LayoutRoot" Background="{x:Null}">
<ListBox ItemsSource="{Binding Path=GetAll, Source={StaticResource CustomersDataProvider}}"/>
</StackPanel>
</UserControl>
In Blend 3, you create a DataTemplate for ItemsControl's in the same place where you do it in Blend2 ;)
Right Click the control->Edit Other Templates->Edit Generated Items(ItemTemplate)->CreateEmpty

Resources