Different Color and Title for every ContentPage in the CarouselPage

Question

Hi,

How can I change the NavigationPage's TitleView Backcolor color to be different for every ContentPage in my CarouselPage?

and How can I set a different Title for every page based on the ContentPage name, for example for ContentPageHomePage the Title is "Home Page" and for ContentPagePag2 the Title is "Page 2", etc..

<?xml version="1.0" encoding="utf-8" ?>
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
    ios:Page.UseSafeArea="True" 
    CurrentPageChanged="CarouselPage_CurrentPageChanged"
    x:Class="Kalko.MainPage">
    <NavigationPage.TitleView>
        <StackLayout>
        <Label Text="Home Page" VerticalOptions="Center" />
        <Image HorizontalOptions="End" VerticalOptions="Center">
        <Image.Source>
            <FontImageSource FontFamily="FontSolid" Size="30" Glyph="{StaticResource IconFavorite}" />
        </Image.Source>
        </Image>
        </StackLayout>
    </NavigationPage.TitleView>
    <ContentPage x:Name="ContentPageHomePage">
    </ContentPage>
    <ContentPage x:Name="ContentPagePag2">
    </ContentPage>
    <ContentPage x:Name="ContentPagePag3">
    </ContentPage>
    <ContentPage x:Name="ContentPagePag4">
    </ContentPage>
</CarouselPage>

Answer 1

Hello,

The CarouselPage has been superseded by the CarouselView, you could change the Title and by CurrentItemChanged event when the current item changes. Refer to this sample and the following code:
XAML

 <ContentPage.BindingContext>  
        <ViewModels:CarouselViewViewModel/>  
    </ContentPage.BindingContext>  
    <NavigationPage.TitleView  >  
        <StackLayout >  
            <Label x:Name="TitleLabel" Text="Home" VerticalOptions="Center" />  
        </StackLayout>  
    </NavigationPage.TitleView>  
<CarouselView x:Name="carouselView" ItemsSource="{Binding Monkeys}" PositionChanged="carouselView_PositionChanged" CurrentItemChanged="carouselView_CurrentItemChanged"  
                      >  
<CarouselView.ItemTemplate>  
                <DataTemplate>  
                   ......  
                </DataTemplate>  
            </CarouselView.ItemTemplate>  
              
        </CarouselView>  

CodeBehind

 Monkey currentItem;  
            public void UpdateUI() {  
            TitleLabel.Text = $"Current item: {currentItem?.Name}";// title  
                ((NavigationPage)Application.Current.MainPage).BarBackgroundColor  = currentItem.PageColor;// color in the viewmodel  
            }  
  
        private void carouselView_CurrentItemChanged(object sender, CurrentItemChangedEventArgs e)  
        {  
            currentItem = e.CurrentItem as Monkey;  
            UpdateUI();  
        }  

ViewModel

public class CarouselViewViewModel  
     {  
         readonly IList<Monkey> source;  
         public ObservableCollection<Monkey> Monkeys { get; private set; }  
         public CarouselViewViewModel()  
         {  
             source = new List<Monkey>();  
             CreateMonkeyCollection();  
      
         }  
         void CreateMonkeyCollection()  
         {  
             source.Add(new Monkey  
             {  
                  PageColor = Color.Red  
                      
             });  
      
             source.Add(new Monkey  
             {......  
             });  
      
            .......  
      
             Monkeys = new ObservableCollection<Monkey>(source);  
         }  
     }  
     public class Monkey  
     {  
         ......  
         public Color PageColor { get; set; }  
     }  

You also could try to use a command to respond to the current item changing

<CarouselView ItemsSource="{Binding Monkeys}"  
              CurrentItemChangedCommand="{Binding ItemChangedCommand}"  
              CurrentItemChangedCommandParameter="{Binding Source={RelativeSource Self}, Path=CurrentItem}">  
    ...  
</CarouselView>  

Refer to https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/carouselview/interaction#command

-------- CarouselPage Update(do the same thing by CurrentPageChanged event)--------

Push to CarouselPage

private void Button_Clicked(object sender, EventArgs e)  
        {  
            Navigation.PushAsync(new MyCarouselPage());  
        }  

CurrentPageChanged event

private void CarouselPage_CurrentPageChanged(object sender, EventArgs e)  
        {  
            var index = this.Children.IndexOf(this.CurrentPage);  
            ColorsDataModel model = ColorsDataModel.All[index];  
           TitleLabel.Text = model.Name;  
            ((NavigationPage)Application.Current.MainPage).BarBackgroundColor = model.Color;  
        }  

XAML

https://github.com/xamarin/xamarin-forms-samples/blob/main/Navigation/CarouselPageTemplate/CarouselPageNavigation/MainPage.xaml

Model
https://github.com/xamarin/xamarin-forms-samples/blob/main/Navigation/CarouselPageTemplate/CarouselPageNavigation/ColorsDataModel.cs

Best Regards,
Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
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.