简体   繁体   中英

xamarin forms master detail. how to highlight different menu title, when icon toolbaritem is clicked

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

在此处输入图像描述

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];

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:

在此处输入图像描述

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM