我想要像添加的图像中的每个视图单元格分开

Question

在此图片中，我希望分隔每个视图单元。

这就是我要找的东西：

Answer 1

        <ListView Grid.Row="3" Grid.Column="1" x:Name="NameListOfFlatsList" CachingStrategy="RecycleElement" SeparatorVisibility="None" ItemsSource="{Binding ListOfFlatsList, Mode=TwoWay}" SelectedItem="{Binding selectedItemListOfFlatsList}" HasUnevenRows="True">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Frame Margin="5">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="3"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="3"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="3"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="3"/>
                                </Grid.ColumnDefinitions>
                                <StackLayout Grid.Row="1" Grid.Column="1" Orientation="Horizontal">
                                    <Label Text="{Binding meeterNumber}" Style="{StaticResource PropartyLbl}" VerticalOptions="Center"/>
                                    <Label Text="|" VerticalOptions="Center"/>
                                    <Label Text="{Binding catogiry}" Style="{StaticResource NoOfMetersLbl}" VerticalOptions="Center"/>
                                </StackLayout>
                                <Label Grid.Row="2" Grid.Column="1" Text="{Binding Address}" Style="{StaticResource FlatLbl}"/>
                                <Image Grid.Row="1" Grid.RowSpan="2" Grid.Column="2" Source="ReadingLog.png" VerticalOptions="Center" HorizontalOptions="End"/>
                            </Grid>
                        </Frame>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

Answer 2

您可以在每个视单元中使用保证金来完成这项工作。

Xamarin documentation over margin/padding

Answer 3

在你的情况下，你必须：

- 将SeparatorVisibility设置为无

- 在ViewCell内容中设置适当的保证金

- 不要忘记设置CachingStrategy和RowHeight    表现目的。

请参阅此示例：

<ListView x:Name="listView" SeparatorVisibility="None" RowHeight="200" CachingStrategy="RecycleElement" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                      <Frame Margin="10">
                         <Grid>
                           <!-- Your Content -->
                         </Grid>
                      </Frame>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
</ListView>