Forum Xamarin.Forms

Is it possible to put a toolbar item in contentview?

philipzhengphilipzheng Member ✭✭
edited April 21 in Xamarin.Forms
<ContentPage.ToolbarItems>
    <ToolbarItem Order="Secondary"
                 Text="Share"
                 Command="{Binding ShareCommand}"
                 Priority="0"/>
</ContentPage.ToolbarItems>

Is it possible to do something like the above except with a ContentView? Or could someone please point out how to do something equivalent? So that one can make a list of views that will each have its own contextual menu (with the 3 dots button).

I noticed someone had asked this at the bottom of another thread but thought it may have been overlooked.

Best Answer

  • JarvanJarvan Xamurai
    Accepted Answer

    Sorry for the mistake,ToolbarItems can only be use in a page. To display the context menu, try to use MenuItem. It supports to define menu items for ListView and Shell.

    <ListView>
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.ContextActions>
                        <MenuItem Text="Context Menu Option" />
                    </ViewCell.ContextActions>
                    <Label Text="{Binding .}" />
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    

    CollectionView provides SwipeView to create the context menus.

    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <SwipeView HeightRequest="50" LeftItems="{StaticResource swipItems}">
                    <SwipeView.LeftItems>
                        <SwipeItem Text="Favorite"
                            IconImageSource="favorite.png"
                            BackgroundColor="LightGreen" 
                            Invoked="SwipeItem_Invoked"/>
                        <SwipeItem Text="Delete"
                            IconImageSource="delete.png"
                            BackgroundColor="LightPink"
                             Invoked="SwipeItem_Invoked"/>
                    </SwipeView.LeftItems>
                    <Label Text="{Binding Content}"/>
                    ...
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
    

Answers

  • JarvanJarvan Member, Xamarin Team Xamurai

    so that I can make a list of views that will each have its own contextual menu (with the 3 dots button)

    Do you want to add the following styles on ToolbarItems?

    If so, set the Order property of ToolbarItem to Secondary. This option will place the toolbar item on the secondary toolbar surface.

    <ContentPage.ToolbarItems>
        <ToolbarItem Text="item_1" Order="Secondary" .../>
        <ToolbarItem Text="item_2" Order="Secondary" .../>
        <ToolbarItem Text="item_3" Order="Secondary" .../>
    </ContentPage.ToolbarItems>
    

    Check the tutorial:
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/toolbaritem#primary-and-secondary-menus

  • philipzhengphilipzheng Member ✭✭

    Thanks, but I already know how to put a ToolBarItem in a ContentPage. I was wondering, though, if it's possible to have a ToolBarItem in a ContentView, so that I can put it in a DataTemplate.

  • JarvanJarvan Member, Xamarin Team Xamurai

    We cannot add layout in ToolbarItems. Try to use NavigationPage.TitleView which supports to customize the layout and views.

    <NavigationPage.TitleView>
        <StackLayout>
            ...
        </StackLayout>
    </NavigationPage.TitleView>
    

    Tutorial:
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical#displaying-views-in-the-navigation-bar

  • philipzhengphilipzheng Member ✭✭

    @Jarvan said:
    We cannot add layout in ToolbarItems. Try to use NavigationPage.TitleView which supports to customize the layout and views.

    @Jarvan, thanks for trying to answer my question; I'm afraid I wasn't clear enough so that you misunderstood my question. I was trying to ask,
    How can I do something like this:

            <CollectionView ItemsSource="{Binding Items}">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                <ContentView>
                    <ContentView.ToolbarItems>
                        <ToolbarItem Order="Secondary"
                                     Text="Press Me"
                                    Command="{Binding Command}"/>
                    </ContentView.ToolbarItems>
                      ....
                      ....
                    </ContentView>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
    

    The problem is that ContentView does not have a ToolbarItems property.

  • JarvanJarvan Member, Xamarin Team Xamurai
    Accepted Answer

    Sorry for the mistake,ToolbarItems can only be use in a page. To display the context menu, try to use MenuItem. It supports to define menu items for ListView and Shell.

    <ListView>
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.ContextActions>
                        <MenuItem Text="Context Menu Option" />
                    </ViewCell.ContextActions>
                    <Label Text="{Binding .}" />
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    

    CollectionView provides SwipeView to create the context menus.

    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <SwipeView HeightRequest="50" LeftItems="{StaticResource swipItems}">
                    <SwipeView.LeftItems>
                        <SwipeItem Text="Favorite"
                            IconImageSource="favorite.png"
                            BackgroundColor="LightGreen" 
                            Invoked="SwipeItem_Invoked"/>
                        <SwipeItem Text="Delete"
                            IconImageSource="delete.png"
                            BackgroundColor="LightPink"
                             Invoked="SwipeItem_Invoked"/>
                    </SwipeView.LeftItems>
                    <Label Text="{Binding Content}"/>
                    ...
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
    
  • philipzhengphilipzheng Member ✭✭

    Thank you for your answer @Jarvan . I see now that it would have been better for me to use a ViewCell instead of a ContentView in the datatemplate, as I would have had access to to ContextActions and better performance.

Sign In or Register to comment.