chrisriesgo / xamarin-forms-carouselview Goto Github PK
View Code? Open in Web Editor NEWA Xamarin.Forms custom control recipe that mirrors the functionality of the CarouselPage - except the "pages" are simply Content Views.
A Xamarin.Forms custom control recipe that mirrors the functionality of the CarouselPage - except the "pages" are simply Content Views.
Hi!
I would like to make a CarouselView that has dynamic view/model types, but sadly I can't make it working.
I wanted to mix it with your CarouselViewWithVMViews implementation that uses a ListView to show dynamic view/model items.
I've merged this sample app with your dynamic ListView item sample code from here:
My modifications are:
public class DynamicTemplateLayout : ContentView// ViewCell
{
protected override void OnBindingContextChanged()
{
base.OnBindingContextChanged();
var vm = BindingContext as ICarouselViewModel;
var page = vm.View;
page.BindingContext = vm;
this.Content = page;
}
}
public class HomePage2 : ContentPage
{
RelativeLayout relativeLayout;
CarouselLayout.IndicatorStyleEnum _indicatorStyle = CarouselLayout.IndicatorStyleEnum.Dots;
SwitcherPageViewModel viewModel;
public HomePage2()
{
viewModel = new SwitcherPageViewModel();
BindingContext = viewModel;
Title = "Dynamic Dots";//_indicatorStyle.ToString();
relativeLayout = new RelativeLayout
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand
};
var pagesCarousel = CreatePagesCarousel();
var dots = CreatePagerIndicatorContainer();
relativeLayout.Children.Add (pagesCarousel,
Constraint.RelativeToParent ((parent) => { return parent.X; }),
Constraint.RelativeToParent ((parent) => { return parent.Y; }),
Constraint.RelativeToParent ((parent) => { return parent.Width; }),
Constraint.RelativeToParent ((parent) => { return parent.Height/2; })
);
relativeLayout.Children.Add (dots,
Constraint.Constant (0),
Constraint.RelativeToView (pagesCarousel,
(parent,sibling) => { return sibling.Height - 18; }),
Constraint.RelativeToParent (parent => parent.Width),
Constraint.Constant (18)
);
Content = relativeLayout;
}
CarouselLayout CreatePagesCarousel ()
{
List<ICarouselViewModel> pages = new List<ICarouselViewModel>()
{
new PageOneViewModel(),
new PageTwoViewModel()
};
var carousel = new CarouselLayout {
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
IndicatorStyle = _indicatorStyle,
ItemsSource = pages,
ItemTemplate = new DataTemplate(typeof(DynamicTemplateLayout))
};
//carousel.SetBinding(CarouselLayout.ItemsSourceProperty, "Pages");
//carousel.SetBinding(CarouselLayout.SelectedItemProperty, "CurrentPage", BindingMode.TwoWay);
return carousel;
}
View CreatePagerIndicatorContainer()
{
return new StackLayout {
Children = { CreatePagerIndicators() }
};
}
View CreatePagerIndicators()
{
var pagerIndicator = new PagerIndicatorDots() { DotSize = 5, DotColor = Color.Black };
pagerIndicator.SetBinding (PagerIndicatorDots.ItemsSourceProperty, "Pages");
pagerIndicator.SetBinding (PagerIndicatorDots.SelectedItemProperty, "CurrentPage");
return pagerIndicator;
}
}
and in the SwitcherPage, the dots button's command was changed to use this new HomePage2:
Command = new Command((obj) => Navigation.PushAsync(new HomePage2()))
What did I miss here?
It compiles, but when you choose "Dots" button on the main screen, it throws runtime exception on Android (on iOS I did not try) inside the HomePage2's CreatePagesCarousel() method when it tries to instantiate the CarouselLayout.
Hi Chris,
I have implemented carouselLayout using MVVMLight. I want multiple carouselLayout on a page. I am able to implement it by passing different BindingContext for each carouselLayout (as shown in below code) and it works fine but the problem is i am unable to view dot indicators for any of the carousel view whinch i wanted for one carousel view.
My modifications are :
CarouselLayout CreatePagesCarousel(object bindingContext,CarouselLayout.IndicatorStyleEnum indicatorStyle)
{
var carousel = new CarouselLayout {
BindingContext = bindingContext,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
IndicatorStyle = _indicatorStyle,
ItemTemplate = new DataTemplate(typeof(HomeView))
};
carousel.SetBinding(CarouselLayout.ItemsSourceProperty, "Pages");
carousel.SetBinding(CarouselLayout.SelectedItemProperty, "CurrentPage", BindingMode.TwoWay);
return carousel;
}
if you can help how i am doing wrong or what should i do inorder to get dot indicators
Thanks for you help in advanced and creating this control
Hi.
First of all, thanks for your work, is just what I need :), but I don't know how to use in my Xamarin.Forms project, could you help me?
Thanks.
According to your reply to my issue regarding ListView scrolling, i want to know if there is a way to disable the swipe of the CarouselView so that I can walkaround this scrolling issue?
When I do a slow swipe and release the slide in the middle with half of both the slides in screen, I get this error.
Debug Log:
07-19 13:45:17.860 I/dalvikvm( 6526): android.runtime.JavaProxyThrowable: System.InvalidOperationException: Sequence contains more than one element
07-19 13:45:17.860 I/dalvikvm( 6526): at System.Linq.Enumerable.Single[TSource](IEnumerable`1 source) [0x0008e] in /Users/builder/data/lanes/3415/7db2aac3/source/mono/external/referencesource/System.Core/System/Linq/Enumerable.cs:1050
07-19 13:45:17.860 I/dalvikvm( 6526): at Xamarin.Forms.Platform.CarouselViewRenderer.b__8_2 () [0x00011] in :0
07-19 13:45:17.860 I/dalvikvm( 6526): at Xamarin.Forms.Platform.CarouselViewRenderer+OnScrollListener.OnScrollStateChanged (Android.Support.V7.Widget.RecyclerView recyclerView, Int32 newState) [0x0003d] in :0
07-19 13:45:17.860 I/dalvikvm( 6526): at Android.Support.V7.Widget.RecyclerView+OnScrollListener.n_OnScrollStateChanged_Landroid_support_v7_widget_RecyclerView_I (IntPtr jnienv, IntPtr native__this, IntPtr native_recyclerView, Int32 newState) [0x00011] in :0
07-19 13:45:17.860 I/dalvikvm( 6526): at (wrapper dynamic-method) System.Object:fd7a9868-7ac5-48b1-8b65-4386ca0a009b (intptr,intptr,intptr,int)
07-19 13:45:17.860 I/dalvikvm( 6526): at md532e00c7e41706cfac1bd1d309ed4a548.CarouselViewRenderer_OnScrollListener.n_onScrollStateChanged(Native Method)
07-19 13:45:17.860 I/dalvikvm( 6526): at md532e00c7e41706cfac1bd1d309ed4a548.CarouselViewRenderer_OnScrollListener.onScrollStateChanged(CarouselViewRenderer_OnScrollListener.java:29)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.support.v7.widget.RecyclerView.dispatchOnScrollStateChanged(RecyclerView.java:3990)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.support.v7.widget.RecyclerView.setScrollState(RecyclerView.java:1219)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.support.v7.widget.RecyclerView.onTouchEvent(RecyclerView.java:2508)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.View.dispatchTouchEvent(View.java:7728)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2212)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1945)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.860 I/dalvikvm( 6526): at md5b60ffeb829f638581ab2bb9b1a7f4f3f.PlatformRenderer.n_dispatchTouchEvent(Native Method)
07-19 13:45:17.860 I/dalvikvm( 6526): at md5b60ffeb829f638581ab2bb9b1a7f4f3f.PlatformRenderer.dispatchTouchEvent(PlatformRenderer.java:55)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.860 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.860 I/dalvikvm( 6526): at com.android.internal.policy.impl.PhoneWindow$DecorView.superDispatchTouchEvent(PhoneWindow.java:2165)
07-19 13:45:17.860 I/dalvikvm( 6526): at com.android.internal.policy.impl.PhoneWindow.superDispatchTouchEvent(PhoneWindow.java:1602)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.app.Activity.dispatchTouchEvent(Activity.java:2504)
07-19 13:45:17.870 I/dalvikvm( 6526): at com.android.internal.policy.impl.PhoneWindow$DecorView.dispatchTouchEvent(PhoneWindow.java:2113)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.view.View.dispatchPointerEvent(View.java:7908)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.view.ViewRootImpl$ViewPostImeInputStage.processPointerEvent(ViewRootImpl.java:4132)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.view.ViewRootImpl$ViewPostImeInputStage.onProcess(ViewRootImpl.java:4011)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3568)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:3618)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:3587)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.view.ViewRootImpl$AsyncInputStage.forward(ViewRootImpl.java:3694)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:3595)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.view.ViewRootImpl$AsyncInputStage.apply(ViewRootImpl.java:3751)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3568)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:3618)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:3587)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:3595)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3568)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.view.ViewRootImpl.deliverInputEvent(ViewRootImpl.java:5780)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.view.ViewRootImpl.doProcessInputEvents(ViewRootImpl.java:5760)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.view.ViewRootImpl.enqueueInputEvent(ViewRootImpl.java:5731)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.view.ViewRootImpl$WindowInputEventReceiver.onInputEvent(ViewRootImpl.java:5869)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.view.InputEventReceiver.dispatchInputEvent(InputEventReceiver.java:185)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.os.MessageQueue.nativePollOnce(Native Method)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.os.MessageQueue.next(MessageQueue.java:138)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.os.Looper.loop(Looper.java:123)
07-19 13:45:17.870 I/dalvikvm( 6526): at android.app.ActivityThread.main(ActivityThread.java:5290)
07-19 13:45:17.870 I/dalvikvm( 6526): at java.lang.reflect.Method.invokeNative(Native Method)
07-19 13:45:17.870 I/dalvikvm( 6526): at java.lang.reflect.Method.invoke(Method.java:515)
07-19 13:45:17.870 I/dalvikvm( 6526): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:859)
07-19 13:45:17.870 I/dalvikvm( 6526): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:675)
07-19 13:45:17.870 I/dalvikvm( 6526): at dalvik.system.NativeStart.main(Native Method)
07-19 13:45:17.870 I/dalvikvm( 6526): "main" prio=5 tid=1 NATIVE
07-19 13:45:17.870 I/dalvikvm( 6526): | group="main" sCount=0 dsCount=0 obj=0x41930d50 self=0x417b66c0
07-19 13:45:17.870 I/dalvikvm( 6526): | sysTid=6526 nice=-1 sched=0/0 cgrp=apps handle=1074413908
07-19 13:45:17.870 I/dalvikvm( 6526): | state=R schedstat=( 21980915458 1007283972 7182 ) utm=1932 stm=266 core=2
07-19 13:45:17.890 I/dalvikvm( 6526): #00 pc 0000132e /system/lib/libcorkscrew.so (unwind_backtrace_thread+29)
07-19 13:45:17.890 I/dalvikvm( 6526): #1 pc 00061666 /system/lib/libdvm.so (dvmDumpNativeStack(DebugOutputTarget const_, int)+33)
07-19 13:45:17.890 I/dalvikvm( 6526): #2 pc 00055650 /system/lib/libdvm.so (dvmDumpThreadEx(DebugOutputTarget const_, Thread_, bool)+395)
07-19 13:45:17.890 I/dalvikvm( 6526): #3 pc 000556be /system/lib/libdvm.so (dvmDumpThread(Thread_, bool)+25)
07-19 13:45:17.890 I/dalvikvm( 6526): #4 pc 00039754 /system/lib/libdvm.so
07-19 13:45:17.890 I/dalvikvm( 6526): #5 pc 0003d182 /system/lib/libdvm.so
07-19 13:45:17.890 I/dalvikvm( 6526): at md532e00c7e41706cfac1bd1d309ed4a548.CarouselViewRenderer_OnScrollListener.n_onScrollStateChanged(Native Method)
07-19 13:45:17.890 I/dalvikvm( 6526): at md532e00c7e41706cfac1bd1d309ed4a548.CarouselViewRenderer_OnScrollListener.onScrollStateChanged(CarouselViewRenderer_OnScrollListener.java:29)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.support.v7.widget.RecyclerView.dispatchOnScrollStateChanged(RecyclerView.java:3990)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.support.v7.widget.RecyclerView.setScrollState(RecyclerView.java:1219)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.support.v7.widget.RecyclerView.onTouchEvent(RecyclerView.java:2508)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.View.dispatchTouchEvent(View.java:7728)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2212)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1945)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
In mgmain JNI_OnLoad
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.890 I/dalvikvm( 6526): at md5b60ffeb829f638581ab2bb9b1a7f4f3f.PlatformRenderer.n_dispatchTouchEvent(Native Method)
07-19 13:45:17.890 I/dalvikvm( 6526): at md5b60ffeb829f638581ab2bb9b1a7f4f3f.PlatformRenderer.dispatchTouchEvent(PlatformRenderer.java:55)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2218)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1959)
07-19 13:45:17.890 I/dalvikvm( 6526): at com.android.internal.policy.impl.PhoneWindow$DecorView.superDispatchTouchEvent(PhoneWindow.java:2165)
07-19 13:45:17.890 I/dalvikvm( 6526): at com.android.internal.policy.impl.PhoneWindow.superDispatchTouchEvent(PhoneWindow.java:1602)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.app.Activity.dispatchTouchEvent(Activity.java:2504)
07-19 13:45:17.890 I/dalvikvm( 6526): at com.android.internal.policy.impl.PhoneWindow$DecorView.dispatchTouchEvent(PhoneWindow.java:2113)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.View.dispatchPointerEvent(View.java:7908)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewRootImpl$ViewPostImeInputStage.processPointerEvent(ViewRootImpl.java:4132)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewRootImpl$ViewPostImeInputStage.onProcess(ViewRootImpl.java:4011)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3568)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:3618)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:3587)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewRootImpl$AsyncInputStage.forward(ViewRootImpl.java:3694)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:3595)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewRootImpl$AsyncInputStage.apply(ViewRootImpl.java:3751)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3568)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:3618)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:3587)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:3595)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3568)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewRootImpl.deliverInputEvent(ViewRootImpl.java:5780)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewRootImpl.doProcessInputEvents(ViewRootImpl.java:5760)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewRootImpl.enqueueInputEvent(ViewRootImpl.java:5731)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.ViewRootImpl$WindowInputEventReceiver.onInputEvent(ViewRootImpl.java:5869)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.view.InputEventReceiver.dispatchInputEvent(InputEventReceiver.java:185)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.os.MessageQueue.nativePollOnce(Native Method)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.os.MessageQueue.next(MessageQueue.java:138)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.os.Looper.loop(Looper.java:123)
07-19 13:45:17.890 I/dalvikvm( 6526): at android.app.ActivityThread.main(ActivityThread.java:5290)
07-19 13:45:17.890 I/dalvikvm( 6526): at java.lang.reflect.Method.invokeNative(Native Method)
07-19 13:45:17.890 I/dalvikvm( 6526): at java.lang.reflect.Method.invoke(Method.java:515)
07-19 13:45:17.890 I/dalvikvm( 6526): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:859)
07-19 13:45:17.890 I/dalvikvm( 6526): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:675)
07-19 13:45:17.890 I/dalvikvm( 6526): at dalvik.system.NativeStart.main(Native Method)
07-19 13:45:17.890 I/dalvikvm( 6526):
07-19 13:45:17.890 E/dalvikvm( 6526): VM aborting
It seems that this control has been designed with binding in mind. I.e. the ItemsSource needs to be set in order for pages to be added to the View. However, I wish to add the pages programmatically at runtime in the same way I would add controls to a Grid, or other types of controls. Please add a Children collection and allow for us to add/remove Children programmatically in the same way that they can with the core CarouselPage control.
I have a NavigationPage containing a carouselview with several pages (let's call them A,B,C...)
I would like to push a page to the navigation stack from one of the child pages (say B).
However, Navigation.pushasync doesn't work (only from the master carouselview page).
How can I achieve that? i.e., push a page onto the navigation stack from one of the pages in the carousel?
Hi,
thank you very much for creating that control!
At the Android CarouselLayoutRenderer.updateSelectedIndex() function, you need to ensure that the carouselLayout.SelectedIndex Property should be set at the UI Thread. Otherwise all of a sudden the PropertyBinding didn't work anymore. I update it like this:
`
private void updateSelectedIndex()
{
var center = _scrollView.ScrollX + (_scrollView.Width / 2);
var carouselLayout = (CarouselLayout)Element;
var calculatedIdx = (center / _scrollView.Width);
using (var h = new Handler(Looper.MainLooper))
{
h.Post(() => carouselLayout.SelectedIndex = calculatedIdx);
}
}
`
Hope that helps someone.
updated the sample to Xamarin.Forms version 2.1.0.6524 and it crashes when you click the dots button, refactoring HomePage.cs so that tabs stuff is only created when the tabs indicator style is set avoids the crash.
i.e:
`public class HomePage : ContentPage
{
RelativeLayout relativeLayout;
CarouselLayout.IndicatorStyleEnum _indicatorStyle;
SwitcherPageViewModel viewModel;
public HomePage(CarouselLayout.IndicatorStyleEnum indicatorStyle)
{
_indicatorStyle = indicatorStyle;
viewModel = new SwitcherPageViewModel();
BindingContext = viewModel;
Title = _indicatorStyle.ToString();
relativeLayout = new RelativeLayout
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand
};
var pagesCarousel = CreatePagesCarousel();
switch(pagesCarousel.IndicatorStyle)
{
case CarouselLayout.IndicatorStyleEnum.Dots:
var dots = CreatePagerIndicatorContainer();
relativeLayout.Children.Add (pagesCarousel,
Constraint.RelativeToParent ((parent) => { return parent.X; }),
Constraint.RelativeToParent ((parent) => { return parent.Y; }),
Constraint.RelativeToParent ((parent) => { return parent.Width; }),
Constraint.RelativeToParent ((parent) => { return parent.Height/2; })
);
relativeLayout.Children.Add (dots,
Constraint.Constant (0),
Constraint.RelativeToView (pagesCarousel,
(parent,sibling) => { return sibling.Height - 18; }),
Constraint.RelativeToParent (parent => parent.Width),
Constraint.Constant (18)
);
break;
case CarouselLayout.IndicatorStyleEnum.Tabs:
View _tabs;
_tabs = CreateTabs();
var tabsHeight = 50;
relativeLayout.Children.Add (_tabs,
Constraint.Constant (0),
Constraint.RelativeToParent ((parent) => { return parent.Height - tabsHeight; }),
Constraint.RelativeToParent (parent => parent.Width),
Constraint.Constant (tabsHeight)
);
relativeLayout.Children.Add (pagesCarousel,
Constraint.RelativeToParent ((parent) => { return parent.X; }),
Constraint.RelativeToParent ((parent) => { return parent.Y; }),
Constraint.RelativeToParent ((parent) => { return parent.Width; }),
Constraint.RelativeToView (_tabs, (parent, sibling) => { return parent.Height - (sibling.Height); })
);
break;
default:
relativeLayout.Children.Add (pagesCarousel,
Constraint.RelativeToParent ((parent) => { return parent.X; }),
Constraint.RelativeToParent ((parent) => { return parent.Y; }),
Constraint.RelativeToParent ((parent) => { return parent.Width; }),
Constraint.RelativeToParent ((parent) => { return parent.Height; })
);
break;
}
Content = relativeLayout;
}`
Any plan to create a UWP demo?
Chris, i was able to tweak your component to receive a List as ItemsSource and it works nice for my needs.
I have a question for you:
void UpdateSelectedIndex ()
{
// WHAT IS THIS LINE FOR?
if (SelectedItem == BindingContext) return;
SelectedIndex = Children
.Select (c => c.BindingContext)
.ToList ()
.IndexOf (SelectedItem);
}
Hi,
Let me start by saying, great work.
Now to the sad part. I updated xamarin.forms from 1.4.4 to the new 2.2.0. And then the carousel is not working when I run it on android.
It stops during boot, with an "unexpected null" error. It happens when it goes into the android specific code, "Android.Widget.HorizontalScrollView.cs". In the ElementPropertyChanged. At "_scrollView = .....".
Have any one seen this issue. And if so do you have a solution?
Best regards
Bo
can anybody add image to carousel ? any help regards ,thanks @chrisriesgo
Library isn't working as expected with Xamarin Forms 2.3.4.231. Swiping scrolls all the pages without any stoping and stopped at the last one.
The examples now use a hand-rolled set of views and layouts to mimic a carousel. The existing implementation isn't scaleable, doesn't support virtualization, etc.
I'd like to update this recipe to use the Xamarin.Forms.CarouselView control from NuGet. Follow progress on this other branch.
Hi,
I found this code and it's working great.
But what I need is vertical carousel view so I tried to make it but failed. (I cloned your project and tried)
Can you add that function on this github?
Hi
This was working great with older version of forms! Was going down a similar route, then found your code saving me loads of time. Good Work!
However our app I am integrating into uses latest version of forms. Works fine on iOS, but on android the line
_scrollView = (HorizontalScrollView)typeof(ScrollViewRenderer)
.GetField ("hScrollView", BindingFlags.NonPublic | BindingFlags.Instance)
.GetValue (this);
Am guessing ScrollView layed out differently in forms 2.2, how did you browse the properties to find the HorizontalScrollView?
thanks
N
I feel that perhaps a very general use case is missing from the set of examples that are available. I came looking for a simple component that would allow me to place a number of images (or views) into a list and then send those to be intractable in a way that most would assume a carousel component to work.
The example only appears to provide usage cases for the types of interactions that control app flow or other such functionality. Perhaps it would be worth looking at creating some simple carousel examples that would allow people to start using this without trawling through lists of custom logic?
i.e.
Carousel carousel = new Carousel
{
Children = {
view1, view2, view3
},
Dots = true
}
Thanks for this great control! It works great on Android, and iOS. Unfortunately, it does not seem to work for Windows UWP. When I run an app with a CarouselView on Windows UWP, I get this exception:
System.Runtime.InteropServices.COMException (0x80004005): Error HRESULT E_FAIL has been returned from a call to a COM component.
Message: Unspecified error\r\n\r\nCannot find a resource with the given key.
Hi iam using your control in my few applications.
Well main problem comes when i bind the control from collection and if i modify the collection so CarouselView does not update automatically.
Please guide me what is the solution , I would really appreciate your help on this regard.
Hi,
I've recently created a new project with your xamarin-forms-carouselview and I've found that the carousel scroll to the first view on iOS when I change the orientation of the device.
On Android, the view currently selected stay and don't reset.
How can we have the same behavior on iOS and Android ?
Have you a workaround for keep the selected index/item when I change the device's orientation ?
Thanks
how can i add this control now to my project? do i have to add all the source code to my project? is it possible to wrap it up into a nuget-package?
I have multiple controls in all carousel view. How to get value from those controls inside multiple.
Also It's possible to access one control to another view controls?
How to show page indicator of CarouselView control version 2.3.0-pre2 ?
pagerIndicator.SetBinding(PagerIndicatorTabs.ColumnDefinitionsProperty, "Pages", BindingMode.Default, new SpacingConverter());
If you get passed the exception below, you get an exception in the renderer.
var a = new ViewPager(this.Context);
var b = a.ClipBounds;
--- End of managed exception stack trace ---
java.lang.RuntimeException: java.lang.reflect.InvocationTargetException
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:595)
at dalvik.system.NativeStart.main(Native Method)
Caused by: java.lang.reflect.InvocationTargetException
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:515)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:779)
... 2 more
Caused by: md52ce486a14f4bcd95899665e9d932190b.JavaProxyThrowable: System.ArgumentException: Value was an invalid value for ColumnDefinitions
Parameter name: value
at Xamarin.Forms.BindableObject.SetValueCore (Xamarin.Forms.BindableProperty,object,Xamarin.Forms.BindableObject/SetValueFlags,Xamarin.Forms.BindableObject/SetValuePrivateFlags) <IL 0x000bb, 0x0039f>
at Xamarin.Forms.BindingExpression.ApplyCore (object,Xamarin.Forms.BindableObject,Xamarin.Forms.BindableProperty,bool) <IL 0x00213, 0x00ab7>
at Xamarin.Forms.BindingExpression.Apply (object,Xamarin.Forms.BindableObject,Xamarin.Forms.BindableProperty) <IL 0x0007a, 0x002bf>
at Xamarin.Forms.Binding.Apply (object,Xamarin.Forms.BindableObject,Xamarin.Forms.BindableProperty) <IL 0x0004b, 0x001ab>
at Xamarin.Forms.BindableObject.SetBinding (Xamarin.Forms.BindableProperty,Xamarin.Forms.BindingBase,bool) <IL 0x000b1, 0x002eb>
at Xamarin.Forms.BindableObject.SetBinding (Xamarin.Forms.BindableProperty,Xamarin.Forms.BindingBase) <IL 0x00004, 0x0003f>
at Xamarin.Forms.BindableObjectExtensions.SetBinding (Xamarin.Forms.BindableObject,Xamarin.Forms.BindableProperty,string,Xamarin.Forms.BindingMode,Xamarin.Forms.IValueConverter,string) <IL 0x0002d, 0x00153>
at CustomLayouts.HomePage.CreateTabs () [0x0004c] in /Users/mccorma/Desktop/xamarin-forms-carouselview-master/src/CustomLayouts/HomePage.cs:127
at CustomLayouts.HomePage..ctor (CustomLayouts.Controls.CarouselLayout/IndicatorStyleEnum) [0x0006f] in /Users/mccorma/Desktop/xamarin-forms-carouselview-master/src/CustomLayouts/HomePage.cs:38
at CustomLayouts.SwitcherPage.m__1 (object) [0x00007] in /Users/mccorma/Desktop/xamarin-forms-carouselview-master/src/CustomLayouts/SwitcherPage.cs:21
at Xamarin.Forms.Command.Execute (object) <IL 0x00007, 0x0002f>
at Xamarin.Forms.Button.Xamarin.Forms.IButtonController.SendClicked () <IL 0x00011, 0x0007c>
at Xamarin.Forms.Platform.Android.ButtonRenderer/ButtonClickListener.OnClick (Android.Views.View) <IL 0x00015, 0x0009b>
at Android.Views.View/IOnClickListenerInvoker.n_OnClick_Landroid_view_View_ (intptr,intptr,intptr) [0x00011] in /Users/builder/data/lanes/1879/5f55a9ef/source/monodroid/src/Mono.Android/platforms/android-21/src/generated/Android.Views.View.cs:1888
at (wrapper dynamic-method) object.69b6d15e-6d08-45c8-a840-5ee6f869e334 (intptr,intptr,intptr) <IL 0x00017, 0x00027>
at md5530bd51e982e6e7b340b73e88efe666e.ButtonRenderer_ButtonClickListener.n_onClick(Native Method)
at md5530bd51e982e6e7b340b73e88efe666e.ButtonRenderer_ButtonClickListener.onClick(ButtonRenderer_ButtonClickListener.java:29)
at android.view.View.performClick(View.java:4438)
at android.view.View$PerformClick.run(View.java:18422)
at android.os.Handler.handleCallback(Handler.java:733)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:136)
at android.app.ActivityThread.main(ActivityThread.java:5017)
... 5 more
Copied the sample into a project that had been setup following Montemagnos blog post (https://blog.xamarin.com/material-design-for-your-xamarin-forms-android-apps/) on material design, the dots don't render now. Just thought I'd flag this, I'm hoping I can work it out as we're using it in a production app and I'd prefer not to have to redesign the UX.
I noticed an issue where the carousel (using the dots setup) would work fine for the first 3 pages, but the 4th page was cutoff and not full width. I spent a few hours trying to figure out what was going on, and how my example was different from the sample. I finally realized that the difference was that I was setting up my bound collection of items after the view was created instead of having the collection already created when the UI was being laid out. I discovered that if I made sure the collection was already created when the view was created then the paging would work properly (last item would properly be full width).
In the end, I discovered that if I just edited the CarouselLayout.LayoutChildren() method to put the call to base.LayoutChildren() at the bottom of the method instead of the top, it would lay out fine even with the collection built at a later point. I don't totally understand why this works, but I wanted to point it out in case anyone else runs into the issue.
For a bit more detail - the LayoutChildren() method would fire 5 times for 4 items whether the collection existed up front, or was setup later. However, if the collection already existed the Children count would be 4 every time it fired, whereas if the collection was created later it would still fire 5 times, but the Children count be 0, 1, 2, 3, 4 with each subsequent call (which is odd since the ObservableCollection is set to the full list and not added to itself - but I digress). No idea if this factors in to the underlying issue or not.
Thanks so much for creating this control and sample!
Hi Chris, I am having a major issue that I am not able to fix by myself, could you help me?
The issue is that when I have a vertical ListView on one of the page, the ListView won't be able to scroll. I have to wrap a ScrollView around the ListView to be able to scroll. But it causes major performance issue if the ListView has a lot of items. Could you help me with this and provide a solution to fix the scrolling issue without resorting to wrapping a ScrollView around the ListView?
Chris, i discovered and issue with your implementation and a way to fix it. Sometimes the Renderer is collected when you close the screen, then, when you open it again and you try to swipe, it crash because Element is null.
The fix?
Android renderer:
void ElementPropertyChanged(object sender, PropertyChangedEventArgs e) {
if (e.PropertyName == "Renderer") {
_scrollView = (HorizontalScrollView)typeof(ScrollViewRenderer)
.GetField ("hScrollView", BindingFlags.NonPublic | BindingFlags.Instance)
.GetValue (this);
_scrollView.HorizontalScrollBarEnabled = false;
_scrollView.Touch += HScrollViewTouch;
}
if (Element == null) return; // this fix the issue
if (e.PropertyName == CarouselLayout.SelectedIndexProperty.PropertyName && !_motionDown) {
ScrollToIndex (((CarouselLayout)this.Element).SelectedIndex);
}
}
iOS renderer:
void ElementPropertyChanged(object sender, PropertyChangedEventArgs e) {
if (Element == null) return; // this fix the issue
if (e.PropertyName == CarouselLayout.SelectedIndexProperty.PropertyName && !Dragging) {
ScrollToSelection (false);
}
}
Thanks for sharing this.
I am attempting to modify the CarouselLayout class so that I can see parts of the child to the left and child to the right of the current item. Also, I am trying to have a little space between the children. Can you help me achieve this please?
I'm not sure if this is a bug or feature request.
I downloaded the example project.
When a tab button is clicked in the tabs view, the page is changed immediately instead of sliding to it.
I expected it to slide the view in, like in your demo images, when I click one of the tab buttons.
I have a nullref on this line (on android One and android 6.0.1), I'm not sure where it's from and I'm investigating too. But if you have any help, it'd be most welcome :)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.