WPF TextBlock 中的文本垂直对齐答案

【问题标题】：Text vertical alignment in WPF TextBlockWPF TextBlock 中的文本垂直对齐
【发布时间】：2010-12-02 06:36:58
【问题描述】：

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

【问题讨论】：

@shr and others ：请注意 TextAlignment 只影响水平对齐，而不是 vertical 对齐（如问题所指）。

【解决方案1】：

文本块本身不能垂直对齐

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

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

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

【讨论】：

+1 必须设置边框高度才能使垂直对齐生效。
另外，TextBlock 不能指定高度，否则它不会垂直居中。
@gav - TextAlignment 只做水平对齐...问题是关于垂直对齐
@TimLloyd - 我不确定这是否总是正确的。我已经完成了这个设置，边框的高度为“Auto”，并且工作正常。它位于带有星号行高（以及行中的其他内容）的网格单元格中。

【解决方案2】：

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

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

【讨论】：

我认为这是最精彩的答案。
这只有在字体大小为 16px 时才有效，不是吗！？
接受的答案将正确地垂直对齐 TextBox 的实际边框，但它似乎对其中的实际文本没有影响......我很确定这是 OP 的意图.该解决方案代替了适当的 TextVerticalAlignment 属性并得到了我的支持。 :)
块内的动态内容怎么样，2或5行不需要不同的填充，10pt和24pt字体也是如此

【解决方案3】：

TextBlock 不支持垂直文本对齐。

我通过使用 Grid 包裹文本块并设置 HorizontalAlignment="Stretch" 和 VerticalAlignment="Center" 来解决此问题。

像这样：

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

【讨论】：

+1 甚至不需要为网格设置高度，就像基于边框的方法一样。
我发现这种方法最适合我。我通过在Ellipse 内的Ellipse 上覆盖TextBlock 创建动态指示灯。无需绑定我的宽度和高度属性或做任何棘手的事情。

【解决方案4】：

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

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

【讨论】：

很好，标签有 VerticalContentAlignment。问候。 +1
不清楚 OP 是否需要使用 TextBlock 或可以使用标签。使用标签可以满足我的需要。 +1
这回答了如何生成垂直文本的问题，而不是如何应用垂直对齐！
这个问题正在meta上讨论：meta.stackoverflow.com/questions/305572/…

【解决方案5】：

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

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

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

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

【讨论】：

对我来说，Textblock 问题的唯一合理解决方案。感谢您的提示！

【解决方案6】：

如果您可以不用text wrapping，我认为用标签替换TextBlock 是最简洁的方法。否则，请遵循其他有效答案之一。

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

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

我发现修改文本框样式（即：controltemplate）然后将 PART_ContentHost 垂直对齐方式修改为 Center 即可解决问题

【讨论】：

OP 正在询问 TextBlocks。他们没有 ControlTemplates。

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

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

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

【讨论】：

【解决方案12】：

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

【讨论】：

【解决方案13】：

为了扩展@Orion Edwards 提供的答案，这就是您完全从代码隐藏（未设置样式）中完成的方式。基本上创建一个继承自 Border 的自定义类，其 Child 设置为 TextBox。下面的示例假设您只需要一条线，并且边框是 Canvas 的子项。还假设您需要根据边框的宽度调整 TextBox 的 MaxLength 属性。下面的示例还将边框的光标设置为“IBeam”类型，以模仿文本框。设置了 '3' 的边距，以便 TextBox 不会绝对对齐到边框的左侧。

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

【讨论】：

【解决方案14】：

我觉得还是用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>

【讨论】：

【解决方案15】：

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

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

【讨论】：

【解决方案16】：

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

【讨论】：

问题是针对TextBlock，而不是TextBox。 -1