CODEWITHSUNDEEP
c#xamluwp
Paule Paul
Paule Paul

Reputation: 387

Align TextBlock in Button / StackPanel correctly

I try to align the TextBlocks to the left. The button should take the rest of the area (Up to the picture). How can I do this?

This is a UWP / C# App.

enter image description here

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid VerticalAlignment="Center" HorizontalAlignment="Left">

        <Button Background="Transparent" HorizontalAlignment="Stretch">
            <StackPanel HorizontalAlignment="Left">
                <TextBlock x:Name="TextBlock1" TextWrapping="Wrap" Text="Name1"/>
                <TextBlock x:Name="TextBlock2" TextWrapping="Wrap" Text="Name2" />
            </StackPanel>
        </Button>

    </Grid>

    <StackPanel Grid.Column="1" Grid.Row="0" HorizontalAlignment="Right">
        <Button Height="50" Width="50" Background="Transparent" Click="Button_Click">
            <Image x:Name="ImageFavorit" Source="/Assets/Stern/VGrau64.png"/>
        </Button>
    </StackPanel>
</Grid>

Upvotes: 0

Views: 215

Answers (1)

Salah Akbari
Salah Akbari

Reputation: 39976

Firstly you should replace your ColumnDefinitions to this:

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

And secondly remove HorizontalAlignment="Left" from your Grid then you can achieve to what you want:

<Grid VerticalAlignment="Center">
    <Button Background="Transparent" HorizontalAlignment="Stretch">
    ...

Also it seems that you need to set VerticalAlignment="Center" of your StackPanel too:

<StackPanel Grid.Column="1" Grid.Row="0"
            HorizontalAlignment="Right" VerticalAlignment="Center">

Update: Based on your comment that you want the text on the left side Set the HorizontalContentAlignment="Left" of the Button:

<Button Background="Transparent" HorizontalAlignment="Stretch" 
        HorizontalContentAlignment="Left">

Upvotes: 2

Related Questions