Paule Paul Paule Paul - 1 month ago 20
C# Question

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>

Answer

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