none
Text alignment - label

    Question

  • I have a label for which I want to center the text. I can set the HorizontalCenterAlignment property in XAML, but the Text | Paragraph | Text Alignment property in Blend isn't enabled and doesn't allow me to do the same. What does this property control if not HorizontalCenterAlignment? (I'm using Expression Blend Preview for .NET 4.)
    • Moved by Anna Ullrich Tuesday, January 12, 2010 12:35 AM wrong forum (From:Expression Studio)
    Thursday, January 07, 2010 5:40 PM

Answers

  • The item in question is a Label. The property I specify in XAML to center the text is HorizontalContentAlignment. The question is why Blend doesn't provide the ability to center the text from the Properties page. There's a property there in the Paragraph tab of the Text pane called "Text alignment", but it doesn't do anything.

    The centering text option on the Properties page for text directly sets the "TextAlignment" property for controls that support it. Since this particular control is not a TextBlock, and is not a "text" control the property does not have meaning.

    The Label is a content control, which means it can contain any kind of UIElement, not just text, thus no textalignment and they provide the horizontalcontentaligment property. The text properties option for text alignment is grayed out in Blend because its just a coincendence that you used text in your label, you could have nested a stackpanel or a grid or an image, and textalignment would have no meaning, thus grayed out, etc.

    For example you could have a label like this with no text, but HorizontalContentAlignment="Center" will cause the two colored bars to be centered in the Label which is wider than its contents.
      <Label VerticalAlignment="Top" Width="200">
                <StackPanel>
                    <Rectangle Fill="green" Width="100" Height="30" />
                    <Rectangle Fill="blue" Width="100" Height="30" />
                </StackPanel>
            </Label>

    If you hit the down arrow on the Layout property group in Blend you will see more options, including the HorizontalContentAlignment as a list of buttons |==   =|=   ==|   |==| etc.

    What I think is happening is that maybe your Label is only wide enough for the text you specified, so maybe the text is being centered, just there is no space for that to appear the way you expect. Check to see if you have specified a smaller width or if the configuration of the layout container is auto-sizing it to be as small as the contained content.
    • Marked as answer by Servant Monday, January 18, 2010 6:46 PM
    Wednesday, January 13, 2010 3:56 PM

All replies

  • I'm moving your post to the Expression BLend forum.
    http://blogs.msdn.com/anna
    Tuesday, January 12, 2010 12:35 AM
  • This should work:

    <TextBlock TextAlignment="Center" Text="Foo"/>

    You said "label", but didnt specify if you meant the TextBlock control or some other type of label. Note that your text wont "center" unless the textblock is either fixed in width to be wider than the text by using the width="" property, or by being auto-sized by its containers layout rules to be wider than the text it contains, etc.

    The above example assumes it is in a full size Grid, which means it defaults to full width and hieght of the parent, so the text is centered in the TextBlock horizontally, but not vertically.

    This was in Expression 3, maybe there is a defect in 4.

    Tuesday, January 12, 2010 10:11 PM
  • The item in question is a Label. The property I specify in XAML to center the text is HorizontalContentAlignment. The question is why Blend doesn't provide the ability to center the text from the Properties page. There's a property there in the Paragraph tab of the Text pane called "Text alignment", but it doesn't do anything.
    Tuesday, January 12, 2010 11:26 PM
  • The item in question is a Label. The property I specify in XAML to center the text is HorizontalContentAlignment. The question is why Blend doesn't provide the ability to center the text from the Properties page. There's a property there in the Paragraph tab of the Text pane called "Text alignment", but it doesn't do anything.

    The centering text option on the Properties page for text directly sets the "TextAlignment" property for controls that support it. Since this particular control is not a TextBlock, and is not a "text" control the property does not have meaning.

    The Label is a content control, which means it can contain any kind of UIElement, not just text, thus no textalignment and they provide the horizontalcontentaligment property. The text properties option for text alignment is grayed out in Blend because its just a coincendence that you used text in your label, you could have nested a stackpanel or a grid or an image, and textalignment would have no meaning, thus grayed out, etc.

    For example you could have a label like this with no text, but HorizontalContentAlignment="Center" will cause the two colored bars to be centered in the Label which is wider than its contents.
      <Label VerticalAlignment="Top" Width="200">
                <StackPanel>
                    <Rectangle Fill="green" Width="100" Height="30" />
                    <Rectangle Fill="blue" Width="100" Height="30" />
                </StackPanel>
            </Label>

    If you hit the down arrow on the Layout property group in Blend you will see more options, including the HorizontalContentAlignment as a list of buttons |==   =|=   ==|   |==| etc.

    What I think is happening is that maybe your Label is only wide enough for the text you specified, so maybe the text is being centered, just there is no space for that to appear the way you expect. Check to see if you have specified a smaller width or if the configuration of the layout container is auto-sizing it to be as small as the contained content.
    • Marked as answer by Servant Monday, January 18, 2010 6:46 PM
    Wednesday, January 13, 2010 3:56 PM
  • I have a label for which I want to center the text. I can set the HorizontalCenterAlignment property in XAML, but the Text | Paragraph | Text Alignment property in Blend isn't enabled and doesn't allow me to do the same. What does this property control if not HorizontalCenterAlignment? (I'm using Expression Blend Preview for .NET 4.)

    For wpf xaml forms in framework 3.5 use this

    <TextBox HorizontalContentAlignment="Center" />

     

    this should work.. Worked for me.. Nice and easy..

     

    Sunday, July 25, 2010 2:09 PM