#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:
//Попробуйте это:
Вертикальные опции = «Центр и расширение»
Если это не сработает, перейдите к пользовательскому визуализатору