xamarin - 如何在 Xamarin 主菜单中的项目之间绘制水平线？

Question

如何在 Xamarin Forms MenuItems 中按行分隔两个项目，如下图:



我的意思是，在相同的菜单项中，我想在两组项目之间绘制一条水平线(不是在每个项目和另一个项目之间，这是由 SeparatorVisibility="Default" 完成的)。

这是cs代码:

using System;
using Xamarin.Forms;
namespace GMG
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MasterDetailPage1Master : ContentPage
    {
        public ListView ListView;
        public MasterDetailPage1Master()
        {
            InitializeComponent();
            BindingContext = new MasterDetailPage1MasterViewModel();
            ListView = MenuItemsListView;
        }
        class MasterDetailPage1MasterViewModel : INotifyPropertyChanged
        {
            public ObservableCollection<MasterDetailPage1MenuItem> MenuItems { get; set; }
            public MasterDetailPage1MasterViewModel()
            {
                MenuItems = new ObservableCollection<MasterDetailPage1MenuItem>(new[]
                {
                    new MasterDetailPage1MenuItem { Id = 0, Title = "Hospitals", Icon="hosp.png", TargetType= typeof(Hospitals) },
                    new MasterDetailPage1MenuItem { Id = 1, Title = "Clinics", Icon="cli.png",TargetType= typeof(Clinics) },
                    new MasterDetailPage1MenuItem { Id = 2, Title = "Pharmacies", Icon="pha.png", TargetType= typeof(Pharma) },
                    new MasterDetailPage1MenuItem { Id = 3, Title = "Labs", Icon="lab2.png", TargetType= typeof(Labs) },
                    new MasterDetailPage1MenuItem { Id = 4, Title = "MainPage",  Icon="home.png", TargetType= typeof(MasterDetailPage1Detail) },
                    new MasterDetailPage1MenuItem { Id = 5, Title = "Call us",  Icon="cont.png" },
                    new MasterDetailPage1MenuItem { Id = 6, Title = "Rating App",  Icon="rate.png" },

                });
            }
            #region INotifyPropertyChanged Implementation
            public event PropertyChangedEventHandler PropertyChanged;
            void OnPropertyChanged([CallerMemberName] string propertyName = ""){
                if (PropertyChanged == null)
                    return;
                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
}}}}

这是 Xaml 代码:

<StackLayout>
        <StackLayout>
            <Label Text="GMG"/>
        </StackLayout>
        <ListView x:Name="MenuItemsListView"
                  RowHeight="55"
                  ItemsSource="{Binding MenuItems}">
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <StackLayout>
              <Label Text="{Binding Title}"/>
                <Image Source="{Binding Icon}"/>
            </StackLayout>             
          </ViewCell>         
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>      
  </StackLayout>
</ContentPage>

Answer 1

您的 XAML 代码将是这样的

<StackLayout>
    <StackLayout>
        <Label Text="GMG"/>
    </StackLayout>
    <ListView x:Name="MenuItemsListView"
              RowHeight="55"
              ItemsSource="{Binding MenuItems}">
  <ListView.ItemTemplate>
    <DataTemplate>
      <ViewCell>
<StackLayout Orientation="Vertical">
        <StackLayout Orientation="Horizontal">
          <Label Text="{Binding Title}"/>
            <Image Source="{Binding Icon}"/>
        </StackLayout>
<BoxView HeightRequest="1" Color="#00000" IsVisible="{Binding IsSeparatorVisible}"/>
</StackLayout>              
      </ViewCell>         
    </DataTemplate>
  </ListView.ItemTemplate>
 </ListView>      
</StackLayout>

在你的代码中它应该是 set the IsSeparatorVisible to true/false for showing/hiding the line

    new MasterDetailPage1MenuItem { Id = 0, Title = "Hospitals", Icon="hosp.png",IsSeparatorVisible = true, TargetType= typeof(Hospitals) },
                new MasterDetailPage1MenuItem { Id = 1, Title = "Clinics", Icon="cli.png",IsSeparatorVisible = false,TargetType= typeof(Clinics) },