Search code examples
c#wpfxamlexpression-blendstackpanel

How to align labels properly in a stack panel


I'm trying to achieve something like this:

enter image description here

As you can see there is a title "This is what I want" that is aligned with another label

Code that I wrote:

      <Grid Width="345" Height="445" Background="White">

            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <StackPanel Grid.Row="0" Orientation="Vertical" Margin="10">
                <Label Content="How to align this to the left:" />
                <StackPanel Grid.Row="1" Orientation="Horizontal" Background="#D9D9D9">
                    <Label Content="€" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center" />
                    <Label Content="256,00" FontSize="38" FontWeight="Bold" />
                </StackPanel>
            </StackPanel>

        </Grid>
</Grid>

And results of my code looks like this: enter image description here

As it is possible to notice, label is not aligned to the left, looks like there is some padding or something...

And also € sign is not on a right place, I tried to achieve this like it's on first image, but everything I tried with different types of aligns (horizontal, centered) did not work..

Thanks guys Cheers


Solution

  • Set the Padding of the Label to 0 or use a TextBlock. A TextBlock is more light-weight than a Label and it has no default Padding.

    And you can use the Margin property to move the €-sign up a bit:

    <StackPanel Grid.Row="0" Orientation="Vertical" Margin="10">
        <TextBlock Text="How to align this to the left:" />
        <StackPanel Grid.Row="1" Orientation="Horizontal" Background="#D9D9D9">
            <TextBlock Text="€" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Bottom"
                                Margin="0 0 3 5"/>
            <TextBlock Text="256,00" FontSize="38" FontWeight="Bold" />
        </StackPanel>
    </StackPanel>