自定义 ViewCell 中的按钮问题答案

【问题标题】：Problems with Button in custom ViewCell自定义 ViewCell 中的按钮问题
【发布时间】：2018-06-16 21:30:30
【问题描述】：

我在 ViewCell 中有一个按钮...

<?xml version="1.0" encoding="UTF-8"?>
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ConnectionCrew.UI.Shared.Appointments.CompletionFormMain">
    <ViewCell.View>
        <Grid Margin="8, 16, 8, 16">
            <Grid.RowDefinitions>
                <RowDefinition  Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <StackLayout BackgroundColor="#bdbdbd" Padding="1">
                <Editor x:Name="txtBxShiftNotes" BackgroundColor="White" Grid.Row="0" HeightRequest="100" />
            </StackLayout>
            <Button x:Name="btnSubmit" VerticalOptions="End" Grid.Row="1" HorizontalOptions="FillAndExpand" Text="Confirm Attendence" BackgroundColor="Lime" TextColor="White" HeightRequest="50" />
        </Grid>
    </ViewCell.View>
</ViewCell>

正在发生两件不受欢迎的事情。

1) 包含 ViewCell 的底部就在按钮文本的下方 - 就好像文本的基线与单元格的底部对齐。

2) 如果我点击按钮，它的点击事件不会触发并且整个单元格闪烁。除非我点击文本上方 - 在这种情况下没有闪烁并且引发点击事件。

如何解决这些问题？我更喜欢不闪烁、正确对齐和正确的命中测试。

【问题讨论】：

标签： xamarin.forms

【解决方案1】：

我不知道你的问题，但我建议：

将“ColumnDefinition”属性添加到您的网格 (Rows_and_Columns)
将Grid.Row 和Grid.Column 属性添加到StackLayout 控件
从 Editor 控件中删除 Grid.Row 属性（它位于 StackLayout 内，因此 StackLayout 应该具有 Row 和 Column 属性）
将Grid.Column属性添加到Button控件
发布实际问题的图片
您是否在 iOS、Android、UWP 上遇到问题？
GitHub 上的存储库可能很有用

【讨论】：

添加了屏幕截图。您可以看到按钮的文本如何与单元格底部对齐。如果我向上拖动，您可以看到跨按钮运行的行分隔符。
Grid.Row="0" 似乎是默认值，所以没有区别。

【解决方案2】：

我将边距移动到子元素...

<?xml version="1.0" encoding="UTF-8"?>
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ConnectionCrew.UI.Shared.Appointments.CompletionFormMain">
    <ViewCell.View>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition  Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <StackLayout Margin="8, 8, 8, 0" Grid.Row="0" BackgroundColor="#bdbdbd" Padding="1">
                <Editor x:Name="txtBxShiftNotes" BackgroundColor="White" HeightRequest="100" />
            </StackLayout>
            <Button Margin="8, 0, 8, 8" x:Name="btnSubmit" VerticalOptions="CenterAndExpand" Grid.Row="1" HorizontalOptions="FillAndExpand" Text="Confirm Attendence" BackgroundColor="Lime" TextColor="White" HeightRequest="50" />
        </Grid>
    </ViewCell.View>
</ViewCell>

【讨论】：