带有样式/模板的未知 HyperlinkButton 边距/填充答案

【问题标题】：Unknown HyperlinkButton margin/padding with style/template带有样式/模板的未知 HyperlinkButton 边距/填充
【发布时间】：2016-07-06 08:22:34
【问题描述】：

我正在尝试将 html 转换为 xaml 并使用 this code as a starting point。我的应用是 Windows Phone 8.1 通用应用。除超链接外，此代码效果很好。看起来 HyperlingButton 有一些隐藏的边距或填充，我无法通过将其设置为 0 来修复它。

超链接用红色边框标记：

我的风格在这里：

    <Style TargetType="HyperlinkButton" x:Key="UnderlineHyperlinkButton">
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Margin" Value="0,0,0,0" />
        <Setter Property="Padding" Value="0,0,0,0"/>
        <Setter Property="FontSize" Value="18"/>
        <Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}"/>
        <Setter Property="FontWeight" Value="Normal"/>          
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="HyperlinkButton">
                    <TextBlock Style="{StaticResource TextStylePostBody}">
                        <Underline>
                            <Run Text="{Binding Path=Content, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                        </Underline>
                    </TextBlock>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

文本块的样式：

        <Style x:Key="TextStylePostBody" TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="FontSize" Value="18"/>
        <Setter Property="Padding" Value="0,0,0,0"/>
        <Setter Property="Margin" Value="0,0,0,0"/>
        <Setter Property="TextWrapping" Value="Wrap"/>
        <Setter Property="TextTrimming" Value="WordEllipsis"/>
        <Setter Property="TextWrapping" Value="WrapWholeWords"/>
    </Style>

我可以用边距<Setter Property="Margin" Value="0,-9, 4,-4"/> 中的硬编码值修复它，但它看起来不太好。

创建超链接的代码在这里：

    private static Inline GenerateHyperLink(HtmlNode node)
    {
        Span s = new Span();            
        InlineUIContainer iui = new InlineUIContainer();
        HyperlinkButton hb = new HyperlinkButton() { NavigateUri = new Uri(node.Attributes["href"].Value, UriKind.Absolute), Content = CleanText(node.InnerText) };
        hb.Style = ( Style )Application.Current.Resources[ "UnderlineHyperlinkButton" ];
        iui.Child = hb;
        s.Inlines.Add(iui);
        return s;
    }

有什么我错过的吗？

更新： 使用此 XAMl 代码进行了快速测试：

        <StackPanel Grid.Row="0" Orientation="Horizontal">
        <TextBlock Foreground="Black" FontSize="18" FontWeight="Normal" FontFamily="Segroe UI">TextBlock</TextBlock>
        <RichTextBlock>
        <Paragraph>
                <Run Foreground="Black" FontSize="18" FontWeight="Normal" FontFamily="Segroe UI">
                <Run.Text>Run text</Run.Text>
            </Run>
                <InlineUIContainer>
                    <HyperlinkButton FontSize="18" FontFamily="Segroe UI" FontWeight="Normal" Margin="0" Padding="0,0,0,0">Link Text</HyperlinkButton>
                </InlineUIContainer>
            </Paragraph>
        </RichTextBlock>
    </StackPanel>

得到了这个：

将HyperlinkButton 的Margin 设置为-9（顶部）：

不是其他文本或者InlineUIContainer的问题，把HyperlinkButton换成TextBlock修复边距：

【问题讨论】：

你的TextBlock风格TextStylePostBody怎么样？也许问题就在那里。
不，这太容易了。添加了文本块样式。
你的超链接周围的文字风格怎么样？
文本用Paragraph和Run包裹，没有任何额外的样式。
看来问题不是HyperlinkButton 而是Run，已更新。

标签： c# xaml windows-phone-8.1 winrt-xaml win-universal-app

【解决方案1】：

由于对齐和格式问题，决定避免使用InlineUIContainer 和HyperlinkButton。我已将其替换为 <Underline> 和 Link 附加属性。更多信息在this article。

编辑：不知道为什么，但我错过了运行时 API 有一个专用的 Hyperlink 类可以很好地完成这项工作。

【讨论】：