windows-phone-7 - 将边框元素内的 TextBlock 文本居中

Question

我正在玩弄 silverlight - 特别是用于 Windows Phone 的 Silverlight。我想在边框元素内有一个文本 block 。我希望文本 block 填满整个边框元素。我还希望文本 block 内的文本在文本 block 内居中 - 垂直和水平。

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

首先我希望文本 block 位于边框内的原因是因为 Windows Phone 的 Silverlight 没有为文本 block 提供背景属性。我使用边框来提供背景颜色。

简而言之，当文本 block 位于边框元素内并且文本 block 必须拉伸(stretch)以填充边框时，是否有任何方法可以使文本 block 居中。

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

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

Answer 1

您不需要居中或拉伸(stretch)任何东西。我假设您最终会将此 Border 放入 Grid，因此只需将 Grid 的列和行设置为 auto 并将 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>

更新

我不明白为什么有人会对此投反对票。这绝对是向 TextBlock 添加 Background 颜色的好方法。这就像您用 Border 的背景色填充 Grid 的单元格。请参见下面的示例。

    <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 一个填充。