WPF TextBlock 中的文本垂直对齐

问题描述 投票:0回答:18

如何为 TextBlock 内的文本指定垂直居中对齐?我找到了 TextAlignment 属性,但它用于水平文本对齐。如何实现垂直文本对齐?

wpf vertical-alignment textblock
18个回答
336
投票

文本块本身无法进行垂直对齐

我发现最好的方法是将文本块放在边框内,这样边框就会为您进行对齐。

<Border BorderBrush="{x:Null}" Height="50">
    <TextBlock TextWrapping="Wrap" Text="Some Text" VerticalAlignment="Center"/>
</Border>

注意:这在功能上相当于使用网格,它只是取决于您希望控件如何与布局的其余部分相适应,从而确定哪一个更合适


119
投票

虽然 Orion Edwards Answer 适用于任何情况,但每次要添加边框并设置边框属性可能会很痛苦。另一种快速方法是设置文本块的填充:

<TextBlock Height="22" Padding="3" />

69
投票

TextBlock 不支持垂直文本对齐。

我通过用网格包裹文本块并设置 HorizontalAlignment="Stretch" 和 VerticalAlignment="Center" 来解决这个问题。

像这样:

<Grid>
    <TextBlock 
        HorizontalAlignment="Stretch"
        VerticalAlignment="Center"
        Text="Your text" />
</Grid>

17
投票

您可以使用标签代替文本块。

<Label Content="Hello, World!">
    <Label.LayoutTransform>
        <RotateTransform Angle="270"/>
    </Label.LayoutTransform>
</Label>

12
投票

TextBlock
不支持其内容的垂直对齐。如果您必须使用
TextBlock
,那么您必须将其与其父级对齐。

但是,如果您可以使用

Label
代替(它们确实具有非常相似的功能),那么您可以定位文本内容:

<Label VerticalContentAlignment="Center" HorizontalContentAlignment="Center">
   I am centred text!
</Label>

默认情况下,

Label
将拉伸以填充其边界,这意味着标签的文本将居中。


8
投票

如果您可以不使用“文本换行”,我认为用标签替换 TextBlock 是最简洁的方法。否则请遵循其他有效答案之一。 <Label Content="Some Text" VerticalAlignment="Center"/>



4
投票
VerticalContentAlignment

然后,如果您确实需要 

TextBlock

未涵盖的某些

Label
属性,例如
TextWrapping
,您可以在
TextBlock
 内放置 
Label
结果满足您的需求,

VerticalContentAlignment

TextWrapping
<Label
   VerticalContentAlignment="Center">
   <TextBlock
             TextWrapping="WrapWithOverflow">
             My text goes here!
   </TextBlock> 
<Label/>



3
投票
VerticalAlignment="Center"

解决了这个问题。

这可能是因为 
TextBlock
被包裹在网格中,但实际上 wpf 中的所有内容也是如此。
    


2
投票
TextBlock

显示更好。


<Border BorderThickness="3" BorderBrush="Yellow" CornerRadius="10" Padding="2" HorizontalAlignment="Center" VerticalAlignment="Center" Height="30" Width="150"> <TextBlock FontSize="20" Height="23" HorizontalAlignment="Left" Margin="0,0,0,-5" Text="" VerticalAlignment="Top" Width="141" Background="White" /> </Border>

让文字离底部更远的技巧是设置

Margin="0,0,0,-5"



1
投票
controltemplate

),然后将

PART_ContentHost
垂直对齐修改为居中即可解决问题
    


1
投票

<TextBlock> <TextBlock BaselineOffset="30">One</TextBlock> <TextBlock BaselineOffset="20">Two</TextBlock> <Run>Three</Run> <Run BaselineAlignment="Subscript">Four</Run> </TextBlock>



1
投票

<TextBlock Height="{Binding}" Text="Your text" TextWrapping="Wrap" VerticalAlignment="Center" Width="28"/>



0
投票

enter image description here


0
投票

Vertically aligned single line TextBox.为了扩展@Orion Edwards 提供的答案,这就是您完全从代码隐藏中完成的操作(未设置样式)。基本上创建一个继承自 Border 的自定义类,并将其 Child 设置为 TextBox。下面的示例假设您只需要一条线,并且边框是 Canvas 的子级。还假设您需要根据边框的宽度调整文本框的 MaxLength 属性。下面的示例还通过将边框的光标设置为“IBeam”类型来设置边框的光标以模仿文本框。设置边距“3”,以便文本框不完全与边框左侧对齐。

