如何在 UWP 上的 Xamarin 表单条目中垂直居中文本?
Posted
技术标签:
【中文标题】如何在 UWP 上的 Xamarin 表单条目中垂直居中文本?【英文标题】:How to vertically centre text in a Xamarin Forms Entry on UWP? 【发布时间】:2021-09-29 00:41:31 【问题描述】:我有一个 Xamarin Forms 项目 (v2.5),我的 Xaml 文件中有一个文本条目控件。我需要条目比默认值高,所以我指定一个 60 的 HeightRequest,它工作正常,除了文本本身与条目控件的顶部对齐。
<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 似乎不再起作用,所以我在自定义渲染器中添加了高度。但文本对齐保持在顶部。
谁能告诉我如何让文本垂直居中?
【问题讨论】:
嗨@aritchie你有解决办法吗? 【参考方案1】: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"];
【讨论】:
我正在尝试用同样的问题修复我的项目。您介意编辑您的答案以显示这两个元素在 UWP 项目中的位置吗?另外,您的 【参考方案2】:我认为不需要自定义渲染器,只需居中并展开即可。
VerticalOptions = "LayoutOptions.CenterAndExpand"
【讨论】:
【参考方案3】:我知道已经很晚了,但是下面的代码适用于 android 以在 Entry 中居中文本,它也适用于 UWP:
this.Control.Gravity = GravityFlags.CenterHorizontal;
this.Control.Gravity = GravityFlags.Center;
如果有帮助,请告诉我
【讨论】:
【参考方案4】://试试这个:
VerticalOptions = "CenterAndExpand"
如果这不起作用,请使用自定义渲染器
【讨论】:
以上是关于如何在 UWP 上的 Xamarin 表单条目中垂直居中文本?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 xamarin 表单 UWP 中使用 AppWindow 打开多个窗口?