Показать полный текст внутри круглой кнопки полностью - PullRequest
Новая
       13

Показать полный текст внутри круглой кнопки полностью

0 голосов
/ 01 апреля 2019

Я пытаюсь создать круглую кнопку с длинным текстом внутри нее, используя формы Xamarin. однако на платформе UWP, если текст длиннее, чем, скажем, 6 символов, он не виден полностью.

Как сделать так, чтобы текст соответствовал ширине и высоте внутри кнопки.

Ниже изображена проблема. в 3-й кнопке рисунок 100000 вырезан в крайнем правом углу.

enter image description here

После увеличения размера шрифта ниже отображается интерфейс визуализации.

enter image description here

Выше увеличен размер шрифта, однако текст обрезан по углам.

К вашему сведению: Использую ниже стили только в 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>

1 Ответ

0 голосов
/ 02 апреля 2019

Как сделать так, чтобы текст соответствовал ширине и высоте внутри кнопки.

Кнопка Xamarin имеет свойство FontSize.Вы можете установить подходящее двойное значение для отображения всего текста. 

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

enter image description here

С моей стороны все выглядит правильно.

Если выХотите избежать анимации кликов. Скопируйте следующий стиль 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>
...