如何使用StackLayout内的Grid模拟TableSection中的ViewCell？

Posted 2021-03-31

我的应用程序调用两个模板，创建类似于两个ViewCells的模板：

<StackLayout Orientation="Horizontal" Padding="10">
   <template:DataGridTemplate Text="Updated" Label="{Binding Updated}" />
   <template:DataGridTemplate Text="Version" Label="{Binding Version}" />
</StackLayout>

这是模板XAML

<?xml version="1.0" encoding="utf-8"?>
<Grid Padding="20,0" xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      xmlns:local="clr-namespace:Japanese;assembly=Japanese" 
      x:Class="Japanese.Templates.DataGridTemplate" 
      x:Name="this">
    <local:StyledLabel Text="{Binding Text, Source={x:Reference this}}" HorizontalOptions="Start" VerticalTextAlignment="Center" />
    <local:StyledLabel Text="{Binding Label, Source={x:Reference this}}" HorizontalOptions="End" VerticalTextAlignment="Center" />
</Grid>

我希望模板的高度为50，并且还要在两个模板之间创建一条线来模拟我在TableSection内部的ViewCell中找到的东西。

有没有人有任何建议我怎么做？我尝试将Grid的高度设置为50，但它告诉我它是一个只读属性。

答案

StackLayout

<StackLayout Orientation="Vertical" Padding="10" Spacing="0">
    <template:DataGridTemplate Text="Updated" Label="07/21/2018" />
    <template:DataGridTemplate Text="Version" Label="1.0.0" />
</StackLayout>  

DataGridTemplate（行分隔符在这里，但可以直接添加到StackLayout）

<?xml version="1.0" encoding="utf-8"?>
<Grid Padding="20,0" HeightRequest="50" xmlns="http://xamarin.com/schemas/2014/forms"
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      xmlns:local="clr-namespace:Sof2" 
      x:Class="Sof2.Templates.DataGridTemplate" 
      x:Name="this">

    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <local:StyledLabel Grid.Column="0" Text="{Binding Text, Source={x:Reference this}}" VerticalTextAlignment="Center" />
    <local:StyledLabel Grid.Column="1" Text="{Binding Label, Source={x:Reference this}}" TextColor="Silver" VerticalTextAlignment="Center" />

    <!-- Separator -->
    <BoxView Grid.ColumnSpan="2" BackgroundColor="Silver" HeightRequest="1" VerticalOptions="End" />

</Grid>

结果

如果需要交互性，则可以根据需要添加TapGestureRecognizer。