Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Xamarin Forms: Carousel child pages not firing Disappearing event?

SreeeeSreeee INMember ✭✭✭✭✭

I have a Carousel page having 9 children and I have implemented a tracking feature on some of the child pages. The tracking feature is for video, audio and content. If a user plays a video, audio, or read content and then the user moves to the next child or going back to the previous page at that time I will track the spent time.

I have added the tracking service on the OnDisappearing() of child pages. So when a user leaves a page the tracking service starts triggering and it is working fine on the android platform. When I test it on the ios platform, the OnDisappearing() is not firing.

Is it a known issue? How can I fix this issue?

Best Answer

  • SreeeeSreeee INMember ✭✭✭✭✭
    edited September 10 Accepted Answer

    @Jarvan Fixed this issue using the CurrentPageChanged feature.

    CarouselPage XAML

    CurrentPageChanged="CarouselPage_CurrentPageChanged"
    

    CarouselPage.xaml.cs

        int LastIndex = 0;
        ......
        ......
    private void CarouselPage_CurrentPageChanged(object sender, EventArgs e)
        {
            var index = this.Children.IndexOf(this.CurrentPage);
            string title = this.Children[LastIndex].Title;
            Debug.WriteLine("title:>>" + title);
            if (!string.IsNullOrEmpty(title) && LastIndex != index)
            {
                MessagingCenter.Send<MainPage>(this, title);
            }
            if (index > -1)
            {
                LastIndex = index;
            }
        }
    

    Add a title for child pages

    Title="page1"
    

    Child page xaml.cs

    MessagingCenter.Subscribe<MainPage>(this, "page1", (sender) =>
    {
        Debug.WriteLine("page1 Subscribe");
    });
    

    In my case, my number of children varies based on some condition. That's why I have used the title property.

    The onappearing of the new page is also not triggered when clicking the collectionview item. We can solve the same using another messaging center.

    CarouselPage.xaml.cs inside CarouselPage_CurrentPageChanged

    string newTitle = this.Children[index].Title;
    if (!string.IsNullOrEmpty(newTitle))
    {
        MessagingCenter.Send<LessonCarouselPage>(this, "onappearing "+newTitle);
    }
    

    On the child page:

    MessagingCenter.Subscribe<LessonCarouselPage>(this, "onappearing page1", (sender) =>
    {
        //do stuff here
    });
    

    Attaching a sample project with this comment.

