完全显示圆形按钮内的长文本

Question

我正在尝试使用 Xamarin Forms 创建一个带有长文本的圆形按钮。但是在 UWP 平台上，如果文本长度超过 6 个字符，则其不完全可见。

如何使文本适合按钮内的宽度和高度。

下面是描述的问题。在第 3 个按钮中，数字 100000 被切到最右边。

下面增加字体大小后呈现的是UI。

上面增加了字体大小，但是文本在角处被截断了。

仅供参考：我在 UWP 上使用以下样式仅来呈现按钮，这里有什么地方做错了吗？或者我如何使用这种样式删除文本块的半径？

 <Style x:Name="MyControl" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="Border"
                                 Background="White"
                                 CornerRadius="50"
                                Width="110"
                                 Padding="0"
                                 Margin="0"
                                 BorderBrush="{TemplateBinding BorderBrush}"
                                 BorderThickness="{TemplateBinding BorderThickness}">
                            <ContentPresenter x:Name="ContentPresenter"
                                  Content="{TemplateBinding Content}"
                                  ContentTransitions="{TemplateBinding ContentTransitions}"
                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                  AutomationProperties.AccessibilityView="Raw"
                                                  IsTextScaleFactorEnabled="False"
                                  TextWrapping="Wrap">
                                </ContentPresenter>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Answer 1

How can i make the text fit to Width and Height inside the button.

Xamarin 按钮有 FontSize 属性。您可以设置合适的双精度值来显示所有文本。

<Button HeightRequest="60" WidthRequest="60"
        BorderRadius="30" 
        VerticalOptions="Center" 
        BorderColor="Green" 
        BorderWidth="5" 
        HorizontalOptions="Center" 
        Text="100000"          
        BackgroundColor="Transparent"
        FontSize="10"/>

在我这边看起来是正确的。

如果你想避免点击动画，请直接复制以下FormsButton移除的样式PointerOver和Pressed故事板到UWP应用程序资源。

xmlns:forms="using:Xamarin.Forms.Platform.UWP"
<Style TargetType="forms:FormsButton">
    <Setter Property="Background" Value="{ThemeResource ButtonBackground}" />
    <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
    <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}" />
    <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />

    <Setter Property="FocusVisualMargin" Value="-3" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="forms:FormsButton">
                <ContentPresenter
                    x:Name="ContentPresenter"
                    Padding="{TemplateBinding Padding}"
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                    AutomationProperties.AccessibilityView="Raw"
                    Background="{TemplateBinding Background}"                            
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Content="{TemplateBinding Content}"
                    ContentTemplate="{TemplateBinding ContentTemplate}"
                    ContentTransitions="{TemplateBinding ContentTransitions}"                             
                    >

                </ContentPresenter>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

完全显示圆形按钮内的长文本

Display long text inside Circular Button Completely

xamarin.forms

uwp-xaml

xamarin.uwp