如何在Xamarin表单中使用不可点击的标题创建列表视图 [英] How to create a list view with non-clickable header in xamarin forms

问题描述

我需要使用xamarin形式的列表视图创建带有描述的标头.

I need to create a header with the description using a list-view in xamarin forms.

我需要在列表视图中为标题和详细信息使用单独的样式.

I need to use the separate styles for header and details in the list view.

我正在尝试以下代码，

<ListView RowHeight="74" ItemsSource="{Binding UserEmailList}" IsGroupingEnabled="true">
    <ListView.GroupHeaderTemplate>
      <DataTemplate>
        <ViewCell>
          <StackLayout Orientation="Vertical">
          <BoxView Style="{StaticResource separator}"></BoxView>
          <Label Text="{Binding Heading}" Style="{StaticResource labelHeaderTitle}"/>
          <BoxView Style="{StaticResource separator}"></BoxView>
          </StackLayout>
        </ViewCell>
      </DataTemplate>
    </ListView.GroupHeaderTemplate>
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
            <StackLayout Orientation="Horizontal">
              <Label Text="{Binding EmailAddress}" Style="{StaticResource labelListItem}">
              </Label>
              <Image HeightRequest="16" HorizontalOptions="End" VerticalOptions="Center" Source="arrow.png" Margin="0,0,15,0"></Image>
            </StackLayout>
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>

但是，当我使用代码时，列表视图总是显示为空.

But, when i use the tag, the list view always comes up empty.

请让我知道如何使用xamarin形式的XAML来创建它.

Please let me know how to create this using XAML in xamarin forms.

public class EmailItemViewModel
{
    public string Heading { get; set; }
    public bool HasEmailAddress { get; set; }
    public string EmailAddress { get; set; }
}

public class ProfileEmailAddressViewModel : ProfileDetailsViewModel
{
    public ProfileEmailAddressViewModel()
    {
        Title = "Email addresses";
        LoadUserEmailList();
    }

    private List<EmailItemViewModel> userEmailList;

    public List<EmailItemViewModel> UserEmailList {
        get { return userEmailList; }
        set
        {
            if(value != null)
            {
                userEmailList = value;
            }
        }
    }

    private void LoadUserEmailList()
    {
        UserEmailList = new List<EmailItemViewModel>();
        foreach (var package in Employee.Packages)
        {
            EmailItemViewModel emailItemViewModel = new EmailItemViewModel();
            emailItemViewModel.Heading = package.Employer.Name.ToUpper();
            emailItemViewModel.EmailAddress = package.WorkEmailAddress;
            emailItemViewModel.HasEmailAddress = HasEmailAddress(package.WorkEmailAddress);

            UserEmailList.Add(emailItemViewModel);
        }

        EmailItemViewModel personalEmail = new EmailItemViewModel();
        personalEmail.Heading = "PERSONAL EMAIL";
        personalEmail.EmailAddress = Employee.HomeEmailAddress;
        personalEmail.HasEmailAddress = HasEmailAddress(Employee.HomeEmailAddress);

        UserEmailList.Add(personalEmail);
    }
}

推荐答案

        Try Listview.Header 
        like this 

    <ListView RowHeight="74" ItemsSource="{Binding UserEmailList}" IsGroupingEnabled="true">
        <ListView.Header>     
              <BoxView Style="{StaticResource separator}"></BoxView>
              <Label Text="{Binding Heading}" Style="{StaticResource labelHeaderTitle}"/>
              <BoxView Style="{StaticResource separator}"></BoxView>

        </ListView.Header>
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
<ViewCell.View>
                <StackLayout Orientation="Horizontal">
                  <Label Text="{Binding EmailAddress}" Style="{StaticResource labelListItem}">
                  </Label>
                  <Image HeightRequest="16" HorizontalOptions="End" VerticalOptions="Center" Source="arrow.png" Margin="0,0,15,0"></Image>
                </StackLayout>
</ViewCell.View>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>

这篇关于如何在Xamarin表单中使用不可点击的标题创建列表视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！