wpf - WPF TextBlock 中的文本垂直对齐

Question

如何为 TextBlock 内的文本分配垂直居中对齐？我找到了 TextAlignment 属性，但它用于水平文本对齐。如何进行垂直文本对齐？

score 307 · Accepted Answer

文本块本身不能进行垂直对齐

我发现做到这一点的最佳方法是将文本块放在边框内，以便边框为您对齐。

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

注意：这在功能上等同于使用网格，它只是取决于您希望控件如何与布局的其余部分相适应，哪个更合适

score 104 · Accepted Answer

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

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

score 64 · Accepted Answer

TextBlock 不支持垂直文本对齐。

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

像这样：

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

score 17 · Accepted Answer

您可以使用标签而不是文本块。

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

score 9 · Accepted Answer

TextBlock不支持其内容的垂直对齐。如果必须使用TextBlock，则必须将其与其父级对齐。

但是，如果您可以Label改用（并且它们确实具有非常相似的功能），那么您可以定位文本内容：

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

默认情况下Label将拉伸以填充其边界，这意味着标签的文本将居中。

score 7 · Accepted Answer

如果您可以不使用文本换行，我认为将 TextBlock 替换为 Label 是最简洁的方法。否则，请遵循其他有效答案之一。

<Label Content="Some Text" VerticalAlignment="Center"/>

score 3 · Accepted Answer

对我来说，VerticalAlignment="Center"解决了这个问题。
这可能是因为它TextBlock被包裹在一个网格中，但实际上 wpf 中的所有内容也是如此。

score 2 · Accepted Answer

就我而言，我这样做是为了使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"

score 1 · Accepted Answer

只是为了咯咯笑，试一试这个 XAML。它并不完美，因为它不是“对齐”，但它允许您调整段落内的文本对齐方式。

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

score 1 · Accepted Answer

如果你可以忽略TextBlock的高度，你最好使用这个：

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

score 1 · Accepted Answer

我发现修改文本框样式（即：）controltemplate然后将PART_ContentHost垂直对齐方式修改为 Center 就可以了

score 0 · Accepted Answer

Vertically aligned single line TextBox.

To expand on the answer provided by @Orion Edwards, this is how you would do fully from code-behind (no styles set). Basically create a custom class that inherits from Border which has its Child set to a TextBox. The example below assumes that you only want a single line and that the border is a child of a Canvas. Also assumes you would need to adjust the MaxLength property of the TextBox based on the width of the Border. The example below also sets the cursor of the Border to mimic a Textbox by setting it to the type 'IBeam'. A margin of '3' is set so that the TextBox isn't absolutely aligned to the left of the border.

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);

Class:

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

score 0 · Accepted Answer

我发现我必须做的略有不同。我的问题是，如果我更改了字体大小，文本会在 TextBox 中向上移动，而不是留在底部，而其余的 TextBoxes 则在线。通过从上到下更改垂直对齐方式，我能够以编程方式将字体从 20 号更改为 14 号并返回，将文本的重力保持在底部并保持整洁。就是这样：

在此处输入图像描述

score 0 · Accepted Answer

我认为使用没有边框和背景的文本框作为到达中心对齐文本块的简单快捷方式是明智的

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

score 0 · Accepted Answer

我认为最好用一个Label(或TextBlock)变成一个Label，不能直接在边框控件中附加鼠标事件，最后附加在TextBlock中，这是我的建议：

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

score -1 · Accepted Answer

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

wpf - WPF TextBlock 中的文本垂直对齐

16 回答 16

Related

Reference