double __dX = 20; double __dY = 180; double __dW = 500; double __dH = 40; int __iMaxLen = 100; this.m_Z3r0_TextBox_Description = new CZ3r0_TextBox(__dX, __dY, __dW, __dH, __iMaxLen, TextAlignment.Left); this.Children.Add(this.m_Z3r0_TextBox_Description);

班级:

using System; using System.Collections.Generic; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Input; using System.Windows.Media; using System.Windows.Shapes; using System.Windows.Controls.Primitives; namespace ifn0tz3r0Exp { class CZ3r0_TextBox : Border { private TextBox m_TextBox; private SolidColorBrush m_Brush_Green = new SolidColorBrush(Colors.MediumSpringGreen); private SolidColorBrush m_Brush_Black = new SolidColorBrush(Colors.Black); private SolidColorBrush m_Brush_Transparent = new SolidColorBrush(Colors.Transparent); public CZ3r0_TextBox(double _dX, double _dY, double _dW, double _dH, int _iMaxLen, TextAlignment _Align) { ///////////////////////////////////////////////////////////// //TEXTBOX this.m_TextBox = new TextBox(); this.m_TextBox.Text = "This is a vertically centered one-line textbox embedded in a border..."; Canvas.SetLeft(this, _dX); Canvas.SetTop(this, _dY); this.m_TextBox.FontFamily = new FontFamily("Consolas"); this.m_TextBox.FontSize = 11; this.m_TextBox.Background = this.m_Brush_Black; this.m_TextBox.Foreground = this.m_Brush_Green; this.m_TextBox.BorderBrush = this.m_Brush_Transparent; this.m_TextBox.BorderThickness = new Thickness(0.0); this.m_TextBox.Width = _dW; this.m_TextBox.MaxLength = _iMaxLen; this.m_TextBox.TextAlignment = _Align; this.m_TextBox.VerticalAlignment = System.Windows.VerticalAlignment.Center; this.m_TextBox.FocusVisualStyle = null; this.m_TextBox.Margin = new Thickness(3.0); this.m_TextBox.CaretBrush = this.m_Brush_Green; this.m_TextBox.SelectionBrush = this.m_Brush_Green; this.m_TextBox.SelectionOpacity = 0.3; this.m_TextBox.GotFocus += this.CZ3r0_TextBox_GotFocus; this.m_TextBox.LostFocus += this.CZ3r0_TextBox_LostFocus; ///////////////////////////////////////////////////////////// //BORDER this.BorderBrush = this.m_Brush_Transparent; this.BorderThickness = new Thickness(1.0); this.Background = this.m_Brush_Black; this.Height = _dH; this.Child = this.m_TextBox; this.FocusVisualStyle = null; this.MouseDown += this.CZ3r0_TextBox_MouseDown; this.Cursor = Cursors.IBeam; ///////////////////////////////////////////////////////////// } private void CZ3r0_TextBox_MouseDown(object _Sender, MouseEventArgs e) { this.m_TextBox.Focus(); } private void CZ3r0_TextBox_GotFocus(object _Sender, RoutedEventArgs e) { this.BorderBrush = this.m_Brush_Green; } private void CZ3r0_TextBox_LostFocus(object _Sender, RoutedEventArgs e) { this.BorderBrush = this.m_Brush_Transparent; } } }



0
投票

<Label Height="32" VerticalContentAlignment="Center" HorizontalContentAlignment="Stretch" MouseLeftButtonUp="MenuItem_MouseLeftButtonUp"> <TextBlock Padding="32 0 10 0"> Label with click event </TextBlock> </Label>



0
投票

<TextBox TextWrapping="Wrap" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Background="{x:Null}" BorderBrush="{x:Null}" />



0
投票
TextBlock 在 Canvas 中时,这些答案都不适合我,所以我想我应该分享我的解决方案。虽然它并不绝对准确,但根据文本长度更改

Canvas.Left 属性即可完成工作。 public static void SetAlignedText(this TextBlock textBlock, string text) { textBlock.Text = text; Canvas.SetLeft(textBlock, -text.Length * 4); }

您可能需要根据字体大小更改该系数。我用 4 表示字体大小 20。 这种方法唯一绝对不起作用的时候是当文本包含特别多的细字符时,就像我一样。
    

<TextBox AcceptsReturn="True" TextWrapping="Wrap" VerticalContentAlignment="Top" > </TextBox>

-1
投票

© www.soinside.com 2019 - 2024. All rights reserved.