画面上部に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とImageとTextBlockためLeftとCenterとしてHorizontalAlignmentを設定し、それぞれ

<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つの^ST列（Grid.Column="0"）で<Image>を配置し、<TextBlock>であります列番号Grid.Column="1"）。必要に応じてImageとTexblockのアライメントをさらに変更することができます。

また、StackPanelは、方向を水平に設定しているときに子要素の水平方向の配置を常に上書きすることに注意してください。これは、グリッドを使用して、複数の行と列に分割する方が、このようなシナリオでは優れています。

---

編集： あなたはこのような何かに列の定義を変更することができ、非常に大きなテキストブロックがあるので：

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

を。これは、設定列の幅を持つ2つの部分にあなたのグリッドを分割します自動的に。

これが役に立ちます。