GithubHelp home page GithubHelp logo

chrisriesgo / xamarin-forms-carouselview Goto Github PK

View Code? Open in Web Editor NEW
147.0 24.0 62.0 1.34 MB

A Xamarin.Forms custom control recipe that mirrors the functionality of the CarouselPage - except the "pages" are simply Content Views.

C# 100.00%
carouselview xamarin-forms xamarin sample-xamarin

xamarin-forms-carouselview's Introduction

Xamarin.Forms CarouselView

A version of this recipe that uses the Xamarin.Forms.CarouselView from NuGet, can be found on this branch.


Thanks to my friends at Firefly Logic and to Michael Watson for the inspiration in creating this custom control.

This control mirrors the functionality of the CarouselPage - except the "pages" are simply Content Views.

I have examples that show the CarouselView used as:

  • A full-page control with no page indicators
  • A gallery-style control with dots as page indicators
  • A full-page control with tabs as page indicators

xamarin-forms-carouselview's People

Contributors

brminnick avatar chrisriesgo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

xamarin-forms-carouselview's Issues

More like a question

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);
}

Issue with Latest Xamarin Forms

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.

how to use

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?

Issue on Android with latest version of Forms 2.2.0.31

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

Android: Suddenly the SelecteIndex Property binding didn't work.

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.

Vertical Orientation Carousel View.

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?

Unable to get dot indicators when try to display multiple carouselLayout on single page

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

Slow swipe - System.InvalidOperationException: Sequence contains more than one element

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

Update recipe to use Xamarin.Forms.CarouselView

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.

Xamarin.Forms 2.1 dots crash

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;
    }`

How can I use this lib?

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.

Navigation issue

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?

Cannot access disposed object

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.

Major issue with scrolling in ListView

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?

Carousel reset only on iOS when device's orientation change

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

[iOS] Slide to view when SelectedIndex or SelectedItem changed.

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.

General use case example missing

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
}

Not update if page collection modifed

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.

CarouselView Broken on UWP

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.

Disable swipe

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?

Xamarin.forms 2.2.0 update

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

Last child of CarouselLayout isn't full width if data source set asyncronously

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!

Question -- Modify the CarouselLayout to see other children

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?

How to make CarouselView work with dynamic item views/models

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.

Android 4.4.2 exception

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

No Children Collection

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.