Onboarding with one controller

Question

Hi,

in need to add registration form at the end of onboarding.

We have two screens with info about the app and need to add a new page with registration form at the end. But I don't know how. It is possible with CarouselView? Or is there any way to create 3 "controllers" and add them to scrollview with offset (page with)? I'm not sure if it possible with Xamarin forms. Thank you for any advise

M

Answer 1

Hi Michal-1404,

Welcome to our Microsoft Q&A platform!

Do you want to show 3 pages on one screen? If so, refer to the following.

It is possible with CarouselView?

Sure, If you want to show the page with different template in one CarouselView, you only need to create a DataTemplateSelector for it.

Here are the steps you can refer to.

First, create ContentView for each page, just like,

<?xml version="1.0" encoding="UTF-8"?>  
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"   
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
             x:Class="CarouselViewTest.RegistrationPage">  
      <StackLayout BackgroundColor="Azure">  
        <Label Text="This is registration page." />  
        <Button Text="click"/>  
    </StackLayout>  
</ContentView>  

Now define a custom templateSelector. More info, you can refer to Creating a Xamarin.Forms DataTemplateSelector.

public class CarouselViewTemplateSelector : DataTemplateSelector  
{  
    public DataTemplate Page1Template { get; set; }  
    public DataTemplate Page2Template { get; set; }  
    public DataTemplate RegistrationPageTemplate { get; set; }  
  
    public CarouselViewTemplateSelector()  
    {  
        Page1Template = new DataTemplate(typeof(Page1));  
        Page2Template = new DataTemplate(typeof(Page2));  
        RegistrationPageTemplate = new DataTemplate(typeof(RegistrationPage));  
    }  
  
    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)  
    {  
        TestClass cell = (TestClass)item;  
  
        switch (cell.TemplateName)  
        {  
            case "Page1":  
                return Page1Template;  
            case "Page2":  
                return Page2Template;  
            case "RegistrationPage":  
                return RegistrationPageTemplate;  
            default:  
                return null;  
        }  
    }  
}  

Then add the this templateSelector to ResourceDictionary and bind it to CarouselView's ItemTemplate.

<ContentPage.BindingContext>  
    <local:MainPageViewModel/>  
</ContentPage.BindingContext>  
      
<ContentPage.Resources>  
    <ResourceDictionary>  
        <local:CarouselViewTemplateSelector x:Key="templateSelector"></local:CarouselViewTemplateSelector>  
    </ResourceDictionary>  
</ContentPage.Resources>  
  
<StackLayout>  
    <CarouselView x:Name="carouselView"   
                    Loop="False"  
                    ItemsSource="{Binding TestClasses}"  
                    ItemTemplate="{StaticResource templateSelector}" />  
</StackLayout>  

And here is the ViewModel.

class MainPageViewModel  
{  
    public List<TestClass> TestClasses { get; set; }  
    public MainPageViewModel()  
    {  
        TestClasses = new List<TestClass>();  
        TestClasses.Add(new TestClass { TemplateName = "Page1"});  
        TestClasses.Add(new TestClass { TemplateName = "Page2"});  
        TestClasses.Add(new TestClass { TemplateName = "RegistrationPage" });  
    }  
}  

---

Or is there any way to create 3 "controllers" and add them to scrollview with offset (page with)?

Yes, you can scroll the page to the specified position. Call ScrollToAsync method and it will scroll an element into view.

private async void ButtonToPage1_Clicked(object sender, EventArgs e)  
{  
    await scrollView.ScrollToAsync(TestPage1, ScrollToPosition.Start, true);  
}  
private async void ButtonToPage2_Clicked(object sender, EventArgs e)  
{  
    await scrollView.ScrollToAsync(TestPage2, ScrollToPosition.Start, true);  
}  
private async void ButtonToRegistrationPage_Clicked(object sender, EventArgs e)  
{  
    await scrollView.ScrollToAsync(TestRegistrationPage, ScrollToPosition.Start, true);  
}  

Here is the ScrollView xaml.

<StackLayout>  
    <StackLayout Orientation="Horizontal">  
        <Button Text="Page1" Clicked="ButtonToPage1_Clicked"/>  
        <Button Text="Page2" Clicked="ButtonToPage2_Clicked"/>  
        <Button Text="RegistrationPage" Clicked="ButtonToRegistrationPage_Clicked"/>  
    </StackLayout>  
    <ScrollView x:Name="scrollView">  
        <StackLayout>  
            <local:Page1 HeightRequest="600" x:Name="TestPage1"/>  
            <local:Page2 HeightRequest="600" x:Name="TestPage2"/>  
            <local:RegistrationPage HeightRequest="600" x:Name="TestRegistrationPage"/>  
        </StackLayout>  
    </ScrollView>  
</StackLayout>  

Regards,
Kyle

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hi Kyle,

thank you. I didn't have time to try it. It works fine, thank you.

M