Xamarin.Forms CarouselView

Xamarin.Forms has a nice control called CarouselView and it is very easy to add it to your Xamarin project. Below you can see the basic steps you need to follow in order to add it to your Xamarin project.

• Install CarouselView Nuget package to your all projects (PCL, Android, iOS and Windows)
• As the CarouselView is in a separate assembly, add CarouselView's namespace in root of your Xaml page and use it in your page like this;

 <?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="XYZ.Mobile.App.Controls.ValidationControls.Confirmation"

             xmlns:valueconverters="clr-namespace:XYZ.Mobile.App.ValueConverters"

             xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView">

  <StackLayout Grid.Row="1"

                 Orientation="Vertical">

      <cv:CarouselView x:Name="ConfirmationQuestionsCarousel"

                       ItemsSource="{Binding ConfirmationQuestions}">

        <cv:CarouselView.ItemTemplate>

          <DataTemplate>

          <!--You can now add other Xamarin controls in to your CarouselView-->

            <Grid>

              <Grid.RowDefinitions>

                <RowDefinition Height="50"/>

                <RowDefinition/>

                <RowDefinition Height="50"/>

              </Grid.RowDefinitions>

              <Grid.ColumnDefinitions>

                <ColumnDefinition/>

                <ColumnDefinition/>

              </Grid.ColumnDefinitions>

              <Label Grid.Row="0"

                     Grid.ColumnSpan="2"

                     Text="SOME TEXT"

                     FontAttributes="Bold" />

              <Label Grid.Row="1"

                     Grid.ColumnSpan="2"

                     Text="{Binding Question}"/>

              <Button Grid.Row="2"

                      Grid.Column="0"

                      Text="No"

                      StyleId="No"

                      CommandParameter="false"

                      Command="{Binding ToggleAgree}"

                      Clicked="OnQuestionAnswered"

                      BackgroundColor="{Binding Agreed, Converter={StaticResource BoolToToggleButtonColorConverter}, ConverterParameter='Invert'}"/>

              <Button Grid.Row="2"

                      Grid.Column="1"

                      Text="Yes"

                      StyleId="Yes"

                      CommandParameter="true"

                      Command="{Binding ToggleAgree}"

                      Clicked="OnQuestionAnswered"

                      BackgroundColor="{Binding Agreed, Converter={StaticResource BoolToToggleButtonColorConverter}}"/>

            </Grid>

          </DataTemplate>

        </cv:CarouselView.ItemTemplate>

      </cv:CarouselView>

    </StackLayout>

</ContentView>

• When I used Xamarin.Forms's CarouselView for the first time, I experienced some problems while getting the Count of the CarouselView item. I needed this count information in order to swipe to the next item correctly. Whenever I tried to get the ConfirmationQuestionsCarousel.Count info, I got "Unknown Member" error, so I eventually used the following code in order to get the count information.

         private void OnQuestionAnswered(object sender, EventArgs args)

        {

            var buttonClicked = sender as Button;

            var buttonClickedAnswer = buttonClicked.StyleId;

            

            // Ugly way to get the count

            //var s = new List<object>(ConfirmationQuestionsCarousel.ItemsSource.Cast<object>()).Count;

            // Better way to get the count

            int count = 0;

            foreach (var item in ConfirmationQuestionsCarousel.ItemsSource)

            {

                count++;

            }

            // This is to set the Carosel's Position - this is unfinished code, I put it here only as an example

            ConfirmationQuestionsCarousel.Position = 3;

        }

• That is all, happy coding.