Implementation of OnSearchBarButtonPressed in the ListView in Xamarin Form - xamarin

Is there a way to search a name on the table(Listview) in Xamarin Form without using any MonoTouch components - for crossplatform?
I have a number of names and populated on listview and what I want is that once user types the name and listview would be sorted and it should bring to matched name. I have added searchbar at the top of the listview.
I do not know how to implement OnSearchBarButtonPressed method. I believe that I should not reinvent the wheel again.
SearchBar searchBar = new SearchBar
{
Placeholder = "Search Employee Name",
};
searchBar.SearchButtonPressed += OnSearchBarButtonPressed;
Padding = new Thickness (10, 20, 10, 10);
Content = new StackLayout () {
Children={searchBar,listView}
};

In relation to your other posting here your ListView ItemsSource is a collection of objects.
The ListView control has no way of knowing about your model and wouldn't be able to any filtering by itself.
There appears to be nothing inbuilt into the ListView that would allow you to specify some Predicate to help with this task anyway.
You should therefore do the filtering in the SearchBar.SearchButtonPressed and then re-assign the ListView ItemsSource to reflect the newly filtered ItemsSource you want to show to the end-user. Your filtering logic could then be anything you wanted as your be able to customize this to even filter over many fields etc.
The SearchBar.SearchButtonPressed is just an event which you assign an EventHandler, like you are already doing. You just need to fill in the filtering logic and update the ListView accordingly.

Related

How to redraw ZXing QR code on TextChanged Event - Xamarin

I'd like to redraw my QR Code every time a particular TextChanged event is triggered.
The ZXingBarcodeImageView object gets drawn in the view when the page loads with the value BarcodeValue set in the XAML file like this:
<forms:ZXingBarcodeImageView
Margin="5,5,5,0"
x:Name="QRCodeView"
BarcodeFormat="QR_CODE"
BarcodeValue="-1" //this is the value of the QR code
/>
I have an Entry with a TextChanged event attached, which triggers a function UpdateQRLabel. This function should redraw the QRCode with the new value in Entry
<Entry
x:Name="Message"
TextChanged="UpdateQRLabel"
/>
If I change the BarcodeValue parameter after the QRCode has been drawn, it DOES NOT get redrawn automatically.
I need to force the ZXingBarcodeImageView object to redraw every time the TextChanged event is triggered.
Question
How do I force the ZXingBarcodeImageView to redraw when the TextChanged event is triggered?
I'm not sure if you're using data-binding or not. Since you are using events I guess not, however, I did get it to work with data-binding. A sample repo can be found here: https://github.com/jfversluis/ZXingValueBinding
It comes down to this. Create a property which will hold your barcode value:
private string _barcodeValue = "-1";
public string BarcodeValue
{
get { return _barcodeValue; }
set
{
_barcodeValue = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(BarcodeValue)));
}
}
The object holding this property needs to implement the INotifyPropertyChanged interface. You could consider using PropertyChanged.Fody for these.
I have put this property in the code-behind of my page, this can also be a separate class. Now, change your barcode image view to this: <forms:ZXingBarcodeImageView ... BarcodeValue="{Binding BarcodeValue}">.
Whenever you set a new value to BarcodeValue, the value should change because the UI is notified because of the INotifyPropertyChanged mechanism.

In NativeScript on Android, how do I prevent a SearchBar from gaining focus on page load?

I have a SeachBar inside a ScrollView. In iOS all is good. On Android the ScrollView automatically scrolls to the SearchBar, adds focus to it and displays the soft keyboard. I can hide the softkeyboard by adding android:windowSoftInputMode="stateHidden" as an activity in the AndroidManifest.xml file but I can't work out how to prevent the focus (and hence the auto scroll). Any help would be much appreciated.
Using Angular2:
app/my.component.html
<StackLayout (loaded)="onSearchLayoutLoaded($event)">
<SearchBar hint="search here" (loaded)="onSearchBarLoaded($event)">
</SearchBar>
</StackLayout>
app/my.component.ts
onSearchLayoutLoaded(event) {
if (event.object.android) {
event.object.android.setFocusableInTouchMode(true);
}
}
onSearchBarLoaded(event) {
if (event.object.android) {
event.object.android.clearFocus();
}
}
This eliminates unnecessarily having to use template reference variables.
For Android you need to do a couple of things. If you were using a native Android layout, lets say LinerLayout you would set android:focusableInTouchMode="true" and that should work for most use cases. So with NativeScript you're going to use the associated method on the parent of your SearchBar and then call `clearFocus() on the searchbar.
Example
function removeSearchFocus() {
// get the parent of the searchbar
var parent = page.getViewById('parentLayout');
var searchBar = page.getViewById('mySearchBar');
if (parent.android) {
parent.android.setFocusableInTouchMode(true);
parent.android.setFocusable(true);
searchBar.android.clearFocus();
}
}
Then attach this function to one of the page navigation event, or dump the important pieces into a current page event you might already have in your app. Just assign the parent an ID and the SearchBar so you can get it by the ID and this should work.
How about adding a endEditing to the page loaded or loading event?
searchBar = page.getViewById('your-searchbar');
searchBar.ios.endEditing(true);
or set focus to another element, where you want the focus to be, e.g.
somethingElse = page.getViewById('your-top-bar');
somethingElse.focus();

