Question

On hover of a HyperlinkButton in a vertical StackPanel, controls below the HyperlinkButton inch down a few pixels. It’s kind of a weird bug, and I’m sure there’s a fix, but the only HyperlinkButton bug fix I find relates to large text rendering a tad blurry on hover, not this positioning bug. Has anyone come across this?

XAML:

  <Canvas x:Name="LayoutRoot">
   ...
    <StackPanel x:Name="Article1" Style="{StaticResource ArticleContainer}"
                Canvas.Top="46">

        <StackPanel Orientation="Horizontal">
            <Image x:Name="Article1Image" Style="{StaticResource ImageCategory}"/>
            <TextBlock x:Name="Article1Title" Style="{StaticResource TitleText}"/>
        </StackPanel>

        <TextBlock x:Name="Article1Posted" Style="{StaticResource PostedText}"/>

        <HyperlinkButton x:Name="Author1Link" Style="{StaticResource HLBStyling}">
            <TextBlock x:Name="Article1By" Style="{StaticResource AuthorText}"/>
        </HyperlinkButton>

        <TextBlock x:Name="Article1Content" Style="{StaticResource ContentText}"/>

        <HyperlinkButton x:Name="Article1Link" Style="{StaticResource HLBStyling}">
            <TextBlock x:Name="Article1ReadMore" Style="{StaticResource ReadMoreText}"/>
        </HyperlinkButton>

    </StackPanel>
   ...
   </Canvas>

App.xaml:

    <Style x:Key="ContentPanel" TargetType="Border">
        <Setter Property="Height" Value="427"/>
        <Setter Property="Width" Value="250"/>
        <Setter Property="Canvas.Top" Value="33"/>
        <Setter Property="Canvas.Left" Value="0"/>
        <Setter Property="Canvas.ZIndex" Value="1"/>
    </Style>

    <Style x:Key="ArticleContainer" TargetType="StackPanel">
        <Setter Property="Height" Value="195"/>
        <Setter Property="Width" Value="230"/>
        <Setter Property="Canvas.Left" Value="10"/>
        <Setter Property="Canvas.ZIndex" Value="2"/>
    </Style>

    <Style x:Key="ImageCategory" TargetType="Image">
        <Setter Property="Width" Value="40"/>
        <Setter Property="Height" Value="40"/>
        <Setter Property="Margin" Value="5,5,5,0"/>
    </Style>

    <Style x:Key="TitleText" TargetType="TextBlock">
        <Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="FontWeight" Value="SemiBold"/>
        <Setter Property="TextWrapping" Value="Wrap"/>
        <Setter Property="Height" Value="32"/>
        <Setter Property="Width" Value="170"/>
        <Setter Property="TextTrimming" Value="WordEllipsis"/>
        <Setter Property="Margin" Value="10,0,0,0"/>
    </Style>

    <Style x:Key="PostedText" TargetType="TextBlock">
        <Setter Property="FontSize" Value="12"/>
        <Setter Property="TextWrapping" Value="Wrap"/>
        <Setter Property="Height" Value="14"/>
        <Setter Property="Width" Value="230"/>
        <Setter Property="Margin" Value="0,10,0,0"/>
    </Style>

    <Style x:Key="AuthorText" TargetType="TextBlock">
        <Setter Property="FontSize" Value="12"/>
        <Setter Property="TextWrapping" Value="Wrap"/>
        <Setter Property="Height" Value="14"/>
        <Setter Property="Width" Value="230"/>
    </Style>

    <Style x:Key="ContentText" TargetType="TextBlock">
        <Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
        <Setter Property="FontSize" Value="12"/>
        <Setter Property="TextWrapping" Value="Wrap"/>
        <Setter Property="MaxHeight" Value="90"/>
        <Setter Property="Width" Value="230"/>
        <Setter Property="TextTrimming" Value="WordEllipsis"/>
    </Style>

    <Style x:Key="ReadMoreText" TargetType="TextBlock">
        <Setter Property="FontSize" Value="12"/>
        <Setter Property="Height" Value="16"/>
    </Style>

    <Style x:Key="HLBStyling" TargetType="HyperlinkButton">
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="IsTabStop" Value="False"/>
    </Style>

Answer 1

This is caused by your the two styles you are using for HyperLinkButton (HLBStyling) and the TextBlocks they contain (AuthorText, ReadMoreText).
If you remove the TextBlock and just set the Content of the HyperLinkButton, the problem goes away. Also if you remove the style from the TextBlocks within the buttons, the problem goes away.