CODEWITHSUNDEEP
xamluwpuwp-xaml
nsds
nsds

Reputation: 981

Align a TextBlock and image in top of screen - uwp

I want to place an image at top left of screen. and a TextBlock at center of same line as image placed. Means at the top of screen there should be an image at left and a TextBlock at center. I tried like below. But both image and TextBlock are seems to be aligned at center.

<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>

Upvotes: 1

Views: 1055

Answers (2)

Pratyay
Pratyay

Reputation: 1301

You can try the following code :

<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>

What this code will do is divide your grid into 3 Columns and place the <Image> in the 1st Column (Grid.Column="0") and <TextBlock> in the 2nd Column (Grid.Column="1"). You can additionally change the alignment of Image and Texblock if you need to.

Also, it is good to note that StackPanel will always override the Horizontal alignment of the Child elements when you are setting its orientation as horizontal. This is the reason why using a grid and dividing it into multiple rows and columns is better in scenarios like this.

Edit : Since you have quite a large textblock you can change the column definitions to something like this :

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

This will divide your grid into 2 parts with the column widths set automatically.

Hope this helps.

Upvotes: 1

Vijay Nirmal
Vijay Nirmal

Reputation: 5837

Just use a Grid and set HorizontalAlignment as Left and Center for Image and TextBlock respectively

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

Upvotes: 1

Related Questions