Как расположить текст по вертикали в записи Xamarin Forms в UWP?

#xaml #xamarin.forms #xamarin.uwp

Вопрос:

У меня есть проект Xamarin Forms (v2.5), в котором в моем файле Xaml есть элемент управления вводом текста. Мне нужно, чтобы запись была выше, чем по умолчанию, поэтому я указываю требование высоты 60, которое отлично работает, кроме того, что сам текст выровнен по верхней части элемента управления вводом.

 <Entry Text="{Binding CustomerNameText}" HeightRequest="60" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" IsEnabled="{Binding CustomerNameEntryEnabled}" Focused="Entry_Focused" Unfocused="Entry_Unfocused" />
 

Что выглядит как:

введите описание изображения здесь

Я добавил пользовательский визуализатор:

 public class CustomEntryRenderer : EntryRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
    {
        base.OnElementChanged(e);

        if(this.Control != null)
        {
            this.Control.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Center;
            this.Control.Height = 60;
        }

    }

}
 

Но это не работает. Запрос высоты в Xaml, похоже, больше не работает, поэтому я добавил высоту в пользовательском средстве визуализации. Но выравнивание текста остается вверху.

Кто-нибудь может сказать мне, как сделать текст вертикально центрированным?

Комментарии:

1. Привет @аритчи, у тебя есть решение этой проблемы?

Ответ №1:

Соответствующий собственный элемент управления Entry находится TextBox в приложении UWP, дополнительные сведения см. в разделе Базовые классы визуализации и собственные элементы управления. VerticalAlignment Свойство означает, что установка текущего control значения по вертикали в родительском элементе управления, а не для текста внутри. Только такие свойства, как TextAlignment будут влиять на текст. Поскольку Textbox в приложении UWP нет этого свойства VerticalTextAlignment , вы не можете напрямую установить текст по центру по вертикали. Но вы можете изменить шаблон стиля TextBox в качестве обходного пути.

Создайте новый стиль для Textbox , и установите VerticalAlignment свойство в центр для обоих ContentPresenter ScrollViewer элементов управления и внутри ControlTemplate . А затем примените стиль в пользовательской визуализации.

Стиль в App.xaml

 <Style x:Key="TextBoxStyle1" TargetType="TextBox">
...
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TextBox">
                <Grid> 
                  ...
                    <Border x:Name="BorderElement" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Grid.ColumnSpan="2" Grid.RowSpan="1" Grid.Row="1"/>
                    <ContentPresenter  x:Name="HeaderContentPresenter" VerticalAlignment="Center"  ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.ColumnSpan="2" FontWeight="Normal" Foreground="{ThemeResource TextControlHeaderForeground}" Margin="0,0,0,8" Grid.Row="0" TextWrapping="{TemplateBinding TextWrapping}" Visibility="Collapsed" x:DeferLoadStrategy="Lazy"/>
                    <ScrollViewer x:Name="ContentElement" VerticalAlignment="Center" AutomationProperties.AccessibilityView="Raw" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsTabStop="False" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" ZoomMode="Disabled"/>
                    <TextBlock x:Name="PlaceholderTextContentPresenter" Grid.ColumnSpan="2" Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource Mode=TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForeground}}" IsHitTestVisible="False" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1" Text="{TemplateBinding PlaceholderText}" TextWrapping="{TemplateBinding TextWrapping}" TextAlignment="{TemplateBinding TextAlignment}"/>
                    <Button x:Name="DeleteButton" AutomationProperties.AccessibilityView="Raw" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="1" FontSize="{TemplateBinding FontSize}" IsTabStop="False" MinWidth="34" Margin="{ThemeResource HelperButtonThemePadding}" Grid.Row="1" Style="{StaticResource DeleteButtonStyle}" VerticalAlignment="Stretch" Visibility="Collapsed"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
 

Пользовательский рендеринг:

 protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
   base.OnElementChanged(e);

   if (this.Control != null)
   { 
       this.Control.Height = 60; 
       Control.Style = (Windows.UI.Xaml.Style)App.Current.Resources["TextBoxStyle1"];
   }
}
 

Комментарии:

1. Я пытаюсь исправить свой проект с той же проблемой. Не могли бы вы отредактировать свой ответ, чтобы показать, куда эти два элемента входят в проект UWP? Кроме того, ваш <Стиль> сокращен, не могли бы вы показать полную разметку?

Ответ №2:

Я не думаю, что для этого нужен пользовательский визуализатор, просто центрируйте и расширяйте.

 VerticalOptions = "LayoutOptions.CenterAndExpand"
 

Ответ №3:

Я знаю, что уже поздно,но приведенный ниже код работает для Android, чтобы центрировать текст при вводе, он также должен работать для UWP:

 this.Control.Gravity = GravityFlags.CenterHorizontal;

this.Control.Gravity = GravityFlags.Center;
 

Дайте мне знать,если это поможет

Ответ №4:

//Попробуйте это:

Вертикальные опции = «Центр и расширение»

Если это не сработает, перейдите к пользовательскому визуализатору