如何在 UWP 上的 Xamarin 表单条目中垂直居中文本? [英] How to vertically centre text in a Xamarin Forms Entry on UWP?

问题描述

我有一个 Xamarin Forms 项目 (v2.5)，我的 Xaml 文件中有一个文本输入控件.我需要条目比默认值高，所以我将 HeightRequest 指定为 60，这很好用，除了文本本身与 Entry 控件的顶部对齐.

I have a Xamarin Forms project (v2.5) where I have a text Entry control in my Xaml file. I need the entry to be taller than default, so I specify a HeightRequest of 60, which works fine, apart from the text itself is aligned to the top of the Entry control.

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

看起来像:

我添加了一个自定义渲染器:

I added a custom renderer:

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 中的 HeightRequest 似乎不再起作用，所以我在自定义渲染器中添加了高度.但文本对齐保持在顶部.

But this doesn't work. The HeightRequest in the Xaml doesn't seem to work anymore, so I added the height in the custom renderer. But the text alignment stays at the top.

谁能告诉我如何让文本垂直居中?

Can anyone tell me how to get the text vertically centered?

推荐答案

Entry对应的原生控件在UWP app中为TextBox，见渲染器基类和本机控件 了解更多详细信息.VerticalAlignment 属性表示将当前 control 设置为父控件的垂直居中，而不是为里面的文本设置.只有像 TextAlignment<这样的属性/code> 将对文本生效.由于 UWP 应用中的 Textbox 没有 VerticalTextAlignment 属性，因此不能直接将文本设置为垂直居中.但是您可以更改 TextBox 的样式模板作为解决方法.

The correspondent native control of Entry is TextBox in UWP app, see Renderer Base Classes and Native Controls for more details. The VerticalAlignment property means that setting current control to vertical center in the parent control, not for the text inside. Only properties like TextAlignment will take effects on the text. Since Textbox in UWP app doesn't have the property VerticalTextAlignment, you cannot set the text to vertical center directly. But you could change the style template of TextBox as a workaround.

为 Textbox 创建一个新样式，并将 VerticalAlignment 属性设置为以 ContentPresenter 和 ScrollViewerControlTemplate 中的 code> 控件.然后在自定义渲染中应用样式.

Create a new style for the Textbox, and to set the VerticalAlignment property to center to both ContentPresenter and ScrollViewer controls inside the ControlTemplate. And then apply the style in the custom render.

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"];
   }
}

这篇关于如何在 UWP 上的 Xamarin 表单条目中垂直居中文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！