0
votes

I have started a new project in cross platform xamarin forms, I have chosen 'master-detail' as the template. So as you can see the template on the MainPage.xaml uses 'MenuPage' for the menu on the left of the screen and 'product' for the main content.

   <MasterDetailPage.Master>
    <views:MenuPage />
</MasterDetailPage.Master>

<MasterDetailPage.Detail>
    <NavigationPage>
        <NavigationPage.Icon>
            <OnPlatform x:TypeArguments="FileImageSource">
                <On Platform="iOS" Value="tab_feed.png"/>
            </OnPlatform>
        </NavigationPage.Icon>
        <x:Arguments>
            <views:Product />
        </x:Arguments>
    </NavigationPage>
</MasterDetailPage.Detail>

navigation using the menu options on the left all works as planned. However I have added a shopping cart image to the toolbarItems on the Product Page.

 <ContentPage.ToolbarItems>
    <ToolbarItem Name="ImageShoppingCart" Icon="shoppingcart.png" Priority="0" Order="Primary" Activated="ShoppingCartIs_Clicked"/>
    </ContentPage.ToolbarItems>

So from the Product Page, is it possible to mimic clicking 'shopping' which is on the listview in the MenuPage

<StackLayout VerticalOptions="FillAndExpand">
    <ListView x:Name="ListViewMenu" HasUnevenRows="True">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Label Text="{Binding Title}" FontSize="20" Grid.Column="1"  Grid.Row="0"/>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

I ask this because I have tried a work around on the product.cs page To call ShoppingCartIs_Clicked when the cart is clicked with:

   private async void ShoppingCartIs_Clicked(object sender, EventArgs e)
        {
            await RootPage.NavigateFromMenu(1);//1 being the id of shopping cart, which is then used to create a new Navigation page(shopping cart) and set master 'Detail' to this page
        }

So. This works and the shopping cart page is displayed. however when you click on the menu on the left. the original 'product' which is the first option on the menu is still highlighted. So how can I highlight the shopping cart title on the menu? Do I somehow make the listview global on the menupage and call it on the products page?

 ListViewMenu.SelectedItem = menuItems[1];

This is probably over kill but I have set a global var, 'newPage' and if it is set in the Menupage, then set the selectedItem

 private async void ShoppingCartIs_Clicked(object sender, EventArgs e)
    {

        App.NewPageToLoad = "Shopping";
        MenuPage tempMenu = new MenuPage();
        await RootPage.NavigateFromMenu(1);
    }

//then in menyuPage

if (App.NewPageToLoad != null)
        {
            if (App.NewPageToLoad.Contains("Shopping"))
            {

                ListViewMenu.SelectedItem = menuItems[1];
            }
        }

this does not highlight the 'shopping' icon on the menu list.

is there an easier way to do this? Thanks

enter image description here

UPDATE Thanks @Junior for the help but unfortunately we arnt there yet. I have tried what you suggested and hasnt worked.

So I have tried using ListViewMenu.SelectedItem = menuItems[1];' for a test to manually set the 'shopping' as selected when the app initally loads and this works...However is I try to re assign it as you have suggested on the Flayout(MenuPage) but it hasnt updated on the app.

Also worth noting as a test when reloading the MenuPage I changed the ListView to be populated with a new list 'menuItems2' where I changed the titles to include a '2', however when the app loaded it showed the previous list. So it appears the ListView isnt being properly populated on the load of the new MenuPage? This would explain why ListViewMenu.SelectedItem = menuItems[3]; doesnt highlight a different title on the menu? although the code is hitting so unsure why it isnt working. also thought I may need to reset the Master page, which would reload it from fresh, this didnt work either thank you for your help so far

menuItems2 = new List<HomeMenuItem>
            {
                new HomeMenuItem {Id = MenuItemType.Products, Title="Products 2", Icon =  "back_nav.png", Name = "test" },
                new HomeMenuItem {Id = MenuItemType.Shopping, Title="Shopping Cart 2", Icon =  "back_nav.png"},
                new HomeMenuItem {Id = MenuItemType.Browse, Title="Browse 2", Icon =  "back_nav.png"},
                new HomeMenuItem {Id = MenuItemType.About, Title="About 2", Icon =  "back_nav.png"},
            };

                    ListViewMenu.ItemsSource = menuItems2;  
ListViewMenu.SelectedItem = menuItems[3];
1
Hi @John , you mean one page want to highlight another flyout item ? I think this is a strange logic . The flyout item is designed to show which page be selected .Junior Jiang
yes so when I click the shopping cart image (top right of first image), it loads the shopping cart page, then if i open the menu, 'shopping cart' is not highlighted from the flyout item (picture on the right). 'products' is highlighted,which is the last chosen from the menu. How can I highlight the 'shopping cart' on the main menu, when the image is clicked?John

1 Answers

0
votes

Okey , you can use MessagingCenter to send needed flyout item to Flayout page.

Send Message in Products page:

MessagingCenter.Send<object,int>(this, "Hi", (int)MenuItemType.About);

Receive Message in Flayout Page :

MessagingCenter.Subscribe<object,int>(this, "Hi", (senders,arg) =>
{
    ListViewMenu.SelectedItem = menuItems[arg];
});

In addition , only using this can navigate page from Products to Shopping Cart .

The above sample code based on this sample project .

The effect :

enter image description here