Unknown HyperlinkButton margin/padding with style/template

Question

I'm trying to do the html to xaml convertor and use this code as a starting point. My app is Windows Phone 8.1 universal app. This code works very good except the hyperlinks. It looks like HyperlingButton have some hidden margin or padding and I can't fix it in the style by setting it to 0.

The hyperlink is marked with red border:

My style is here:

    <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 for TextBlock:

        <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>

I can fix it with hardcoded values in margin <Setter Property="Margin" Value="0,-9, 4,-4"/> but it does not looks good.

The code that creates hyperlink is here:

    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;
    }

Is there something that I missed?

Update: Did a quick test with this XAMl code:

        <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>

and got this:

Setting Margin of HyperlinkButton to -9 (Top):

It's not the problem of other text or InlineUIContainer, replacing HyperlinkButton with TextBlock fixes the margins:

What about your TextBlock style TextStylePostBody? Maybe the problem is there. — Pollitzer
What about the style of the text that surrounds your hyperlink? — M. Tovbin
The text is wrapped with Paragraph and Run without any additional styles. — crea7or
Looks like the problem not with HyperlinkButton but Run, post updated. — crea7or

crea7or crea7or · Accepted Answer · 2016-03-21T00:29:43

Decided to avoid InlineUIContainer and HyperlinkButton due to align and formatting problems. I have replaced it with <Underline> with Link attached property. More info in this article.

EDIT: Don't know why, but I missed that runtime API have a dedicated Hyperlink class that do the job very well.

Unknown HyperlinkButton margin/padding with style/template

1 Answers