xaml - 如何在 Listview Xamarin 表单中绑定嵌套列表对象数据

Question

我有一个嵌套的列表对象，我想将它们绑定到列表中我的所有数据都是正确的，我也实现了 INotifyChanged 事件，但 UI 上的数据不显示

这是我的 Xaml UI

  <ListView x:Name ="lstView" Margin="0,5,0,5" VerticalScrollBarVisibility="Always" HasUnevenRows="True" VerticalOptions="FillAndExpand" ItemsSource="{Binding Grouped}" IsGroupingEnabled="true" SelectionMode="None" SeparatorVisibility="None"   GroupDisplayBinding="{Binding LongName}" GroupShortNameBinding="{Binding ShortName}">
            <ListView.GroupHeaderTemplate>
                <DataTemplate>          
                      <Grid Margin="5,20,0,0" RowSpacing="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="5*"/>
            <ColumnDefinition Width="95*"/>
        </Grid.ColumnDefinitions> 

        <Image Grid.Column="0" Source="radiochecked.png" VerticalOptions="End" />
        <Frame Grid.Column="1" HasShadow="False" HorizontalOptions="Start" Padding="6,2,6,2" BackgroundColor="#608EF6">
        <Label Text="{Binding LongName}" TextColor="White" VerticalTextAlignment="Center" ></Label>
        </Frame>
    </Grid> 
                </DataTemplate>
            </ListView.GroupHeaderTemplate>
            <ListView.ItemTemplate>
                <DataTemplate>

                     <Grid Margin="5,0,10,0" HorizontalOptions="FillAndExpand" RowSpacing="0" VerticalOptions="FillAndExpand" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="5*"/>
                <ColumnDefinition Width="95*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="10"/>
                <RowDefinition Height="70"/>
            </Grid.RowDefinitions>
            <BoxView           
                                Grid.Column="0" Grid.Row="0" 
                                BackgroundColor="#566781"
                                HorizontalOptions="Center"           
                                VerticalOptions="Fill"
                                WidthRequest="2" />


            <Image Grid.Column="0" Grid.Row="1"  Source="radiochecked.png" />



            <BoxView           
                                Grid.Column="0" Grid.Row="2"
                                BackgroundColor="#566781"
                                HorizontalOptions="Center"           
                                VerticalOptions="Fill"
                                WidthRequest="2" />


            <Frame Grid.Column="1" Grid.Row="0" HasShadow="False" Grid.RowSpan="3" Padding="0,0,2,0" Margin="0,10,0,5" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                <StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal" VerticalOptions="FillAndExpand">
                <BoxView BackgroundColor="{Binding EncounterFrameColor}" WidthRequest="3"></BoxView>

                    <Grid Margin="0,8,0,0" HorizontalOptions="FillAndExpand" VerticalOptions="Start">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="10"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="30"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <StackLayout Spacing="0" Grid.Column="0">
                        <Label Text="{Binding EncounterMonth}" Margin="3,1,0,0" FontSize="10" TextColor="Black" VerticalOptions="Start"  HorizontalOptions="Start"></Label>
                            <Label Text="{Binding MDate}" Margin="3,2,0,0" FontSize="15" TextColor="Black" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalOptions="Start" HorizontalOptions="Start"></Label>
                        </StackLayout>
                        <StackLayout Grid.Column="2" VerticalOptions="Start"  Grid.Row="0" HorizontalOptions="FillAndExpand">
                            <Grid RowSpacing="0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="15"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="15"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                            <Image Source="{Binding EncounterImage}" Margin="0,2,0,0" VerticalOptions="Start" Grid.Row="0" Grid.Column="0"/>
                            <Label Text="{Binding Encounter}" TextColor="Black" FontSize="12" Grid.Row="0" VerticalOptions="Start" Grid.Column="1" ></Label>


                            <StackLayout  Margin="0,0,0,5" Spacing="0" BindableLayout.ItemsSource="{Binding UserVitals}" Grid.Row="1" Grid.Column="1" >
                                    <BindableLayout.ItemTemplate>
                                        <DataTemplate>
                                            <Grid RowSpacing="0">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="*"/>
                                                    <ColumnDefinition Width="10"/>
                                                    <ColumnDefinition Width="*"/>
                                                </Grid.ColumnDefinitions>
                                                <Label Text="{Binding Description}" Grid.Column="0" FontSize="10" TextColor="Black" />
                                                <Label Text="{Binding Values}" HorizontalOptions="Start" Grid.Column="2" FontSize="10"  TextColor="Black"/>
                                            </Grid>

                                        </DataTemplate>
                                    </BindableLayout.ItemTemplate>
                                </StackLayout>
                            </Grid>
                        </StackLayout>
                    </Grid>
                </StackLayout>
            </Frame>
        </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

