当文本变为粗体时防止内容调整大小答案

【问题标题】：Prevent content from resizing when text becomes bold当文本变为粗体时防止内容调整大小
【发布时间】：2018-09-28 09:42:40
【问题描述】：

在我的应用中，我有一个类似于 Windows 应用商店应用的选项卡式布局 (PivotHeaderItem)。与 Windows 应用商店应用程序类似，我已将 Selected 选项卡的文本设置为粗体。 但是，当文本变为粗体时，项目的宽度会变得稍大，导致其他选项卡略有偏移；我想防止这种情况发生。

我正在使用我自己的FormsPivot.HeaderTemplate，它在这里（在我的自定义TabbedPageRenderer 中）：

private Windows.UI.Xaml.DataTemplate GetStyledHeaderTemplateDesktop(TabbedPage element)
{
    var sb = new StringBuilder();

    sb.Append("<DataTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"");
    sb.Append(" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\">");
    sb.Append("<TextBlock Text=\"{Binding Title}\" Padding=\"12 0 12 0\" FontFamily=\"{ThemeResource ContentControlThemeFontFamily}\" FontSize=\"16\" />");
    sb.Append("</DataTemplate>");

    return (Windows.UI.Xaml.DataTemplate)XamlReader.Load(sb.ToString());
}

至于我是如何将文字设置为粗体的，在我的UWP项目的App.xaml文件中，我为PivotHeaderItem添加了默认样式，然后在VisualState的Storyboard中添加了如下代码为Selected、SelectedPressed 和 SelectedHovered 状态：

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
   Storyboard.TargetProperty="FontWeight" >
    <DiscreteObjectKeyFrame KeyTime="0" Value="SemiBold" />
</ObjectAnimationUsingKeyFrames>

【问题讨论】：

标签： xaml xamarin.forms uwp

【解决方案1】：

但是，当文本变为粗体时，项目的宽度会稍微变大，导致其他选项卡略有偏移；我想防止这种情况发生。

为避免调整项目的宽度，您可以为PivotHeaderItem 的默认样式中的ContentPresenter 指定一个固定的Width 以包含标题项目内容。

<ContentPresenter x:Name="ContentPresenter"  Width="96"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
FontSize="{TemplateBinding FontSize}"
FontFamily="{TemplateBinding FontFamily}"
FontWeight="{TemplateBinding FontWeight}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
OpticalMarginAlignment="TrimSideBearings" />

类似的原理，你也可以给一个边框来包含ContentPresenter，然后用一个合适的Width来配置边框。

<Border BorderBrush="Red" BorderThickness="5" Width="96" >
    <ContentPresenter x:Name="ContentPresenter"  
    Content="{TemplateBinding Content}"
    ContentTemplate="{TemplateBinding ContentTemplate}"
    FontSize="{TemplateBinding FontSize}"
    FontFamily="{TemplateBinding FontFamily}"
    FontWeight="{TemplateBinding FontWeight}"
    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
    OpticalMarginAlignment="TrimSideBearings" />
</Border>

【讨论】：

【解决方案2】：

Breeze Liu - MSFT 的解决方案有效，但我不想指定固定宽度（在 OP 中忘了提及）。

我决定更新HeaderItemTemplate 以包含两个TextBlock 对象；一个用于从粗体/非粗体更改的文本，另一个具有相同的文本，但始终为粗体，并且不透明度为 0。我将它们放入网格中，以便 TextBlocks 位于顶部彼此的。因为下面不可见的(Opacity = 0)TextBlock总是加粗的，所以可见的TextBlock变为粗体时宽度不会改变。有点hacky，但它完成了工作......

private Windows.UI.Xaml.DataTemplate GetStyledHeaderTemplateDesktop(TabbedPage element)
{
    var sb = new StringBuilder();

    sb.Append("<DataTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"");
    sb.Append(" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\">");
    sb.Append("<TextBlock Text=\"{Binding Title}\" Padding=\"12 0 12 0\" FontFamily=\"{ThemeResource ContentControlThemeFontFamily}\" FontSize=\"16\" />");
    sb.Append("<TextBlock Text=\"{Binding Title}\" Padding=\"12 0 12 0\" FontFamily=\"{ThemeResource ContentControlThemeFontFamily}\" FontSize=\"16\" FontWeight=\"SemiBold\" Opacity=\"0\" />");
    sb.Append("</DataTemplate>");

    return (Windows.UI.Xaml.DataTemplate)XamlReader.Load(sb.ToString());
}

【讨论】：