Xamarin.Forms ListView ViewCell在iOS上的问题

Question

I've been trying to get this looking right in Xaml (x.forms) but can't make it work. Any possibly way this can be solved in Xaml without a custom cell renderer?

Here is how it's supposed to look on native iOS:

What I'm getting so far in Xaml:

Here's my Xaml:

<ScrollView>
    <StackLayout>
        <ActivityIndicator IsRunning="{Binding IsFetching}" />
        <ListView ItemsSource="{Binding Events}" Header="2015" Footer="">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell Height="55">
                        <ViewCell.View>
                            <StackLayout Orientation="Horizontal" Padding="5" BackgroundColor="White">                                                          
                                <StackLayout>
                                    <BoxView WidthRequest="44" 
                                         HeightRequest="5"  
                                         BackgroundColor="Purple"
                                         />
                                    <Label Text="AUG" FontSize="12" HeightRequest="13" HorizontalOptions="Center" VerticalOptions="Start" FontAttributes="Bold"/>
                                    <Label Text="31" FontSize="13" VerticalOptions="StartAndExpand" HorizontalOptions="Center" />
                                </StackLayout>                              
                                <StackLayout Orientation="Vertical"
                                             HorizontalOptions="StartAndExpand">
                                    <Label Text="Relay For Life of" FontSize="14" VerticalOptions="End" TextColor="Gray"/>
                                    <Label Text="Hope City" FontSize="16" FontAttributes="Bold" VerticalOptions="StartAndExpand"/>
                                </StackLayout>
                            </StackLayout>
                        </ViewCell.View>
                    </ViewCell>         
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ScrollView>

Answer 1

You can try this with a Grid instead of Stack, also add RowHeight to your ListView

<ListView ... RowHeight="55">
 ...
 <ViewCell Height="55">
   <Grid> 
     <Grid.ColumnDefinitions>
       <ColumnDefinition Width="44"/>
       <ColumnDefinition Width="*"/>
       <ColumnDefinition Width="44"/> <!-- for the checkmark -->
     </Grid.ColumnDefinitions>
     <Grid Grid.Column="0">
       <Grid.RowDefinitions>
          <RowDefinition Height="5" />
          <RowDefinition Height="22" />
          <RowDefinition Height="17" />
       </Grid.RowDefinitions>
       <BoxView Grid.Row="0" WidthRequest="44" HeightRequest="5" BackgroundColor="Purple"/>
       <!-- experiment with the vertical alignment to get it right -->
       <Label Grid.Row="1" Text="AUG" .../>
       <Label Grid.Row="2" Text="31" .../>
     </Grid>
<Grid Grid.Column="0">
       <Grid.RowDefinitions>
          <RowDefinition Height="22" />
          <RowDefinition Height="22" /> 
       </Grid.RowDefinitions> 
       <!-- if the vertical alignment doesn't work well add two more rows for top and bottom padding -->
       <Label Grid.Row="0" Text="Relay for life" VerticalOptions="End" .../>
       <Label Grid.Row="1" Text="Hope city" VerticalOptions="Start" .../>
     </Grid>
   </Grid>
 </ViewCell>

Answer 2

在ListView上设置HasUnevenRows =“ True”