Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Align bottoms of text in controls

The following snippet:

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <StackPanel Orientation="Horizontal"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center">            
            <Label Content="Name:"/>
            <Label Content="Itzhak Perlman" FontSize="44"/>
        </StackPanel>
    </Grid>
</Window>

Renders the following:
alt text

Is there any way I can set in the Labels' styles so that their text bottoms should be aligned?
I have the same question with TextBlocks as well.

NOTE: since I've been struggling with this issue for a while, please post only certains answers that you know that work.
I already tried: VerticalAlignment, VerticalContentAlignment, Padding, Margin. Is there anything else I am not aware of?

I've read this post, but it doesn't talk about a scenario of different font size.

UPDATE: The problem is, that even Padding is set to 0 there is still an indeterminate space around the font, within the ContentPresenter area. this space varies on the font size. If I could control this space I would be in a better situation.

Thanks

like image 753
Shimmy Weitzhandler Avatar asked Jan 10 '10 03:01

Shimmy Weitzhandler


People also ask

How do you align text to the bottom of words?

On the Shape Format tab, click Format Pane. Click the Shape Options tab if it isn't already selected. , and then click Text Box. Choose Top, Middle, or Bottom from the Vertical alignment drop-down list.

How do you align text to the bottom in Illustrator?

Choose Type > Area Type Options . Choose an alignment option in the Align > Vertical drop-down. Alternatively, choose from the Align options in the Properties or Control panel. Top to vertically align text from the top of the frame.


2 Answers

Another fairly simple solution:

1) Use TextBlock controls instead of Labels. The reason being that TextBlock is lighter weight than Label - see http://joshsmithonwpf.wordpress.com/2007/07/04/differences-between-label-and-textblock/

2) Use the LineHeight and LineStackingStrategy = BlockLineHeight for your TextBlock style. This will align the two at their baseline easily.

<StackPanel Orientation="Horizontal"
            VerticalAlignment="Center"
            HorizontalAlignment="Center">
    <StackPanel.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="LineHeight" Value="44pt"/>
            <Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
        </Style>
    </StackPanel.Resources>            
    <TextBlock Text="Name:"/>
    <TextBlock Text="Itzhak Perlman" FontSize="44"/>
</StackPanel>
like image 191
TI82 Avatar answered Nov 16 '22 01:11

TI82


I really like the creative solutions that are presented here but I do think that in the long run (pun intended) we should use this:

<TextBlock>
   <Run FontSize="20">What</Run>
   <Run FontSize="36">ever</Run>
   <Run FontSize="12" FontWeight="Bold">FontSize</Run>
</TextBlock>

The only thing that is missing from the Run element is databinding of the Text property but that might be added sooner or later.

A Run will not fix the alignment of labels and their textboxes but for many simple situation the Run will do quite nicely.

like image 43
Erno de Weerd Avatar answered Nov 16 '22 03:11

Erno de Weerd