c# - 如何扩展 stacklayout 的点击区域以占据视单元的高度？

Question

所以我在 XAML 中有以下代码片段:

<TableView Intent="Settings">
   <TableRoot>
      <TableSection Title="Card Front Side">
         <ViewCell>
            <StackLayout x:Name="englishSide" Padding="20,0,20,0"
                         BackgroundColor="Red"
                         Orientation="Horizontal" VerticalOptions="Center">
               <Label Text="English" XAlign="Center"/>
               <Image x:Name="englishImage" Source="check.png" 
                      HorizontalOptions="EndAndExpand" IsVisible="false" />
            </StackLayout>
          </ViewCell>
       </TableSection>
   </TableRoot>
</TableView>

在我的 C# 代码中，我有以下代码来处理点击事件:

englishSide.GestureRecognizers.Add(new TapGestureRecognizer
{
   NumberOfTapsRequired = 1,
   Command = new Command(() =>
   {
       englishImage.IsVisible = true;
       App.Database.UpdateSettings((int)Lang.English, "CardFrontSide");
   })
});

现在，当我点击该行时，我注意到它没有立即响应我的点击。然后我意识到可以应用点击事件的区域并没有占据行的整个高度，如下图所示(红色背景的区域)。

谁能告诉我如何让它占据整个行/ViewCell 高度而不改变 ViewCell 的高度？谢谢

Answer 1

您的StackLayout的VerticalOptions设置为“Center”，这意味着“看到那边的空间了吗？只需获取中间的某个地方谢谢你”。
这意味着 StackLayout 不会占用超出所需的空间。

如果你想让StackLayout填充单元格的高度(由ListView.RowHeight定义)，你需要将其设置为FillAndExpand > (您可以尝试不同的值，我不确定 CenterAndExpand 或 Fill 是否足够)。

如果 CenterAndExpand 不起作用，您可以将 StackLayout 与 VerticalOptions="Center" 包装在另一个 StackLayout 中> 使用 FillAndExpand 使文本保持垂直居中:

<TableView Intent="Settings">
   <TableRoot>
      <TableSection Title="Card Front Side">
         <ViewCell>
            <StackLayout VerticalOptions="FillAndExpand"
                         x:Name="englishSide"
                         Padding="20,0,20,0"
                         BackgroundColor="Red">
              <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
                 <Label Text="English" XAlign="Center"/>
                 <Image x:Name="englishImage" Source="check.png" 
                        HorizontalOptions="EndAndExpand" IsVisible="false" />
              </StackLayout>
            </StackLayout>
          </ViewCell>
       </TableSection>
   </TableRoot>
</TableView>