2009-09-29 298 views
179

如何將垂直中心對齊指定給TextBlock內的文本?我發現TextAlignment屬性,但它是用於水平文本對齊。我如何做垂直文本對齊?WPF TextBlock中的文本垂直對齊

+0

@shr和其他人:請注意'TextAlignment'隻影響水平對齊,而不影響垂直對齊(如問題所指)。 – 2015-04-24 15:46:29

回答

223

一個TextBlock本身不能做垂直對齊

要做到這一點,我已經發現的是把文本塊邊界內的最佳方式,所以邊界爲你做準備。

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

注:這是功能上等同於使用一個網格,它只是取決於你想怎麼控制,以配合您的佈局的其餘部分爲哪一個更適合

+18

+1必須設置邊框的高度才能使垂直對齊生效。 – 2010-12-24 18:04:40

+13

另外,TextBlock不能有指定的高度,或者它不會垂直居中。 – pearcewg 2010-12-31 21:53:10

+17

@gav - TextAlignment只能進行水平對齊...問題是關於垂直對齊 – 2012-04-11 20:39:02

46

TextBlock不支持垂直文本對齊。

我通過用網格包裝文本塊並設置Horizo​​ntalAlignment =「Stretch」和VerticalAlignment =「Center」來解決這個問題。

像這樣:

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

+1與基於邊界的方法一樣,甚至不需要爲網格設置高度。 – 2012-07-21 15:22:17

+0

我發現這種方法最適合我。我通過在'Grid'內的'Ellipse'上疊加'TextBlock'來創建動態指示燈。無需綁定我的寬度和高度屬性或做任何棘手的事情。 – paddy 2013-06-18 03:20:34

1

對於我來說,VerticalAlignment="Center"解決了這個問題。
這可能是因爲TextBlock被包裝在一個網格中,但在wpf中幾乎所有東西都是如此。

76

雖然Orion Edwards Answer適用於任何情況,但每次您想要添加邊框並設置邊框屬性可能會很痛苦。另一種快速方法是設置文本塊的填充:

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

我認爲這是最明智的答案。 – 2011-11-23 20:54:01

+1

我被找了!!!謝謝! – 2014-04-16 17:26:55

+1

只有在字體大小爲16px的情況下才能使用!? – C4u 2016-08-15 09:06:54

14

您可以使用標籤來代替文字塊的。

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

不錯,標籤有VerticalContentAlignment。 Greeeat。 +1 – 2012-06-15 17:42:33

+3

不清楚OP是否需要使用TextBlock或可以使用Label。使用標籤爲我所需要的工作。 +1 – 2013-08-02 17:58:44

+18

這回答瞭如何產生垂直文本的問題,而不是如何應用垂直對齊! – 2015-09-08 14:27:43

1

我發現,修改文本樣式(即:controltemplate),然後修改PART_ContentHost垂直對齊中心將做的伎倆

+0

OP是問關於TextBlocks。他們沒有ControlTemplates。 – ANeves 2016-07-12 16:37:52

1

只是爲了笑聲,給這個XAML一掄。它並不完美,因爲它不是「對齊」,但它允許您調整段落內的文本對齊方式。

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

如果可以俯瞰TextBlock的高度,這是更好地爲你使用這樣的:

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

就我而言,我這樣做是爲了使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

,我發現我不得不這樣做略有不同。我的問題是,如果我改變了字體大小,那麼文本會在文本框中向上移動,而不是停留在文本框其餘部分的底部。通過從上到下更改垂直對齊方式,我能夠以編程方式將字體從大小20更改爲大小14 &,將文本的重心保持在底部並保持整潔。具體方法如下:

enter image description here

1

Vertically aligned single line TextBox.

要由@Orion愛德華茲提供了答案擴大,這是怎麼了,你會完全從後臺代碼做(尚未設定樣式)。基本上創建一個自定義類,該類繼承自將其子設置爲TextBox的Border。下面的例子假設你只需要一行代碼,並且邊框是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

我認爲這是更好地使用標籤(或TextBlock的)到一個標籤,你不能直接在邊境控制連接鼠標事件,最後它被連接TextBlock中的,這是我recomendation:

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

如果你沒有做text wrapping,我認爲有一個標籤替換TextBlock的是做到這一點的最簡潔的方式。否則,請按照其他有效答案之一。

<Label Content="Some Text" VerticalAlignment="Center"/> 
0
<TextBox AcceptsReturn="True" 
      TextWrapping="Wrap" 
      VerticalContentAlignment="Top" > 
    </TextBox> 
+0

問題是'TextBlock',而不是'TextBox'。 -1 – KnorxThieus 2017-08-20 11:02:07

0

TextBlock不支持其內容的垂直對齊方式。如果您必須使用TextBlock,那麼您必須將其與其父項對齊。

但是如果你可以使用Label代替(和他們有很相似的功能),那麼你可以位置的文本內容:

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

Label將伸展在默認情況下,以填補其邊界,這意味着標籤的文字將居中。