Communicate between TabbedPages in Xamarin

Question

I have a question. I created a TabbedPage with 2 childs. In child1 I want to show the selected images. In child2 I have a Grid with a few images. Now I want to make the images in child2 selectable and when they get clicked, I want them to be inserted in the StackLayout in child1. I have no clue how to start, so can someone give me an example?

Here is the xaml from child1:

<ContentPage.Content>
    <StackLayout BackgroundColor="White" x:Name="MainLayout" VerticalOptions="Center">

    </StackLayout>
</ContentPage.Content>

Here is the Grid from child2

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="10" />
        <RowDefinition Height="100" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="10" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="10" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="10" />
    </Grid.ColumnDefinitions>

    <Image Grid.Row="1" Grid.Column="1" Source="Good_Question.png" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
    <Image Grid.Row="1" Grid.Column="3" Source="Excuse_Me.png" />

</Grid>

Can someone give me an example of how I can add an Image that is selected in a different tab to another tab in a TabbedPage?

bhavya joshi bhavya joshi · Accepted Answer · 2019-11-24T07:50:06

There are multiple ways to do so:

1 way(Simple):

Create a public static ObservableCollection<Image> imageCollection= new ObservableCollection<Image>(); on main page.

Then On Page2 : Add the selected images inside imageCollection .

On Page1: Add imageCollection.CollectionChanged += AddImageInsdeFirstPageLayout();. CollectionChanged is call whenever any element is added/removed inside ObservableCollection.

2nd way(Work throuh MVVM logic & Preferred way):

Create a common ViewModel for all three pages(main Page & tabbed Pages). Create a property inside it,namely,

public ObservableCollection<Image> _selectedImages { get; set; }
    public ObservableCollection<Image> SelectedImages
    {
        get { return _selectedImages; }
        set
        {
            _selectedImages = value;
            OnPropertyChanged();
        }
    }

Add new elements inside this property from Page2 and access this property from Page1. Make sure, you raise OnPropertyChanged

3rd way(i don't like this): Use MessagingCenter. It's pretty simple to use.Go through this,if you want to dig more: Xamarin.Forms MessageCnter

Communicate between TabbedPages in Xamarin

3 Answers