Question

在我的应用中，我有一个与Windows应用商店应用类似的标签式布局（PivotHeaderItem）。与Windows应用商店应用类似，我已将选定选项卡的文本设置为粗体。 但是，当文字变为粗体时，项目的宽度会稍微变大，导致其他标签稍微移动;我想阻止这种情况发生。

我使用自己的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());
}

至于我如何将文本设置为Bold，在我的UWP项目的App.xaml文件中，我添加了PivotHeaderItem的默认样式，然后将以下代码添加到{ {1}} VisualState，Storyboard和Selected州的SelectedPressed：

SelectedHovered

Answer 1

但是，当文字变为粗体时，项目的宽度会稍微变大，导致其他标签稍微移动;我想防止这种情况发生。

要避免调整项目的宽度，您可以将ContentPresenter女巫设为PivotHeaderItem固定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>

Answer 2

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

我决定更新HeaderItemTemplate以包含两个TextBlock个对象;一个用于文本，将从粗体/非粗体更改，另一个用相同的文本更改，但始终为粗体，并且不透明度为0.我将它们放入网格中，以便TextBlock s坐下在彼此之上。由于下方的不可见（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());
}

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

2 个答案: