XamarinForms：在網格中展開按鈕大小以獲得更大的可訪問文本

我正在創建一個頂部有一個條目和一個按鈕的搜索表單。當文本是正常大小時，我將所有內容都布置得很好。我已經實作了可訪問性的縮放字體，現在當字體是第二大尺寸時，字體對于按鈕來說太大了，它會切斷文本。

這是我當前的代碼。我不需要使用網格，這只是我可以讓入口控制元件填充按鈕未使用的所有額外空間的唯一方法。控制元件上的寬度和高度請求是我可以讓它們在正常文本大小上看起來很好的唯一方法

<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>

這是正常文本大小的樣子：

這是第三到最大的文本大小的樣子：

這是我轉到第二個最大文本大小后會發生的情況：

And here is ideally what I would like it to look like at a minimum visual. I got this by setting the buttons width request to 100 instead of 80 (I ideally don't want this value as it doesn't look good on small text size):

The only solution I have came up with is keep track of what the text scaling is, and once it goes above 1.5, then I can increase the WidthRequest on the button control. Ideally I would just like the button to adjust to the width of the text.

EDIT 1:

I tried Jason's solution with this code here:

<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>

I had to leave the HeightRequest on the Entry else the entry would be a smaller height. Without the Padding on the Button it showed like so:

Adding the padding added some space to the button (I tried this instead of the WidthRequest):

所以現在它在普通文本上看起來不錯，但是一旦我開始在可訪問性中增加文本大小，它在第 3 到最大尺寸上看起來不錯（與我上面的原始解決方案相同）：

但是，一旦我將它移到頂部兩個，它就會開始將按鈕從螢屏上推到右側：

然后我有了重新使用 Grid 并在 Button 上使用 Padding 而不是 WidthRequest 的想法，它可以正確顯示：

uj5u.com熱心網友回復：

這對我有用。當我更改FontSize按鈕時，條目將調整以適應

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

uj5u.com熱心網友回復：

在嘗試了 Jason 建議的解決方案后，它仍然沒有在最大的文本可訪問性設定下正確布局（請參閱我在原始帖子中上面的編輯）。我嘗試Padding="20,0,20,0"在 Button 上放置 a 并洗掉WidthRequest以在正常文本大小的情況下在 Find 文本周圍添加間距，這似乎允許 Grid 自動布局寬度我還洗掉了HeightRequest兩個控制元件上的 s 。我不喜歡“查找”按鈕的外觀，因為它比條目大。這是最終的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）上的這些視覺效果：

為了解決 Find 按鈕比我真正希望它在普通文本上高的問題，我添加了條件系結，具體取決于字體縮放是什么：

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

這實作了這些最終的視覺效果：

I wish there was a way to do this all through Xaml, but I can't seem to find the settings.

標籤：xamarin xamarin.forms

上一篇：決議本地json檔案并將其顯示在XamarinForms的CarouselView中

下一篇：啟動MAUI應用程式加載錯誤