Syncfusion Xamarin Carousel infinite scroll - xamarin

I try to have Infinite Scroll in Xamarin Syncfusion component SFCarousel.
I try many solution of mine but don't work.
Have you any advise?
I try this code for example:
void Handle_SelectionChanged(object sender, Syncfusion.SfCarousel.XForms.SelectionChangedEventArgs {
if (carousel.SelectedIndex == viewModel.ImageCollection.Count - 1)
{
CarouselModel item = viewModel.ImageCollection.First();
viewModel.ImageCollection.Remove(item);
viewModel.ImageCollection.Add(item);
}
if (carousel.SelectedIndex == 1)
{
CarouselModel item = viewModel.ImageCollection.Last();
viewModel.ImageCollection.Remove(item);
viewModel.ImageCollection.Insert(0, item);
}
}

Xamarin Syncfusion component SFCarousel has perspective view. It doesn't have support for infinite scroll,but this can be achieved by using the SfRotator Control.
http://www.syncfusion.com/downloads/support/forum/139915/ze/Rotator_Sample-1424193758
Note: I'm working for Syncfusion

Related

Xamarin Community Toolkit TabView - Navigate within Tabs

For the bottom navigation bar, I'm using a Tabbed Page, and inside of a Tabbed page, I'm using a Tabview from the Xamarin Community Toolkit. On each XCT tab, I'm loading a list of items using the collection view (Xamarin Community Toolkit TabView).  I need to click an item in collection view and  move to another page (detail page) within the same tab of the tabbed page. Although I am aware that Shell might be used, I prefer to use the method described above.
You can use the SelectionChangedCommand to bind with the ItemSelectedCommand command and then use Navigation.PushAsync(new DetailPage()); to navigate to the detail page as Jason suggested.
Here's the code snippet below for your reference:
INavigation Navigation => Application.Current.MainPage.Navigation;
public ICommand ItemSelectedCommand
{
get
{
return new Command(async () =>
{
if (SelectedItem == null) return;
if(SelectedItem.Id ==1)
{
await Navigation.PushAsync(new DetailPage());
}
//else if
SelectedItem = null;
});
}
}

AutomationId for TabBar items not getting set in Android with Xamarin Forms

So I have the following code:
<TabBar Route="Dashboard">
<Tab Title="Dashboard" AutomationId="DashboardId">
//more codes here
</Tab>
<Tab AutomationId="AddNewId">
//more codes here
</Tab>
<Tab Title="Statistics" AutomationId="StatisticsId">
//more codes here
</Tab>
</TabBar>
Note that in my MainActivity's OnCreate() I have set up the following:
Xamarin.Forms.Forms.ViewInitialized += (object sender, Xamarin.Forms.ViewInitializedEventArgs e) => {
if (!string.IsNullOrWhiteSpace(e.View.AutomationId))
{
e.NativeView.ContentDescription = e.View.AutomationId;
}
};
This works perfectly with my other elements except for the TabBar items. Somehow the TabBar items are getting the Title property and setting is at the accessibilityId/content-dec.
Anyone knows why this is and how can I make it so it will get the right AutomationId? Thanks
There are multiple issues with AutomationId on Android.
The underlying problem is discussed in Android - Using AutomationId prevents TalkBack screenreader accessibility:
Xamarin.Forms "borrows" the ContentDescription property on Android for Automation IDs. These IDs polute Android's TalkBack accessibility tree, making apps almost impossible to navigate.
This means you can support test automation or accessibility, not both. Our app needs to support both.
In the case of Tabs, presumably Xamarin code is doing what you see: copying Title to content-desc, so that Android text readers will speak it.
The suggested work-around is to write custom renderer(s) that do what you need. Described in a comment by codingL3gend :
i was able to find a work around to this issue by creating a customrenderer and respective custom component to allow for overriding the native android method(s) that get triggered when accessibility events are fired. you will need to create some bindable properties on your custom component that you can access in the custom renderer to allow for setting the content description value to what you want but that's simple enough.
this method gets triggered in the control/custom renderer whenever an accessibility event is fired
public override bool OnRequestSendAccessibilityEvent(Android.Views.View child, AccessibilityEvent e)
{
if (AccessibilityHandler.IsAccessibilityEnabled(_context) && child != null)
{
if (!string.IsNullOrEmpty(_automationId) && _automationId.Equals(child.ContentDescription))
{
child.ContentDescription = $"{_automationName} {_helpText}";
}
}
return base.OnRequestSendAccessibilityEvent(child, e);
}
then you can set the contentDescription value of the control/custom renderer back to what the automationId value was originally when the control/custom renderer is detached from the view.
protected override void OnDetachedFromWindow()
{
base.OnDetachedFromWindow();
if (!string.IsNullOrEmpty(_automationId))
{
Control.ContentDescription = _automationId;
}
}
helper class
public static class AccessibilityHandler
{
public static bool IsAccessibilityEnabled(Context context)
{
var accessibility = (AccessibilityManager)context.GetSystemService(MainActivity.AccessibilityService);
return accessibility?.GetEnabledAccessibilityServiceList(Android.AccessibilityServices.FeedbackFlags.Spoken)?.Count > 0;
}
}
If you only need AutomationId during testing, or you can live with the effect this has on Accessibility Screen Readers (esp. it won't be multi-lingual), then you could make a much simpler custom renderer for use when testing.
Put this in your custom renderer (if isn't Tab, then change <Tab> to appropriate Xamarin class):
protected override void OnElementChanged( ElementChangedEventArgs<Tab> e )
{
base.OnElementChanged( e );
if (e.OldElement != null)
{
// Removing previous element.
// TBD: Remove obsolete references. (usually not needed)
}
if (Element == null)
// Going away with no replacement.
return;
UpdateAutomationId();
}
void OnPropertyChanged(object sender, PropertyChangedEventArgs e)
{
if (e.PropertyName == nameof(Element.AutomationId))
{
UpdateAutomationId();
}
}
void UpdateAutomationId()
{
var _automationId = Element.AutomationId;
if (!string.IsNullOrEmpty(_automationId))
{
Control.ContentDescription = _automationId;
}
}

How to create a custom WebView Control Xamarin forms

I am trying to create a custom control for webview, i am trying to get a checkbox inside a webview Reason :- we have a bunch of text to be displayed and unless the user reaches the end of the scroll he cannot move to the next page and at the end of the scroll there is a checkbox where user has to check the the checkbox and then he can process. here i have tried putting the checkbox and webview inside the stacklayout but the issue is webview have its own scroll bar and and stacklayout scroll bar does not work when a user try to scroll as the webview scroller scrolls out also when i try to close the Webview Page with back button the webview gets close and not the page
i am not sure what approach should i apply here.
i am getting my html data from my webapi.
anyone with some solution would be appreciable
here is my custom renderer which i have wrote but the piece missing here is how can i add another xamarin control inside this
public class CustomPdfViewRenderer : WebViewRenderer
{
public CustomPdfViewRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.Settings.BuiltInZoomControls = true;
Control.Settings.DisplayZoomControls = false;
Control.Settings.LoadWithOverviewMode = true;
Control.Settings.UseWideViewPort = true;
}
}
}
You can try the following approach:
Add checkbox to HTML
When the user check checkbox call some JavaScript function
When JavaScript function is called, call C# function (Xamarin) which will enable the user to process to the next page (or some other Xamarin side stuff)
Here is how you can call C# function from JavaScript :HybridWebView

TailTruncation - Ellipsize the text of a picker control in Xamarin Forms

Is it possible to truncate long texts with ellipsis in a picker control. I have already created a custom renderer to set a fontsize and no border in order to achieve the following result.
Also tried to set Control.Ellipsize = TextUtils.TruncateAt.End; but nothing happens
[assembly: ExportRenderer(typeof(NoBorderPicker), typeof(CustomPicker))]
namespace Prj.Droid.Renderers
{
public class CustomPicker : PickerRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
{
base.OnElementChanged(e);
if (Control != null)
{
var customBG = new GradientDrawable();
customBG.SetColor(Android.Graphics.Color.Transparent);
customBG.SetCornerRadius(3);
Control.SetBackground(customBG);
Control.Ellipsize = TextUtils.TruncateAt.End;
var custdatepicker = (NoBorderPicker) this.Element;
this.Control.TextSize = (float)custdatepicker.FontSize;
}
}
}
}
Now, I could be sure that Control.SetSingleLine(true); will work.
if you are using a custom renderer can be the incorret inheritance.
Use Xamarin.Forms.Platform.Android.AppCompat.PickerRenderer not Xamarin.Forms.Platform.Android.PickerRenderer
Tks to https://www.damirscorner.com/blog/posts/20201204-CustomPickerRendererOnAndroid.html
Oddly enough, for me in the latest Xamarin Forms, on Android the Picker automatically truncates text, but on iOS the Picker becomes arbitrarily wide, covering up other UI elements.
The fix is to set the MinimumWidthRequest = 1, which for some reason re-enables text truncation. I have no idea why. Welcome to Xamarin.

