CODEWITHSUNDEEP
xamarin.formsprism
Don Box
Don Box

Reputation: 3336

Navigating to views inside CarouselView with Prism

I have a MyPage with a CarouselView and two buttons below it. The buttons are for navigating between ContentView views inside the CarouselView:

[CarouselView]
[Prev]  [Next]

ContentViewA and ContentViewB are inside of CarouselView

The MyPageViewModel has commands for the previous and next buttons:

class MyPageViewModel : BindableBase
{
    public ICommand ShowPrevCommand { get; private set;}
    public ICommand ShowNextCommand { get; private set;}
}

How do I implement the commands to make the CarouselView show the views?

According to documentation here

In Prism, the concept of navigating to a View or navigating to a ViewModel does not exist. Instead, you simply navigate to an experience, or a unique identifier, which represents the target view you wish to navigate to in your application

so I was thinking I could use INavigationService. I was thinking I could implement my own NavigationService and on NavigateAsync I could check if current page is MyPage. If it is, I could set the view inside of CarouselView to the view based on the navigation name parameter.

I am however not sure how to implement and override Prism's navigation service.

Can Prism for Xamarin Forms do something like this?

Upvotes: 2

Views: 880

Answers (1)

Paul Kertscher
Paul Kertscher

Reputation: 9713

It does not have to be that complicated. CarouselView has the bindable property Position, which you can bind to a property of your viewmodel

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:forms="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView">
    <ContentPage.Content>
        <forms:CarouselView Position="{Binding CarouselPosition}">
            <!-- whatever to display in the CarouselView -->
        </form:CarouselView>
    </ContentPage.Content>
</ContentPage>

In your viewmodel you can implement th navigation the following way:

class MyPageViewModel : BindableBase
{
    public MyPageViewModel()
    {
        ShowPrevCommand = new Command(ShowPrev);
        ShowNextCommand = new Command(ShowNext);
    }

    public ICommand ShowPrevCommand { get; private set;}
    public ICommand ShowNextCommand { get; private set;}

    void OnShowPrev()
    {
        CarouselPosition--;
    }

    void OnShowNext()
    {
        CarouselPosition++;
    }

    public int CarouselPosition
    {
        get => _carouselPosition;
        set
        {
            if(value == _carouselPosition)
            {
                return;
            }

            this._carouselPosition = value;
            PropertyChanges?.Invoke(this, new PropertyChangedEventArgs(CarouselPosition));
        }
    }

}

Just to get the gist. Of course you'll have to handle cases like overflows (i.e. CarouselPosition exceeds the number of views in the carousel), etc.

Upvotes: 1

Related Questions