XAML 如何在UWP上的Xamarin Forms Entry中垂直居中文本？

yc0p9oo0 于 2023-05-04 发布在其他

关注(0)|答案(4)|浏览(209)

我有一个Xamarin Forms项目（v2.5），在我的Xaml文件中有一个文本输入控件。我需要条目的高度高于默认值，因此我指定HeightRequest为60，这可以正常工作，除了文本本身与Entry控件的顶部对齐之外。

<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中的HeightRequest似乎不再起作用了，所以我在自定义渲染器中添加了高度。但文本对齐保持在顶部。
谁能告诉我如何让文本垂直居中？

xaml

来源：https://stackoverflow.com/questions/48911333/how-to-vertically-centre-text-in-a-xamarin-forms-entry-on-uwp

4条答案

按热度按时间

lzfw57am1#

Entry对应的本机控件是UWP app中的TextBox，详情请参见Renderer Base Classes and Native Controls。VerticalAlignment属性意味着在父控件中将当前control设置为垂直居中，而不是针对内部的文本。只有像TextAlignment这样的属性才会对文本生效。由于UWP应用程序中的Textbox没有VerticalTextAlignment属性，因此无法直接将文本设置为垂直居中。但是您可以更改TextBox的样式模板作为解决方法。
为Textbox创建新样式，并将VerticalAlignment属性设置为ControlTemplate中的ContentPresenter和ScrollViewer控件居中。然后在自定义呈现中应用样式。
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"];
   }
}

赞(0）回复(0）举报 2023-05-04

5t7ly7z52#

我不认为这是需要一个自定义渲染器，只是中心和扩大。

VerticalOptions = "LayoutOptions.CenterAndExpand"

赞(0）回复(0）举报 2023-05-04

zsohkypk3#

我知道这很晚了，但下面的代码适用于Android在Entry中居中文本，它也适用于UWP：

this.Control.Gravity = GravityFlags.CenterHorizontal;

this.Control.Gravity = GravityFlags.Center;

告诉我，如果有帮助的话

赞(0）回复(0）举报 2023-05-04

6tr1vspr4#

试试这个：

VerticalOptions = "CenterAndExpand"

如果这不起作用，请使用自定义渲染器

赞(0）回复(0）举报 2023-05-04

我来回答

XAML 如何在UWP上的Xamarin Forms Entry中垂直居中文本？

4条答案

相关问题

热门标签

最新问答