Xamarin.Forms：多子用户配置文件页面

Question

我正在尝试为我的应用创建一个个人资料页面，其中包含有关许多子用户的信息。

https://imgur.com/gallery/8gtoi9H“设计”

正如您在 imgur 链接中看到的那样，它应该有不同的图像、绑定的详细信息和一个用于转到该特定用户的另一个详细信息页面的按钮。

在顶部添加或编辑当前用户。 并在侧面的 next 上一个按钮在 subUsers 之间切换。

我不确定应该使用哪种布局。我想使用 stackLayout 但它不包含 ItemSource 属性来设置绑定。

我也担心按钮的用户 ID，不确定我是否应该使用某种BidingParameter

这是到目前为止我的观点的代码。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="App.ProfilePage"
             xmlns:converters="clr-namespace:App.Converters"
             Title="Profile">

    <ContentPage.Resources>
        <ResourceDictionary>
            <converters:DateTimeToStringConverter x:Key="converter"/>
        </ResourceDictionary>
    </ContentPage.Resources>
    <!--<ContentPage.ToolbarItems>
        <ToolbarItem Text="Edit" 
                     x:Name="New" 
                     Command="{Binding NewCommand}"
                     CommandParameter="{Binding }"
                     >
        </ToolbarItem>
        <ToolbarItem Text="Save" 
                     x:Name="Save" 
                     Command="{Binding EditCommand}"
                     CommandParameter="{Binding}"
                    ></ToolbarItem>
    </ContentPage.ToolbarItems>-->
    <ContentPage.Content>
        <StackLayout   Orientation="Vertical" HorizontalOptions="CenterAndExpand">
            <Label Text="Profile"></Label>
            <StackLayout   Orientation="Vertical" HorizontalOptions="CenterAndExpand" HeightRequest="250" >
                <Image Source="{Binding ImgUrl}" HeightRequest="200" WidthRequest="200"/>
                <Label   Text="{Binding Name}" TextColor="Black" FontSize="20"></Label>
            </StackLayout>
            <StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand" Margin="0,12,0,0">
                <Label Text="Detail1: "></Label>
                <Label Text="{Binding Detail1}"></Label>
            </StackLayout>
            <StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand" Margin="0,5,0,0">
                <Label Text="Detail2: "></Label>
                <Label Text="{Binding Detail2}"></Label>
            </StackLayout>
            <StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand" Margin="0,5,0,0">
                <Label Text="Detail3: "></Label>
                <Label Text="{Binding Detail3, Converter={StaticResource converter}}"></Label>
            </StackLayout>

            <StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand" Margin="0,5,0,0">
                <Label Text="Detail4: "></Label>
                <Label Text="{Binding Detail4}"></Label>
            </StackLayout>

            <StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand" Margin="0,5,0,0">
                <Label Text="Detail5: "></Label>
                <Label Text="{Binding Detail5}"></Label>
            </StackLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

我的 viewModel 将加载一个子用户列表

 public void UpdateSubUsers()
     {
        List<Subuser> Subusers= new List<Subuser>();
        LoadSubuser(Subusers);
        if (SubuserList != null)
        {
            SubuserList.Clear();
            foreach (var subin Subuser)
            {
                SubuserList.Add(sub);
            }
        }
     }

逻辑 xaml.cs：

 public partial class ProfilePage : ContentPage
     {
        public ProfilePageVM viewModel;
        public ProfilePage()
        {
            InitializeComponent();
            viewModel = new ProfilePageVM();
            BindingContext = viewModel;
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();
            viewModel.UpdateDogs();
         }
        }

目前，我已将列表设置为仅返回一项，但无法在屏幕中显示它。 另外，我不确定如何在“个人资料”选项卡中管理子用户的分页。 （参考图片）。

https://imgur.com/gallery/8gtoi9H“设计”

提前问好。

Answer 1

我已经更新了我的回复。您可以从 GitHub 下载 MultipleSubuser 文件夹中的源文件。

https://github.com/WendyZang/Test.git

ProfilerListPage.xaml

这是显示所有用户列表的邮件页面。

ProfilerListPage.xaml.cs

它用于绑定列表，当项目被选中时，它会导航到分析器页面并将选定的项目数据传递到分析器页面。

 private void LstView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        var item = e.SelectedItem as ProfilerViewModel;
        var index = e.SelectedItemIndex;
        Navigation.PushAsync(new ProfilePage(index));
    }

ProfilePage.xaml

这是分析器页面，当您在 ProfilerListPage 中选择项目时，该页面将显示所选用户的所有详细信息。

   <ImageButton x:Name="btnBack" Margin="0,0,60,0" BackgroundColor="White"  Clicked="BtnBack_Clicked" Source="Back.png" WidthRequest="40"  HeightRequest="40" ></ImageButton>
   <ImageButton x:Name="btnNext" Margin="60,0,0,0" Clicked="BtnNext_Clicked" Source="Next.png" WidthRequest="40" BackgroundColor="White" HeightRequest="40" ></ImageButton>

ProfilerPage.xaml.cs

我使用两个按钮（tbnBack，btnNext）来加载上一个或下一个项目。

结果：