Answers

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited September 8

    When I test it on the ios platform, the OnDisappearing() is not firing.

    I created a basic demo to test the function, it works fine on both Android and iOS. The OnDisappearing method is called when switching to another child page.

    <CarouselPage ...>
        <local:Page1 Title="Page_1"/>
        <local:Page2 Title="Page_2"/>
        <local:Page3 Title="Page_3"/>
    </CarouselPage>
    

    Page1.xaml.cs

    public partial class Page1 : ContentPage
    {
        public Page1()
        {
            InitializeComponent();
        }
    
        protected override void OnDisappearing()
        {
            base.OnDisappearing();
            DisplayAlert("Title", "Page1's OnDisappearing is called", "Cancel");
        }
    }
    

    Here is the demo file, you could refer to it.

  • SreeeeSreeee INMember ✭✭✭✭✭

    @Jarvan I will share you a sample ASAP

  • SreeeeSreeee INMember ✭✭✭✭✭

    @Jarvan Could you please add a collection view on all the pages at the top?

    Collectionview has 3 items: page1,page2,page3. Based on the collectionview selection show the selected page on UI. If we click on the page3 on the collectionview, it will show the page 3.

    Could you please check the ondisappearing is working in that case?

    I try to create a sample, but it has some issues :)

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited September 9

    @Sreeee said:
    @Jarvan Could you please add a collection view on all the pages at the top?

    Collectionview has 3 items: page1,page2,page3. Based on the collectionview selection show the selected page on UI. If we click on the page3 on the collectionview, it will show the page 3.

    Could you please check the ondisappearing is working in that case?

    I try to create a sample, but it has some issues :)

    Try to swtich the child page using the following code:

    private void CollectionView_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var item = e.CurrentSelection.FirstOrDefault() as CustomModel;
    
        var index = viewModel.DataCollection.IndexOf(item);
    
        var page = Application.Current.MainPage as CarouselPage;
        page.CurrentPage = page.Children[index];
    }
    

    You could also try to detect the CurrentPageChanged event to achieve the function. Check the link.

  • SreeeeSreeee INMember ✭✭✭✭✭

    @Jarvan The sample you have provided is not able to run on my machine :'(

    I have created a sample, could you please check that? If I move the pages by scrolling it will trigger the ondisappearing(). If I click the collectioview item, the ondisappearing() is not firing.

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited September 9

    @Sreeee said:
    @Jarvan The sample you have provided is not able to run on my machine :'(

    I have created a sample, could you please check that? If I move the pages by scrolling it will trigger the ondisappearing(). If I click the collectioview item, the ondisappearing() is not firing.

    I tested the sample from the link and face the same issue. The OnDisAppearing method will not be called when tapping the collectionView to perform the navigation. This is not due to the CollectionView control. After test, it turns out that changing the current page of CarouselPage programatically will not trigger the OnDisAppearing method. You could use the button click event to check that.

    This may be a potential issue with ios, you could report it to the product team for professional help on github.

    private void Button_Clicked(object sender, EventArgs e)
    {
        var page = Application.Current.MainPage as CarouselPage;
        var currentIndex = page.Children.IndexOf(page.CurrentPage);
    
        if (currentIndex < page.Children.Count)
        {
            page.CurrentPage = page.Children[currentIndex + 1];
        }
    }
    
  • SreeeeSreeee INMember ✭✭✭✭✭

    @Jarvan Thanks for the info, I will report this issue to Github

    I didn't get the button click event part, Where you are suggesting to add button?

  • JarvanJarvan Member, Xamarin Team Xamurai

    @Sreeee said:
    @Jarvan Thanks for the info, I will report this issue to Github

    I didn't get the button click event part, Where you are suggesting to add button?

    Add the button to the child page (Page1).

    <StackLayout>
        <!--<CollectionView ...>
            ...
        </CollectionView>-->
    
        <Button Text="Switch to next page" Clicked="Button_Clicked"/>
    
        <Label Text="Page_1" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
    </StackLayout>
    
  • SreeeeSreeee INMember ✭✭✭✭✭
    edited September 10 Accepted Answer

    @Jarvan Fixed this issue using the CurrentPageChanged feature.

    CarouselPage XAML

    CurrentPageChanged="CarouselPage_CurrentPageChanged"
    

    CarouselPage.xaml.cs

        int LastIndex = 0;
        ......
        ......
    private void CarouselPage_CurrentPageChanged(object sender, EventArgs e)
        {
            var index = this.Children.IndexOf(this.CurrentPage);
            string title = this.Children[LastIndex].Title;
            Debug.WriteLine("title:>>" + title);
            if (!string.IsNullOrEmpty(title) && LastIndex != index)
            {
                MessagingCenter.Send<MainPage>(this, title);
            }
            if (index > -1)
            {
                LastIndex = index;
            }
        }
    

    Add a title for child pages

    Title="page1"
    

    Child page xaml.cs

    MessagingCenter.Subscribe<MainPage>(this, "page1", (sender) =>
    {
        Debug.WriteLine("page1 Subscribe");
    });
    

    In my case, my number of children varies based on some condition. That's why I have used the title property.

    The onappearing of the new page is also not triggered when clicking the collectionview item. We can solve the same using another messaging center.

    CarouselPage.xaml.cs inside CarouselPage_CurrentPageChanged

    string newTitle = this.Children[index].Title;
    if (!string.IsNullOrEmpty(newTitle))
    {
        MessagingCenter.Send<LessonCarouselPage>(this, "onappearing "+newTitle);
    }
    

    On the child page:

    MessagingCenter.Subscribe<LessonCarouselPage>(this, "onappearing page1", (sender) =>
    {
        //do stuff here
    });
    

    Attaching a sample project with this comment.

  • SreeeeSreeee INMember ✭✭✭✭✭

    @Jarvan

    I have opened a new ticket on Github for this issue.

  • JarvanJarvan Member, Xamarin Team Xamurai

    Thanks for sharing the topic link.

Sign In or Register to comment.