Use a custom layout to badge xamarin.Android's action bar menu items

Check my action bar image here(My requirement)i want to display the custom text label button on xamarin.android action bat(material theme),is there any possibility to do that in xamarin.android please suggest ...
static Button notifCount;
static int mNotifCount = 0;
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getSupportMenuInflater();
inflater.inflate(R.menu.main, menu);
View count = menu.findItem(R.id.badge).getActionView();
notifCount = (Button) count.findViewById(R.id.notif_count);
notifCount.setText(String.valueOf(mNotifCount));
return super.onCreateOptionsMenu(menu);
}
private void setNotifCount(int count){
mNotifCount = count;
invalidateOptionsMenu();
}
i tried above code converting into xamarin.android but it is showing like..
View count= menu.FindItem(Resource.Id.badge).getActionView ...Error...getActionview is not there in xamarin.
Check out my post about this on the Xamarin Forums. Just did this recently for Push Notifications, though I am not sure if your badge is for Push or Local Notifications. I am using Xamarin Forms so it may be a little different from you but let me know if you have any issues.
Basically, in OnCreateOptionsMenu you make sure you are on your specific page, then inflate your custom badge into the action bar and then add a custom action.
Then in OnPrepareOptionsMenu you can update the badge count. I used the DB to figure out what the new badge value should be.
https://forums.xamarin.com/discussion/comment/183694/#Comment_183694
*Edit: I also found this link recently but have not looked into it much. Might also be helpful.

Resources