CODEWITHSUNDEEP
windows-phone-7silverlight-4.0bordertextblock
Rajib
Rajib

Reputation: 58

Centering TextBlock text inside border element

I am playing around with silverlight - specifically Silverlight for windows phone. I would like to have a textblock inside a border element. I want the textblock to fill up the entire border element. I would also like the text inside the textblock to the centered within the textblock - both vertical and horizontal.

The problem that I am encountering is that if I set the horizontal and vertical alignment of the textblock to center, then the textblock resizes to the size of the text, hence the textblock does not fill up all the available room inside the border. If I set the horizontal and vertical alignment properties of textblock to stretch, I get the textblock to expand to fill up the border, but the textblock text is not centered anymore. I think I can use padding to center the text, but this does not give a precise result as the length of the text can vary.

The reason why I would like to have the textblock within a border in the first place is because Silverlight for Windows Phone does not provide a background property for textblock. I use the border to provide a background color.

In short, is there any way to center the text in a textblock, when the textblock is inside a border element and the textblock must stretch to fill the border.

Below is the code that I have so far.

<Border BorderBrush="Red" BorderThickness="2" Grid.Row="0" Grid.Column="0">
    <TextBlock Name="textBlockA1" Text="Center Me!" HorizontalAlignment="Stretch"            
        VerticalAlignment="Stretch"/>
</Border>

Upvotes: 3

Views: 5935

Answers (2)

Justin XL
Justin XL

Reputation: 39006

You don't need to center or stretch anything. I assume you will eventually put this Border to a Grid, so just set the Grid's column and row to auto and the Border will resize itself based on the size of the TextBlock.

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Border BorderBrush="Red" BorderThickness="2"> 
            <TextBlock x:Name="textBlockA1" Text="Center Me!"/> 
        </Border> 
    </Grid>

UPDATE

I don't understand why someone would downvoted this. This is definitely a good way to add a Background color to a TextBlock. It's like you are filling the Grid's cells with the Border's background color. See below example.

enter image description here

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="Auto"/> 
            <ColumnDefinition Width="12"/>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition/> 
        </Grid.ColumnDefinitions> 
        <Grid.RowDefinitions> 
            <RowDefinition Height="Auto"/> 
            <RowDefinition Height="12"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="12" />
            <RowDefinition Height="Auto"/>
            <RowDefinition/> 
        </Grid.RowDefinitions> 
        <Border Background="#FFBC7C0A">  
            <TextBlock x:Name="textBlockA1" Text="Center Me!" Foreground="White" Style="{StaticResource PhoneTextNormalStyle}"/>  
        </Border>
        <Border Background="#FFBC7C0A" Grid.Row="2">  
            <TextBlock x:Name="textBlockA2" Text="Center Me!" Foreground="White" Style="{StaticResource PhoneTextNormalStyle}"/>  
        </Border>
        <Border Background="#FFBC7C0A" Grid.Row="2" Grid.Column="2">  
            <TextBlock x:Name="textBlockA3" Text="This is a longer text" Foreground="White" Style="{StaticResource PhoneTextNormalStyle}"/>  
        </Border>
        <Border Background="#FFBC7C0A" Grid.Column="3">  
            <TextBlock x:Name="textBlockA4" Text="Short" Foreground="White" Height="27" VerticalAlignment="Top" Style="{StaticResource PhoneTextNormalStyle}"/>  
        </Border>
        <Border Background="#FFBC7C0A" Grid.ColumnSpan="3" Grid.Row="4" HorizontalAlignment="Left">  
            <TextBlock x:Name="textBlockA5" Text="Center Me!" Foreground="White" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Style="{StaticResource PhoneTextNormalStyle}"/>  
        </Border>  
    </Grid>

Also, if you want a left or right margin on the TextBlock you can either apply a style to the TextBlock (e.g. PhoneTextNormalStyle) or give a padding to the Border.

Upvotes: 4

Filip Skakun
Filip Skakun

Reputation: 31724

If center alignment does not do it for you and you want to stretch the text to use up more space you can either use the FontSize property and choose a bigger font or use a ViewBox:

<Border
    BorderBrush="Red"
    BorderThickness="2"
    Grid.Row="0"
    Grid.Column="0">
    <Viewbox>
        <TextBlock
            Name="textBlockA1"
            Text="Center Me!"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch" />
    </Viewbox>
</Border>

Upvotes: 1

Related Questions