将边框元素中的TextBlock文本居中

时间:2011-11-17 23:09:16

标签: windows-phone-7 silverlight-4.0 border textblock

我正在玩Silverlight - 特别是用于Windows手机的Silverlight。我想在border元素中有一个textblock。我希望textblock填满整个border元素。我还希望文本块内的文本在文本块中居中 - 垂直和水平。

我遇到的问题是,如果我将文本块的水平和垂直对齐设置为居中,则文本块会调整为文本大小,因此文本块不会填满边框内的所有可用空间。如果我将textblock的水平和垂直对齐属性设置为拉伸,我会扩展文本块以填充边框,但文本块文本不再居中。我想我可以使用填充来使文本居中,但这并不能给出精确的结果,因为文本的长度可能会有所不同。

我想首先在边框内放置文本块的原因是因为Silverlight for Windows Phone不提供textblock的背景属性。我使用边框来提供背景颜色。

简而言之,当文本块位于边框元素内且文本块必须拉伸以填充边框时,是否有任何方法可以将文本居中于文本块中。

以下是我到目前为止的代码。

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

2 个答案:

答案 0 :(得分:4)

您无需居中或伸展任何东西。我假设您最终会将此Border添加到Grid,因此只需将Grid的列和行设置为自动,Border将根据大小自行调整大小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>

<强>更新

我不明白为什么会有人贬低这一点。这绝对是向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)或为{{1}添加填充}}

答案 1 :(得分:1)

如果中心对齐不适合您,并且您想要拉伸文本以占用更多空间,您可以使用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>