Styling hyperlink button inside a data template in Silverlight

Question

How do I change the visual state of a hyperlinkbutton inside a datatemplate? Basically I'm trying to iterate through the hyperlinkbuttons and set their visual state to active or inactive according to the current url. The hyperlink buttons are located inside the datatemplate of an itemscontrol. The itemsource is bound to a List where link is my custom class for links, that contains just some properties for the uri and caption.

Is there a best practice for styling the active hyperlink in a silverlight nav app? What I am using is the approach of the boilerplate code form the silverlight nav app project template.

Answer 1

Hi there,

I think the best way to achieve this would be to bind the HyperlinkButtons' IsEnabled properties to your URL and put a converter in between.

I assume you have something like this:

<ListBox
  ItemsSource="{Binding Path=Links}">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <HyperlinkButton
        NavigateUri="{Binding Path=LinkUrl}"
        Content="{Binding Path=LinkUrl}" />
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

So you could add the IsEnabled-binding like so:

<ListBox
  ItemsSource="{Binding Path=Links}">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <HyperlinkButton
        IsEnabled="{Binding Path=LinkUrl, Converter={StaticResource LinkUrlToIsEnabledConverter}}"
        NavigateUri="{Binding Path=LinkUrl}"
        Content="{Binding Path=LinkUrl}" />
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

and then in the Converter do e.g.:

public object Convert(...)
{
  var url = (Uri)value;
  if (url.AbsolutePath.EndsWith(".html"))
    return true;
  return false;
}

Cheers, Alex