Share via

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

Riffy 276 Reputation points
Dec 29, 2021, 8:37 PM

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:

161195-image.png

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

161273-image.png

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

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,362 questions
0 comments No comments
{count} votes

Accepted answer
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 77,016 Reputation points Microsoft Vendor
    Dec 30, 2021, 3:03 AM

    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.


0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.