Flyouitems - Not refreshing the DataTemplate page when different FlyouttItem item selected

Question

I am a newbie to using XAML and C#. I am testing the <FlyouItem Shell option based on Flyout example:

<FlyoutItem Title="Africa" ClassId="1">  
    <ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />  
</FlyoutItem>  

<FlyoutItem Title="Asia"  ClassId="2">  
    <ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />  
</FlyoutItem>  

<FlyoutItem Title="Europe" ClassId="3">  
    <ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />  
</FlyoutItem>  

I want to use the same Route and DataTemplate to display different data and to avoid the use of multiple code/pages in MVVM model.

The issue I have, is that only the countries of the initial Flyout selection (Continent) are displayed, regardless of which Flyout item I select subsequently as per below:

However, if I reload the App and select a different Continent, the correct data is displayed as per below:

I am using MockDataStore.cs to select the countries as follows:

namespace Countries.Services  
{  
public class MockDataStore : IDataStore<Item>  
{  
    readonly List<Item> items;  

    public MockDataStore()  
    {  

        GlobalVars.CurrItem = AppShell.Current.CurrentItem.ClassId;  
        GlobalVars.AllowItemSelect = false;  


        switch (GlobalVars.CurrItem)  
        {  
            case "1":  
                GlobalVars.AllowItemSelect = false;  
                GlobalVars.HeaderTitle = "Africa";  

                items = new List<Item>()  
                 {  
                    new Item { Id = Guid.NewGuid().ToString(), Text = "Algeria" },  
                    new Item { Id = Guid.NewGuid().ToString(), Text = "Angola" },  
                    new Item { Id = Guid.NewGuid().ToString(), Text = "Botswana" }  
                };  
                break;  

            case "2":  
                GlobalVars.AllowItemSelect = true;  
                GlobalVars.HeaderTitle = "Asia";  

                items = new List<Item>()  
                 {  
                    new Item { Id = Guid.NewGuid().ToString(), Text = "Afghanistan" },  
                    new Item { Id = Guid.NewGuid().ToString(), Text = "Armenia" },  
                    new Item { Id = Guid.NewGuid().ToString(), Text = "Azerbaijan" },  
                    new Item { Id = Guid.NewGuid().ToString(), Text = "Bahrain" },  
                    new Item { Id = Guid.NewGuid().ToString(), Text = "Bangladesh" },  
                    new Item { Id = Guid.NewGuid().ToString(), Text = "Bhutan" },  


                };  
                break;  

Is it possible to be able to get the correct data displayed based on which <Flyouitem I have selected. I want to avoid using different Route/ContentTemplate for this particular solution, to avoid too much duplication.

I hope the above makes sense.

Can anyone please let me know how to overcome this issue.

Thanks

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

You can use OnAppearing method to achieve it, No need to use MockDataStore.cs.

For example, you use ItemsPage, you can override the OnAppearing method. Based on the value of AppShell.Current.CurrentItem.ClassId to change the listview's itemsource.

   public partial class ItemsPage : ContentPage  
       {  
             
           ObservableCollection<Item> items = new ObservableCollection<Item>();  
           public ObservableCollection<Item> Employees { get { return items; } }  
           public ItemsPage()  
           {  
               InitializeComponent();  
     
               items = new ObservableCollection<Item>()  
                       {  
                        new Item { Id = Guid.NewGuid().ToString(), Text = "Algeria" },  
                        new Item { Id = Guid.NewGuid().ToString(), Text = "Angola" },  
                        new Item { Id = Guid.NewGuid().ToString(), Text = "Botswana" }  
                    };  
               BindingContext =this;  
       
           }  
     
           protected override void OnAppearing()  
           {  
               base.OnAppearing();  
     
     
               switch (AppShell.Current.CurrentItem.ClassId)  
               {  
                   case "1":  
                       items.Clear();    
                       items.Add(new Item { Id = Guid.NewGuid().ToString(), Text = "Algeria" });  
                       items.Add(new Item { Id = Guid.NewGuid().ToString(), Text = "Angola" });  
                       items.Add(new Item { Id = Guid.NewGuid().ToString(), Text = "Botswana" });                                                
                       break;  
                   case "2":  
                       items.Clear();  
     
                       items.Add(new Item { Id = Guid.NewGuid().ToString(), Text = "Afghanistan" });  
                       items.Add(new Item { Id = Guid.NewGuid().ToString(), Text = "Armenia" });  
                       items.Add(new Item { Id = Guid.NewGuid().ToString(), Text = "Azerbaijan" });  
                       items.Add(new Item { Id = Guid.NewGuid().ToString(), Text = "Bahrain" });  
                       items.Add(new Item { Id = Guid.NewGuid().ToString(), Text = "Bangladesh" });  
                       items.Add(new Item { Id = Guid.NewGuid().ToString(), Text = "Bhutan" });                
                       break;  
               }  
           }  
     
       }  
         
   }  

Here is layout code.

   <ListView ItemsSource="{Binding Employees}">  
           <ListView.ItemTemplate>  
               <DataTemplate>  
                   <ViewCell>  
                       <StackLayout>  
                           <Label Text="{Binding Text}"></Label>  
                       </StackLayout>  
                   </ViewCell>  
               </DataTemplate>  
           </ListView.ItemTemplate>  
       </ListView>  

Best Regards,

Leon Lu

---

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.