[XAML][WPF] Grid에 포함된 TextBlock 가운데 정렬이 되지 않는 이유

기본기를 숙련하지 않아 생긴 일이지만 정리겸 포스팅해본다.

ControlTemplate을 이용하여 새로운 Button을 만들려고 했다.

 

먼저 요소 Visual Tree는 Grid > Border > TextBlock이다.

 

xaml 코드를 살펴보자

<!-- style -->
<Window.Resources>
	<Style TargetType="{x:Type Button}">
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type Button}">
					<Grid Background="Red">
						<Border Background="Yellow" Margin="5">
							<TextBlock 
								VerticalAlignment="Center"
								 HorizontalAlignment="Center"
								 Width="50" Height="50">
                                 
								<Run Text="{TemplateBinding Content}"/>
                                
							</TextBlock>
						</Border>
					</Grid>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
</Window.Resources>

<!-- app content -->
<Grid>

	<Border Width="100" Height="100">
		<Button Content="50"/>
	</Border>
</Grid>

 

왜 가운데로 정렬되지 않는가 ?

사실 TextBlock은 이미 가운데로 정렬된 상태이다.

자세하게 설명하자면 

TextBlock 자체는 VerticalAlignment, HorizontalAlignment 속성에 의해 가운데이지만

TextBlock에 포함된 Run(Text)가 가운데가 아닌 것이다.

VerticalAlignment, HorizontalAlignment 속성은 부모 레이아웃 안에서

어느 위치를 기준으로 자리를 차지하고 있을 건지에 대한 설정을 의미한다.

 

 

그럼 이를 어떻게해서 가운데로 옮길 수 있을까?

간단하다.

사이즈를 지정하지 않으면 된다.

현재 TextBlock엔 W50 H50 사이즈가 지정되어 있다.

 

지정하지 않을 때 모습을 살펴보자. (Width, Height 속성 제거)

 

자 이제 TextBlock에 적용된 VerticalAlignment를 Center가 아닌 Bottom으로 변경해보겠다.

 

그럼 TextBlock 크기를 지정한 상태에서 가운데 정렬을 할 수 있을까?

아쉽게도 TextBlock은 글자(Text)를 정렬하는 TextAlignment 속성은 수평(Horizontal)만 지원하고 있다.

다시 말해 수직(Vertical) 정렬을 할 수 없다는 것이다.

 

Padding, Margin을 통해 TextVerticalAlignment 기능을 비슷하게 할 순 있지만, 정확하게 맞추긴 힘들다.

 

 

Grid 내부에 배치된 TextBlock은 기본적으로 Content가 Stretch 되어 Grid에 맞춰지는데

이때 자식 요소들은 우선 크기를 지정하지 않은 상태로 사용하는 것이 바람직한 사용법인거 같다.