Xamarin.Forms：多个子用户个人资料页面

Question

我正在尝试为我的应用程序创建一个配置文件页面，其中包含有关 manny Subusers 的信息。

https://imgur.com/gallery/8gtoi9H "Desing"

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

在顶部添加或编辑当前用户。旁边的下一个上一个按钮可在子用户之间切换。

我不确定应该使用哪种布局。我想使用 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();
         }
        }

目前，我已将我的列表设置为 return 只有一项，但我无法在屏幕上显示它。此外，我不确定如何在“配置文件”选项卡中管理子用户的分页。（参考图片）。

https://imgur.com/gallery/8gtoi9H "Desing"

提前致谢。

Answer 1

我已经更新了我的回复。您可以从 GitHub.

下载 MultipleSubuser 文件夹中的源文件

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

ProfilerListPage.xaml

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

ProfilerListPage.xaml.cs

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

 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

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

   <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）来加载上一个或下一个项目。

结果：

Xamarin.Forms：多个子用户个人资料页面

Xamarin.Forms: Multiple Subuser Profile page

forms

profile

mobile

layout

xamarin