Question

我试图使用Xamarin表单创建一个带有长文本的圆形按钮。但是在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属性。您可以设置合适的double值来显示所有文本。

<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 Application Resource。

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>

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

1 个答案: