CarouselView and button events

Hi.
I must implement a CarouselPage, but I want a vertical swipe instead of horizontal. So I migrated to CarouselView. This is my XAML:

<controls:CarouselViewControl Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
    <controls:CarouselViewControl.ItemsSource>
        <x:Array Type="{x:Type View}">
            <AbsoluteLayout>
                <StackLayout Orientation="Vertical" AbsoluteLayout.LayoutBounds=".5, .5, .9, .35" AbsoluteLayout.LayoutFlags="All">
                    <Entry x:Name="NameEntry"/>
                    <Entry x:Name="SurnameEntry"/>
                    <Entry x:Name="NewEmailEntry"/>
                    <Entry x:Name="NewPasswordEntry" IsPassword="true"/>
                </StackLayout>
                <Button x:Name="RegisterButton" Clicked="Register_Handle_Clicked" AbsoluteLayout.LayoutBounds=".5, .85, .3, .07" AbsoluteLayout.LayoutFlags="All" Text="Register"/>
            </AbsoluteLayout>
        </x:Array>
    </controls:CarouselViewControl.ItemsSource>
</controls:CarouselViewControl>

This one is the first of two AbsoluteLayouts.
The UI shows fine if I remove the Clicked event on the button, but I get "Common Language Runtime detected an invalid program." if I leave it. Also, I cannot see NameEntry or any other view in the code-behind.

What am I doing wrong?

Best Answers

  • MassimilianoBruniMassimilianoBruni US ✭✭
    Accepted Answer
    Solved.
    The problem was XAML compilation. Works fine disabling it.

Answers

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Plan B
    Rotate the CarouselView 90° on the page.
    Then rotate the content in the CarouselView by -90°

    that should get you a vertical Carousel that doesn't require you do any special handling.

    Its the same technique we employ to make a horizontal ListView.

  • @ClintStLaurent said:
    Plan B
    Rotate the CarouselView 90° on the page.
    Then rotate the content in the CarouselView by -90°

    that should get you a vertical Carousel that doesn't require you do any special handling.

    Its the same technique we employ to make a horizontal ListView.

    I think you meant CarouselPage instead of CarouselView.
    By the way, it doesn't work. I get this: (attached image)

    Entries and all other views are way too left.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    I think you meant CarouselPage instead of CarouselView.

    No. CarouselPage development is dead last I knew. CarouselView replaced it and can be put on a page... more than one can go on a page... or can be a view that consume the entire page.

  • @ClintStLaurent said:

    I think you meant CarouselPage instead of CarouselView.

    No. CarouselPage development is dead last I knew. CarouselView replaced it and can be put on a page... more than one can go on a page... or can be a view that consume the entire page.

    I am using CarouselView and the rotation is fine (there is an Orientation property).
    The problem is that I can't handle button events because I get a compilation error, as I said.

  • MassimilianoBruniMassimilianoBruni USMember ✭✭
    edited November 2017

    @ClintStLaurent said:

    The problem is that I can't handle button events because I get a compilation error, as I said.

    I don't think that's due to rotation. You're not going to get a compilation error just because you set the rotation. You've got something else wrong. maybe a dropped closing tag in your xaml... or some other issue that is keeping the XAML from being valid.

    XAML is fine because if I delete the Clicked event the app runs.
    The problem is that I can't connect any view to the code-behind if this view is inside a CarouselView, but I don't know why.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Why would you have a clicked event anyway? What are you handling in code behind?

    The problem is that I can't connect any view to the code-behind if this view is inside a CarouselView, but I don't know why.

    This sounds like a lot of work happening in code-behind that probably doesn't belong there.

    What if you assign TapGuestureRecongizer and a command that goes back to your ViewModel?

  • MassimilianoBruniMassimilianoBruni USMember ✭✭
    edited November 2017

    @ClintStLaurent said:
    Why would you have a clicked event anyway? What are you handling in code behind?

    I must pop the page modally. It is a login page and after login I want to go to the Main Page. I need the carousel to switch between Login and Registration.

    TapGestureRecognizer is not applicable to Buttons because they are supposed to be used with the default Clicked, Pressed etc... events

    It is not difficult but I can't figure out how to do it with CarouselView. It works fine with CarouselPage.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Code behind a view should be for UI level work. Period. A view is UI. The code behind that is still UI.

    Having a View (carousel or otherwise) dictate logic like changing pages is not good design. What if you needed to change pages based on some logic... a calculation... a new setting downloaded... permissions for that user... You wouldn't want to go into a view's code-behind for that action.

    Login would be handled in a ViewModel. Its a logic thing and is not dependant on UI. When someone logs in, then the ViewModel should handle the navigation. Its pretty common to make a NavigationVM or NavigationManager class just to handle that. That way you consolidate all your rules about navigation to a single place that can confirm if the user has permission, have they met all the criteria, are they a user or a superuser meaning they should get the advanced or basic version of the page {...}

    If you're handling the logic of loging in etc. from the code-behind of the view I urge you to re-work your architecture before you paint yourself into a corner.

  • MassimilianoBruniMassimilianoBruni USMember ✭✭
    edited November 2017
    OK I will consider doing that.
    But how can I tell the ViewModel to handle navigation when the login button is pressed? I mean, I cannot even access to the button Property of the ContentPage class. I can’t send a message, an event or wathever to the ViewModel if I can’t handle the button property programmatically.
  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    I can't speak to why your code doesn't work - I'm not looking at it.

    I cannot even access to the button Property of the ContentPage class.

    I'm not sure I even follow what you're saying here. You can't access the button property of a Contentpage class...
    ContentPage doesn't have a button property.

    • Are you trying to reach into a page where you have placed a button? We try to avoid reaching into views and fiddling with UI elements from the outside.
    • Or are you trying to reach a button, on a view, that is part of the carousel? If you are... There is a big need to re-think your approach. We simply don't do that sort of thing.
  • I’m trying to reach a button which is in a StackLayout which is part of a CarouselView which is in a ContentPage.

    Any advice to how can I link two pages (Login <-> Registration) and switch between them with a vertical swipe animation? CarouselPage works fine with horizontal animation. I want the same thing but vertical.
  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    I’m trying to reach a button which

    Reach it from where? This is what I'm not grasping. Why are you reaching into a view and from where? And what does this button do that you have to reach in to it from some external class?

  • I would like to reach it from the ContentPage class (which contains the CarouselView), so I can handle Login (it is a Login button). If I can’t see the button I can’t handle the Clicked event.
    I know that I should do this on a separate class, but anyway I need to reach it from the ContentPage before.
  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    But you don't reach in from the code behind.

    If you want to handle the clicked event, that's fine - well - less bad.
    In your XAML just enter a method name for Clicked=" and let Visual Studio fill it in for you and it will make a handler for you in the code behind.

  • I did it but I get "Common Language Runtime detected an invalid program.“ as a compile error.
  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    How about putting that in an public github repo so I can take a look at it? What you're describing just doesn't make sense.

  • MassimilianoBruniMassimilianoBruni USMember ✭✭
    Accepted Answer
    Solved.
    The problem was XAML compilation. Works fine disabling it.
Sign In or Register to comment.