Центрирование текста TextBlock внутри пограничного элемента - PullRequest
Новая
       25

Центрирование текста TextBlock внутри пограничного элемента

3 голосов
/ 18 ноября 2011

Я играю с Silverlight - особенно Silverlight для Windows Phone. Я хотел бы иметь текстовый блок внутри элемента границы. Я хочу, чтобы текстовый блок заполнил весь элемент границы. Я также хотел бы, чтобы текст внутри текстового блока располагался по центру внутри текстового блока - как по вертикали, так и по горизонтали.

Проблема, с которой я сталкиваюсь, состоит в том, что, если я устанавливаю горизонтальное и вертикальное выравнивание текстового блока по центру, то текстовый блок изменяется в соответствии с размером текста, поэтому текстовый блок не заполняет все доступное пространство внутри границы. , Если я установлю свойства горизонтального и вертикального выравнивания текстового блока растягивать, я получу расширение текстового блока, чтобы заполнить границу, но текст текстового блока больше не центрируется. Я думаю, что я могу использовать отступы для центрирования текста, но это не дает точного результата, так как длина текста может варьироваться.

Причина, по которой я хотел бы, чтобы текстовый блок был внутри границы, заключается в том, что Silverlight для Windows Phone не предоставляет свойства фона для текстового блока. Я использую границу, чтобы обеспечить цвет фона.

Короче говоря, есть ли способ центрировать текст в текстовом блоке, когда текстовый блок находится внутри элемента границы, и текстовый блок должен растягиваться, чтобы заполнить границу.

Ниже приведен код, который у меня есть. 

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

Ответы [ 2 ]

4 голосов
/ 18 ноября 2011

Вам не нужно ничего центрировать или растягивать.Я предполагаю, что вы в конечном итоге установите Border в Grid, поэтому просто установите для столбца и строки Grid значение auto, и Border изменит свой размер в зависимости от размера TextBlock. * 1006.* 

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

ОБНОВЛЕНИЕ

Я не понимаю, почему кто-то отказался от этого.Это, безусловно, хороший способ добавить Background цвет к TextBlock.Как будто вы заполняете ячейки Grid цветом фона Border.См. Пример ниже.

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>

Кроме того, если вы хотите использовать левое или правое поле для TextBlock, вы можете применить стиль к TextBlock (например,PhoneTextNormalStyle) или добавьте отступ к Border.

1 голос
/ 18 ноября 2011

Если выравнивание по центру не делает этого за вас, и вы хотите растянуть текст, чтобы занять больше места, вы можете либо использовать свойство FontSize и выбрать больший шрифт, либо использовать 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>
...