Text vertical alignment in WPF TextBlock

Question

How do I assign vertical center alignment to the text inside a TextBlock  I found TextAlignment property but it is for horizontal text alignment  How do I do it for vertical text alignment

User · Answer

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

User · Answer

I think is better to use a Label or TextBlock  into a Label  you can t attach a mouse event directly in the border control  finally it is attached in the TextBlock  this is my recomendation    lt Label      Height  32      VerticalContentAlignment  Center      HorizontalContentAlignment  Stretch      MouseLeftButtonUp  MenuItem MouseLeftButtonUp  gt       lt TextBlock Padding  32 0 10 0  gt          Label with click event      lt  TextBlock gt   lt  Label gt

User · Answer

If you can overlook the height of TextBlock  it s better for you to use this    lt TextBlock Height   Binding   Text  Your text  TextWrapping  Wrap  VerticalAlignment  Center  Width  28   gt

User · Answer

In my case  I did this to make the TextBlock display nicer    lt Border BorderThickness  3  BorderBrush  Yellow  CornerRadius  10  Padding  2      HorizontalAlignment  Center  VerticalAlignment  Center  Height  30  Width  150  gt           lt TextBlock FontSize  20  Height  23  HorizontalAlignment  Left  Margin  0 0 0 -5  Text    VerticalAlignment  Top  Width  141  Background  White    gt   lt  Border gt    The trick to make the text further from the bottom is to set  Margin  0 0 0 -5

User · Answer

For me  VerticalAlignment  Center  fixes this problem  This could be because the TextBlockis wrapped in a grid  but then so is practically everything in wpf

User · Answer

You can see my blog post  You can set custom height of Textblock from codebehind  For setting custom height you need to set it inside in a border or stackpanel  http   ciintelligence blogspot com 2011 02 wpf-textblock-vertical-alignment-with html

User · Answer

If you can do without the text wrapping  I think that replacing the TextBlock with a Label is the most succinct way to do this  Otherwise follow one of the other valid answers    lt Label Content  Some Text  VerticalAlignment  Center   gt

User · Answer

Just for giggles  give this XAML a whirl  It isn t perfect as it is not an  alignment  but it allows you to adjust text alignment within a paragraph    lt TextBlock gt       lt TextBlock BaselineOffset  30  gt One lt  TextBlock gt       lt TextBlock BaselineOffset  20  gt Two lt  TextBlock gt         lt Run gt Three lt  Run gt                   lt Run BaselineAlignment  Subscript  gt Four lt  Run gt      lt  TextBlock gt

User · Answer

The TextBlock doesn t support vertical text alignment   I work around this by wrapping the text block with a Grid and setting HorizontalAlignment  Stretch  and VerticalAlignment  Center    Like this    lt Grid gt       lt TextBlock          HorizontalAlignment  Stretch          VerticalAlignment  Center          Text  Your text    gt   lt  Grid gt

User · Answer

I think it s wise to use a textbox with no border and background as an easy and fast way to reach center aligned textblock   lt TextBox TextWrapping  Wrap  HorizontalContentAlignment  Center  VerticalContentAlignment  Center  Background   x Null   BorderBrush   x Null     gt

User · Answer

I found I had to do it slightly different   My problem was that if I changed the font size  the text would move up in the TextBox instead of stay on the bottom with the rest of TextBoxes on the line   By changing the vert alignment from top to bottom I was able to change the font programmatically from size 20 to size 14  amp  back  keeping text s gravity on the bottom and keeping things neat  Here s how

User · Answer

I ve found that modifying the textbox style  ie  controltemplate  and then modifying the PART ContentHost vertical alignment to Center will do the trick

User · Answer

A Textblock itself can t do vertical alignment  The best way to do this that I ve found is to put the textblock inside a border  so the border does the alignment for you    lt Border BorderBrush   x Null   Height  50  gt       lt TextBlock TextWrapping  Wrap  Text  Some Text  VerticalAlignment  Center   gt   lt  Border gt    Note  This is functionally equivalent to using a grid  it just depends how you want the controls to fit in with the rest of your layout as to which one is more suitable

User · Answer

TextBlock doesn t support vertical alignment of its content  If you must use TextBlock then you have to align it with respect to its parent   However if you can use Label instead  and they do have very similar functionality  then you can position the text content    lt Label VerticalContentAlignment  Center  HorizontalContentAlignment  Center  gt     I am centred text   lt  Label gt    The Label will stretch to fill its bounds by default  meaning the label s text will be centred

User · Answer

lt TextBox AcceptsReturn  True              TextWrapping  Wrap               VerticalContentAlignment  Top   gt     lt  TextBox gt

User · Answer

You can use label instead of textblock    lt Label Content  Hello  World   gt       lt Label LayoutTransform gt           lt RotateTransform Angle  270   gt       lt  Label LayoutTransform gt   lt  Label gt

User · Answer

While Orion Edwards Answer works for any situation  it may be a pain to add the border and set the properties of the border every time you want to do this  Another quick way is to set the padding of the text block    lt TextBlock Height  22  Padding  3    gt

[wpf] Text vertical alignment in WPF TextBlock

Examples related to wpf

Examples related to vertical-alignment

Examples related to textblock