我正在尝试创建与年份分组的分组列表视图

这是我的模型

 public class EncounterFrameModel
{
    public string EncounterMonth { get; set; }
    public string MDate { get; set; }
    public string Comment { get; set; }
  //  public bool IsReallyAVeggie { get; set; }
    public string EncounterFrameColor { get; set; }
    public string Image { get; set; }
    public string Encounter { get; set; }
   // public List<TotalItem> Totals { get;set; }
    public string EncounterImage { get; set; }
    public ObservableCollection<UserHealthDetails> UserVitals { get; set; }

    public EncounterFrameModel()
    {
    }
}


public class UserHealthDetails
{

    public string Description { get; set; }
    public string Values { get; set; }
}




public class EncounteredYear
{
    public EncounteredYear()
    {
        encounterFrameModels = new ObservableCollection<EncounterFrameModel>();
    }
    public string LongName { get; set; }
    public string ShortName { get; set; }
    public ObservableCollection<EncounterFrameModel> encounterFrameModels { get; set; }
}

谁能帮我绑定这些数据

标签： xamlxamarinxamarin.forms

Answer 1

你可以试试这个：

像这样更改您的EncounteredYear模型：

class EncounteredYear:ObservableCollection<EncounterFrameModel>
{
    public string LongName { get; set; }
    public string ShortName { get; set; }     
}

在您的page.xaml.cs中设置您的数据（根据您自己的情况生成数据）：

ObservableCollection<EncounteredYear> grouped = new ObservableCollection<EncounteredYear>();
var gounp1 = new EncounteredYear() {...};
var gounp2 = new EncounteredYear() {...};
var gounp3 = new EncounteredYear() {...};
gounp1.Add(new EncounterFrameModel() {...});
gounp1.Add(new EncounterFrameModel() {...});
gounp1.Add(new EncounterFrameModel() {...});
gounp1.Add(new EncounterFrameModel() {...});
gounp2.Add(new EncounterFrameModel() {...});
gounp2.Add(new EncounterFrameModel() {...});
gounp2.Add(new EncounterFrameModel() {...});
gounp2.Add(new EncounterFrameModel() {...});
gounp3.Add(new EncounterFrameModel() {...});
gounp3.Add(new EncounterFrameModel() {...});
gounp3.Add(new EncounterFrameModel() {...});
gounp3.Add(new EncounterFrameModel() {...});
grouped.Add(gounp1);
grouped.Add(gounp2);
grouped.Add(gounp3);
lstView.ItemsSource = grouped;// bind the list of the grouplist

然后您将页面的 xaml 与之前一样，但删除ItemsSource="{Binding Grouped}"并且必须在其中<ViewCell>添加<DataTemplate>：

<ListView x:Name ="lstView" Margin="0,5,0,5" VerticalScrollBarVisibility="Always" HasUnevenRows="True" VerticalOptions="FillAndExpand" IsGroupingEnabled="true" SelectionMode="None" SeparatorVisibility="None"   GroupDisplayBinding="{Binding LongName}" GroupShortNameBinding="{Binding ShortName}">
   <ListView.GroupHeaderTemplate>
      <DataTemplate>
        <ViewCell>          
         ...
        </ViewCell>
       </DataTemplate>
   </ListView.GroupHeaderTemplate>
   <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          ...
        </ViewCell>
      </DataTemplate>
   </ListView.ItemTemplate>
</ListView>