question

JassimAlRahma-9056 avatar image
0 Votes"
JassimAlRahma-9056 asked WenyanZhang-MSFT commented

Different Color and Title for every ContentPage in the CarouselPage

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>


dotnet-xamarin
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Removed the dotnet-maui tag since your code snippet is Xamarin and not MAUI. Please use only relevant tags for your question.

0 Votes 0 ·

May I know if you have got any chance to check my answer? I am glad to help if you have any other questions.

0 Votes 0 ·

1 Answer

WenyanZhang-MSFT avatar image
0 Votes"
WenyanZhang-MSFT answered WenyanZhang-MSFT commented

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://docs.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.


· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @JassimAlRahma-9056 , I have updated the answer, you could check it. The title and color can be changed on both CarouselPage and CarouselView.

0 Votes 0 ·