화면 상단에 TextBlock 및 이미지 정렬 - uwp

Question

화면 왼쪽 상단에 이미지를 배치하고 싶습니다. 이미지와 같은 선의 중심에 TextBlock이 배치됩니다. 화면 맨 위에는 왼쪽에 이미지가 있고 가운데에는 TextBlock이 있어야합니다. 나는 아래와 같이 시도했다. 그러나 이미지와 TextBlock은 모두 중심에 정렬되어있는 것처럼 보입니다.

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Background="AliceBlue" VerticalAlignment="Top"> 
    <Image x:Name="icon_goback2" Source="Assets/icon_home.png" Margin="10,0,0,0" Height="50" Width="50" /> 
    <TextBlock Text="Your Page" HorizontalAlignment="Center" FontWeight="Bold" Foreground="White" FontSize="70" /> 
</StackPanel> 

Answer 1

그냥 사용하십시오 Grid 및

<Grid VerticalAlignment="Top"> 
    <Image HorizontalAlignment="Left"/> 
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"/> 
</Grid> 

Answer 2

다음과 같은 코드를 시도 할 수 있습니다 :

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition/> 
     <ColumnDefinition/> 
     <ColumnDefinition/> 
    </Grid.ColumnDefinitions> 
    <Image x:Name="icon_goback2" Source="Assets/icon_home.png" Margin="10,0,0,0" Height="50" Width="50"/> 
    <TextBlock Grid.Column="1" Text="Your Page" HorizontalAlignment="Center" FontWeight="Bold" Foreground="White" FontSize="70"/> 
</Grid> 

할 것입니다이 코드는 3 열로 그리드를 분할하고 1 ^일 열에서 <Image> (Grid.Column="0")와 <TextBlock>에 배치 무엇을 (Grid.Column="1"). 필요한 경우 Image와 Texblock의 정렬을 추가로 변경할 수 있습니다.

또한, 방향을 수평으로 설정할 때 StackPanel은 항상 자식 요소의 수평 정렬을 무시합니다. 그리드를 사용하여 여러 행과 열로 나누는 것이 이와 같은 시나리오에서 더 좋습니다.

---

편집 : 당신은 당신이 이런 일에 열 정의를 변경할 수 있습니다 매우 큰 TextBlock을 가지고 있기 때문에이 이 : 이것은 두 부분으로 그리드를 나눕니다

<Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto"/> 
     <ColumnDefinition Width="Auto"/>   
</Grid.ColumnDefinitions> 

를 열 설정 폭이 자동으로

희망이 도움이됩니다.