Search code examples
xamarinxamarin.formsviewcarousel

How to Add Button on Last Page in Carousel view using xamarin forms?


I want to add a Button in Last page in CarouselView page any one can help me ?

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:local="clr-namespace:sing"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="sing.Welcome"
    BackgroundColor="#ff4949">
    <ContentPage.BindingContext>
        <local:Items/>
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <StackLayout>

Here is my Carousel view with Binding items in my ViewModels

            <CarouselView ItemsSource="{Binding Monkeys}"
                      IndicatorView="indicatorView">
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Frame HasShadow="False"
                               CornerRadius="5"
                               Margin="0,50,0,0"
                               HeightRequest="300"
                               HorizontalOptions="Center"
                               VerticalOptions="CenterAndExpand"
                               BackgroundColor="#ff4949">
                            <StackLayout>
                                <Image Source="{Binding ImageUrl}" 
                                       Aspect="AspectFill"
                                       HeightRequest="300"
                                       WidthRequest="300"
                                       HorizontalOptions="Center" />
                            </StackLayout>
                        </Frame>
                    </StackLayout>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>

Continuation :::::::

        <IndicatorView x:Name="indicatorView"
                       IndicatorsShape="Circle"
                       IndicatorColor="LightGray"
                       SelectedIndicatorColor="Yellow"
                       HorizontalOptions="Center"
                       Margin="0,0,0,40" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Is it possible to Add a button on last page?


Solution

  • You could define the Button in DataTemplate in advance . And set the property IsVisible as true of the last item .

    in xaml

    <DataTemplate>
    
        <StackLayout>
    
              <Frame HasShadow="False"
                     CornerRadius="5"
                     Margin="0,50,0,0"
                     HeightRequest="300"
                     HorizontalOptions="Center"
                     VerticalOptions="CenterAndExpand"
                     BackgroundColor="#ff4949">
                 <StackLayout>
                     <Image Source="{Binding ImageUrl}" 
                                           Aspect="AspectFill"
                                           HeightRequest="300"
                                           WidthRequest="300"
                                           HorizontalOptions="Center" />
                 </StackLayout>
             </Frame>
    
             <Button Text="xxx" IsVisible="{Binding IsVisible}"/>
    
        </StackLayout>
    </DataTemplate>
    

    in your model

    public class xxxModel : INotifyPropertyChanged
    {
       
    
        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    
        bool isVisible=false;   // the button is invisible in default
    
        public bool IsVisible
        {
            get
            {
                return isVisible;
            }
    
            set
            {
                if (isVisible != value)
                {
                    isVisible = value;
                    NotifyPropertyChanged("IsVisible");
                }
            }
        }
    
        //other properties
    }
    

    in ViewModel

    invoke the following line after you initialize the ItemSource

    var model = Monkeys[Monkeys.Count - 1] as xxxModel;
    
    model.IsVisible = true;