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

Question

我试图使用Xamarin Forms在其中创建一个带有长文本的圆形按钮。但是在UWP平台上，如果文本长于6个字符，那么它完全不可见。

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

以下是描述的问题。在第三个按钮中，图100000在极右侧切割。

增加字体大小后，是渲染的用户界面。

以上增加了字体大小，但文字在角落被切断。

仅供参考：我只在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

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

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

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

它看起来在我身边是正确的。

如果您想要避免点击动画，请将以下FormsButton样式直接复制到UWP Application Resource，将PointerOver和Pressed故事板删除。

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>