Xamarin Forms：在网格中扩展按钮大小以获得更大的可访问文本

Question

我正在创建一个顶部有条目和按钮的搜索表单。当文本是正常大小时，我把它都布置得很好。我已经为可访问性实现了缩放字体，现在当字体处于最大尺寸的第二个时，字体对于按钮来说太大了，它会截断文本。

这是我当前的代码。我不需要使用网格，这只是让输入控件填写按钮未使用的所有额外 space 的唯一方法。控件上的宽度和高度请求是我让它们在正常文本大小调整时看起来很好的唯一方法

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <controls:BorderedEntry Grid.Column="0" x:Name="queryEntry" Text="{Binding QueryString}" FontSize="{DynamicResource StandardLabelFontSize}" 
            BorderColor="{AppThemeBinding Light={StaticResource PrimaryColorLight}, Dark={StaticResource PrimaryColorDark}}" CompletedCommand="{Binding FindTextCommand}"
            Placeholder="Search string" ReturnType="Search" ClearButtonVisibility="WhileEditing"
            VerticalOptions="CenterAndExpand" HeightRequest="{OnPlatform Android=50, iOS=35}" Margin="10,15,5,5" 
            IsClippedToBounds="True" CornerRadius="5" AutomationId="TextSearchEntry" />
    <Button Grid.Column="1" Text="Find" Command="{Binding FindTextCommand}" Margin="0,10,10,0" WidthRequest="80"
            HeightRequest="35" IsEnabled="{Binding QueryString, Converter={StaticResource NonEmptyStringValue}}"
            FontSize="{DynamicResource StandardLabelFontSize}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
</Grid>

这是正常文本大小调整后的样子：

这是第三到最大文本大小的样子：

这是我转到第二个最大文本大小后发生的情况：

这是我最理想的视觉效果。我通过将按钮宽度请求设置为 100 而不是 80 得到了这个（我理想情况下不想要这个值，因为它在小文本大小上看起来不太好）：

我想出的唯一解决方案是跟踪文本缩放比例，一旦超过 1.5，我就可以增加按钮控件上的 WidthRequest。理想情况下，我只想让按钮适应文本的宽度。

编辑 1：

我在这里用这段代码尝试了 Jason 的解决方案：

<StackLayout Orientation="Horizontal">
    <controls:BorderedEntry Text="{Binding QueryString}" FontSize="{DynamicResource StandardLabelFontSize}" 
            BorderColor="{AppThemeBinding Light={StaticResource PrimaryColorLight}, Dark={StaticResource PrimaryColorDark}}" CompletedCommand="{Binding FindTextCommand}"
            Placeholder="Search string" ReturnType="Search" ClearButtonVisibility="WhileEditing"
            VerticalOptions="CenterAndExpand" HeightRequest="{OnPlatform Android=50, iOS=40}" Margin="10,15,5,5" 
            HorizontalOptions="FillAndExpand"
            IsClippedToBounds="True" CornerRadius="5" AutomationId="TextSearchEntry" />
    <Button Text="Find" Command="{Binding FindTextCommand}" Margin="0,10,10,0"
            IsEnabled="{Binding QueryString, Converter={StaticResource NonEmptyStringValue}}"
            FontSize="{DynamicResource StandardLabelFontSize}" VerticalOptions="Center"
            Padding="20,0,20,0"/>
</StackLayout>

我必须将 HeightRequest 保留在条目上，否则条目的高度会更小。没有按钮上的填充，它显示如下：

添加填充向按钮添加了一些 space（我试过这个而不是 WidthRequest）：

所以现在它在普通文本上看起来不错，但是一旦我开始在可访问性中增加文本大小，它在第三到最大尺寸上看起来不错（与我上面的原始解决方案相同）：

但是一旦我将它移到前两个，它就会开始将按钮推到屏幕右侧：

然后我想回到使用 Grid 并使用 Padding 而不是 Button 上的 WidthRequest，它正确显示：

Answer 1

这对我有用。当我更改按钮的 FontSize 时，条目将调整以适应

  <StackLayout Padding="10,100,10,0" HeightRequest="50" Orientation="Horizontal" BackgroundColor="LightBlue">
    <Entry HorizontalOptions="FillAndExpand" Placeholder="Search"  />
    <Button FontSize="80" Text="Find" />
  </StackLayout>

Answer 2

在尝试了 Jason 的建议解决方案后，它仍然没有在最大文本辅助功能设置下正确布局（请参阅我在上面的原始 post 中的编辑）。我尝试在按钮上放置一个 Padding="20,0,20,0" 并删除 WidthRequest 以在正常文本大小的情况下在查找文本周围添加间距，这似乎允许网格 auto-layout 我的宽度还删除了两个控件上的 HeightRequests。我不喜欢“查找”按钮的外观，因为它比条目大。这是最后的 xaml:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <controls:BorderedEntry Grid.Column="0" Text="{Binding QueryString}" FontSize="{DynamicResource StandardLabelFontSize}" 
            BorderColor="{AppThemeBinding Light={StaticResource PrimaryColorLight}, Dark={StaticResource PrimaryColorDark}}" CompletedCommand="{Binding FindTextCommand}"
            Placeholder="Search string" ReturnType="Search" ClearButtonVisibility="WhileEditing"
            VerticalOptions="CenterAndExpand" Margin="10,15,5,5" 
            IsClippedToBounds="True" CornerRadius="5" AutomationId="TextSearchEntry" />
    <Button Grid.Column="1" Text="Find" Command="{Binding FindTextCommand}" Margin="0,10,10,0"
            IsEnabled="{Binding QueryString, Converter={StaticResource NonEmptyStringValue}}"
            FontSize="{DynamicResource StandardLabelFontSize}" VerticalOptions="CenterAndExpand"
            Padding="20,0,20,0"/>
</Grid>

在普通文本上使用这些视觉效果 (iOS / Android)：

而这些视觉效果的最大文字大小 (iOS / Android):

为了解决“查找”按钮比我真正希望它在普通文本上的高度高的问题，我根据字体缩放比例添加了条件绑定：

private void SetButtonBinding()
{
    if (App.Current.CurrentFontScale < ScaleFontThreshold)
    {
        findButton.SetBinding(Button.HeightRequestProperty, nameof(FindViewModel.ButtonHeightRequest));
    }
    else
    {
        findButton.RemoveBinding(Button.HeightRequestProperty);
    }
}

实现了这些最终视觉效果：

我希望在 Xaml 期间有一种方法可以做到这一点，但我似乎找不到设置。

Xamarin Forms：在网格中扩展按钮大小以获得更大的可访问文本

Xamarin Forms: Expand Button size in a Grid for larger Accessible Text

xamarin

xamarin.forms