WPF - Hyperlink style does not change with the style of label inside

4
votes

Given the following XAML markup, I would expect the text in the Hyperlink to turn orange when I mouse over it, since I am setting a foreground colour on its parent control and it should filter down by Property Value Inheritance. Yet it stays black. What do I need to do?

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="DemoLink" TargetType="{x:Type Hyperlink}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="DarkOrange" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Label>
            <Hyperlink Style="{StaticResource DemoLink}">
                <Label Content="Text that should change colour on mouse over" />
            </Hyperlink>
        </Label>
    </Grid>
</Window>

Update: The simple answer from Meleak is that using a TextBlock instead of the inner Label causes the style to work as expected - the TextBlock picks up the foreground colour from its parent, while the Label does not.

e.g.

<Label>
    <Hyperlink Style="{StaticResource DemoLink}">
        <TextBlock Text="Text that does change colour on mouse over" />
    </Hyperlink>
</Label>
3
wpfhyperlinklabelstyles

3 Answers

3
votes

It seems that Label isn't affected by Foreground set on its parent. Even this has no effect

<Label>
    <Hyperlink Style="{StaticResource DemoLink}" Foreground="DarkOrange">
        <Label Content="This is some text that should change colour on mouse over" />
    </Hyperlink>
</Label>

Update
Set a Style for the Label instead of the Hyperlink and it'll work

<Window.Resources>
    <Style x:Key="DemoLinkLabel" TargetType="Label">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Foreground" Value="DarkOrange" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <Label>
        <Hyperlink Name="DemoHyperlink" >
            <Label Content="This is some text that should change colour on mouse over"
                   Style="{StaticResource DemoLinkLabel}"/>
        </Hyperlink>
    </Label>
</Grid>

Update again
The easy way is to use a TextBlock instead of Label since it doesn't have this problem

<Hyperlink Name="DemoHyperlink" Style="{StaticResource DemoLink}">
    <TextBlock Text="This is some text that should change colour on mouse over"/>
</Hyperlink>
2
votes

@Fredrik explained well above. So here can be a simple style and Hyperlink usage

You should build your Hyperlink like this

<TextBlock Width="Auto" HorizontalAlignment="Center">
    <Hyperlink Click="ForgotPassword_Clicked">
        <TextBlock Text="Forgot Password?"/>
    </Hyperlink>
</TextBlock>

And then this style should work for you with normal and hover styles

<Style TargetType="{x:Type Hyperlink}">
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Foreground" Value="Blue" />
        <Setter Property="TextBlock.TextDecorations" Value="{x:Null}" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Foreground" Value="Red" />
                <Setter Property="TextBlock.TextDecorations" Value="Underline" />
            </Trigger>
        </Style.Triggers>
    </Style>
0
votes

You have set the style for hyperlink, not the label. You need to set the same trigger for a label, so it can also react to IsMouseOver event.