WPF TextBlock의 텍스트 세로 정렬


228

TextBlock 내부의 텍스트에 세로 가운데 맞춤을 어떻게 할당합니까? TextAlignment 속성을 찾았지만 가로 텍스트 맞춤입니다. 세로 텍스트 정렬을 위해 어떻게합니까?


@ shr 및 기타 : 세로 정렬이 TextAlignment아닌 가로 정렬에만 영향을 미칩니다 (질문과 같이).
Drew Noakes

답변:


284

텍스트 블록 자체는 수직 정렬을 할 수 없습니다

내가 찾은 가장 좋은 방법은 텍스트 블록을 테두리 안에 넣는 것이므로 테두리가 정렬됩니다.

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

참고 : 이것은 그리드를 사용하는 것과 기능적으로 동일하며, 컨트롤이 나머지 레이아웃에 맞게 조정하는 방법에 따라 다릅니다.


22
+1 세로 정렬을 적용하려면 테두리의 높이를 설정해야합니다.
Tim Lloyd

21
또한 TextBlock은 높이를 지정할 수 없거나 세로 중앙에 있지 않습니다.
pearcewg

20
@gav-TextAlignment는 가로 정렬 만합니다. 문제는 세로 정렬에 관한 것입니다.
Orion Edwards

@TimLloyd-항상 사실인지 잘 모르겠습니다. 이 설정이 있고 테두리의 높이가 "자동"이며 제대로 작동합니다. 행 높이가 별표로 표시된 그리드 셀에 있습니다 (및 행의 다른 것).
밥 Sammers

97

Orion Edwards Answer 는 어떤 상황에서도 작동 하지만 , 원할 때마다 테두리를 추가하고 테두리 속성을 설정하기가 어려울 수 있습니다. 또 다른 빠른 방법은 텍스트 블록의 안쪽 여백을 설정하는 것입니다.

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

11
나는 이것이 가장 훌륭한 대답이라고 생각합니다.
Boppity Bop

1
글꼴 크기가 16px가 아닌 경우에만 작동합니다!?
C4d

1
허용 된 답변은 TextBox의 실제 테두리를 올바르게 세로로 정렬하지만 실제 텍스트에는 영향을 미치지 않는 것으로 보입니다 ... OP의 의도는 확실합니다. 이 솔루션은 적절한 TextVerticalAlignment 속성 대신 작동하며 내 의견을 얻습니다. :)
Trekkie

블록 내 동적 내용은 2 줄 또는 5 줄이 아닌 다른 패딩, 10pt와 24pt 글꼴이 필요하지 않습니다
Reahreic

57

TextBlock은 세로 텍스트 정렬을 지원하지 않습니다.

텍스트 블록을 그리드로 감싸고 HorizontalAlignment = "Stretch"및 VerticalAlignment = "Center"를 설정하여이 문제를 해결합니다.

이처럼 :

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

+1 경계 기반 접근 방식과 마찬가지로 그리드의 높이를 설정할 필요조차 없습니다.
Efran Cobisi

이 방법이 가장 효과적이라는 것을 알았습니다. 내부 에 오버레이 TextBlock하여 동적 표시등을 만들고 있습니다. 내 width 및 height 속성을 바인딩하거나 까다로운 작업을 수행 할 필요가 없습니다. EllipseGrid
paddy

17

텍스트 블록 대신 레이블을 사용할 수 있습니다.

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

3
레이블에는 VerticalContentAlignment가 있습니다. eat +1
Ignacio Soler Garcia

3
OP가 TextBlock을 사용해야하는지 또는 레이블로 벗어날 수 있는지 확실하지 않습니다. 라벨을 사용하면 내가 필요한 것에 효과가있었습니다. +1
Steve Kalemkiewicz

19
이것은 수직 정렬을 적용하는 방법이 아니라 수직 텍스트를 생성하는 방법에 대한 질문에 답합니다!
Sebastian Negraszus

26
이 질문은 메타에 논의되고 : meta.stackoverflow.com/questions/305572/...
NathanOliver

6

텍스트 줄 바꿈 없이 할 수 있다면 TextBlock을 Label로 바꾸는 것이 가장 간결한 방법이라고 생각합니다. 그렇지 않으면 다른 유효한 답변 중 하나를 따르십시오.

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

6

TextBlock내용의 수직 정렬을 지원하지 않습니다. 사용해야하는 경우 TextBlock부모를 기준으로 정렬 해야합니다 .

그러나 Label대신 사용할 수 있고 기능이 매우 유사한 경우 텍스트 내용을 배치 할 수 있습니다 .

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

Label기본적으로 경계를 채우도록 확장되므로 레이블의 텍스트가 가운데에 배치됩니다.


3

나를 VerticalAlignment="Center"위해이 문제를 해결하십시오.
이것은 TextBlock그리드에 싸여 있기 때문에 가능 하지만 실제로 wpf의 모든 것입니다.


1

텍스트 상자 스타일 (예 :) controltemplate을 수정 한 다음 PART_ContentHost세로 정렬을 가운데 로 수정 하면 트릭이 수행됩니다.


OP는 TextBlocks에 대해 묻고 있습니다. 그들은 ControlTemplates가 없습니다.
ANeves

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"


0

나는 약간 다르게해야한다는 것을 알았습니다. 내 문제는 글꼴 크기를 변경하면 텍스트가 나머지 텍스트 상자와 함께 맨 아래에 머물지 않고 텍스트 상자에서 위로 이동한다는 것입니다. vert 정렬을 위에서 아래로 변경하여 글꼴을 크기 20에서 14로 다시 변경하여 텍스트의 중력을 맨 아래에 유지하고 물건을 깔끔하게 유지했습니다. 방법은 다음과 같습니다.

여기에 이미지 설명을 입력하십시오


0

한 줄짜리 TextBox를 세로로 정렬합니다.

@Orion Edwards가 제공하는 답변을 확장하기 위해 코드 숨김 (스타일 설정 없음)에서 완전히 수행하는 방법입니다. 기본적으로 Child에서 TextBox로 설정된 Border에서 상속되는 사용자 정의 클래스를 만듭니다. 아래 예제에서는 한 줄만 원하고 테두리는 Canvas의 자식이라고 가정합니다. 또한 테두리 너비를 기준으로 TextBox의 MaxLength 속성을 조정해야한다고 가정합니다. 아래 예제는 또한 'IBeam'유형으로 설정하여 텍스트 상자를 모방하도록 테두리 커서를 설정합니다. TextBox가 테두리의 왼쪽에 완전히 정렬되지 않도록 여백 '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 (또는 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>

0

테두리와 배경이없는 텍스트 상자를 중앙 정렬 텍스트 블록에 쉽고 빠르게 도달하는 방법으로 사용하는 것이 현명하다고 생각합니다.

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

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.