Load more items in listbox

I've read some topics/questions/google results before but still don't know how to solve my problem.
In my case I consume json and what I do is deserializing JSON into objects. Then using ListboxName.ItemsSource I bind them to listbox.
The problem is that my server gives me only 20 top results, but also I receive a link to next 20.
Theoretically, I would like to bind this link to LoadMore button which I would put at the end of the list. Then what? Merge new result to existing ObservableCollection? (I assume that I have to use ObservableCollection)
Create an
ObservableCollection<Items> Items {get;set;}
then in XAML bind to it and add items to this collection. It will notify a list box to update a view.
XAML
<ListBox x:Name="ListboxName" ItemsSource="{Binding Items}"/>
in .cs file:
//After you have parsed json
private void OnNewDataDownloaded(List<Items> parsedItems)
{
foreach(var item in parsedItems)
{
Items.Add(item);
}
}
Here you can find an elegant way to add LoadMore button

Add Elements dynamically to The XAML page in Windows Phone 7

I'm new to WP7 and I want to know if there is any way to add items like a TextBlock to
a page dynamically using the .cs part??
Try this
var textBlock = new TextBlock();
// set some properties
YourMainContainer.Children.Add(textBlock); //
If you need more details just comment this
If you know the controls that you'd like to appear on the page dynamically, then I'd approach the problem by including those controls in the XAML and using the Visibility property on the controls to show and hide them. In Silverlight, the Visibility enumeration is limited to the values Visible and Collapsed, so when it isn't visible the it doesn't take up any space. You can control Visibility with data-binding by using a converter (search on "visibility bind converter") if you are intersted in pursuing that avenue. You can show/hide groups of controls by changing the Visibility of their parent control, such as StackPanel or custom control.
Try this one,
TextBlock txtmsg = new TextBlock();
txtmsg.Text = "New Program.";
txtmsg.Margin = new Thickness(10, 20, 10, 10);
txtmsg.TextWrapping = TextWrapping.Wrap;
txtmsg.FontSize = 28;
txtmsg.TextAlignment = TextAlignment.Center;
ContentPanel.Children.Add(txtmsg);

Programmatically slide to next Panorama item

Is it possible to programmatically move from one panorama page/item to the next and get the same kind of animated sliding effect you get when sliding with a finger?
I can use the PanoramaControl.DefaultItem property to move to the expected item/page, but you won't get the animated sliding effect. Any ideas here?
Its possible, just put the setting of the DefaultItem between a SlideTransition Completed event and you are done:
public static class PanoramaExtensions
{
public static void SlideToPage(this Panorama self, int item)
{
var slide_transition = new SlideTransition() { };
slide_transition.Mode = SlideTransitionMode.SlideLeftFadeIn;
ITransition transition = slide_transition.GetTransition(self);
transition.Completed += delegate
{
self.DefaultItem = self.Items[item];
transition.Stop();
};
transition.Begin();
}
}
Use my_panorama.SlideToPage(1) to slide to the second page.
You can use below code :
panoramaRoot.DefaultItem = (PanoramaItem)panoramaRoot.Items[1];
it is not programatically possible to change the selected index of a panorama control. As you mention the only way of setting the index is using the DefaultItem property which is only useful when navigationg to the page which contains the panorama.
Here is another post that discusses it.
I think the easiest way to achieve this would be to create separate visual states for each item and create animated slide transitions for transitioning to each state. Then you can use VisualStateManager.GoToState(<page>, <state>, true); to initiate the state change.
No - the panorama control doesn't support programmatic manipulation like this.
If you want an experience like this, then you could try a hand-written panorama control - e.g. http://phone.codeplex.com/

Resources