HyperlinkButton inside TreeView - no selected state

[Tobias]

Hi everyone!

I use the RadTreeView to display a navigation; therefore, I need to show some HyperlinkButtons. I've got two issues:

1) Clicking the HyperlinkButton doesn't set the 'selected' state from the RadTreeViewItem
2) The HyperlinkButton is not at full width

Because of issue #2, I can select the RadTreeViewItem by clicking right next to the link, but this only selects the item and no navigation is triggered (which makes sense, because I didn't click the HyperlinkButton, just the item).

Can you please provide me some tips?

Thanks in advance for your help!!!

[Tobias]

Hi,

unfortunately, I still got this problem :(

I tried to modify the style template, but I can neither make the HyperlinkButton to full width, nor will its parent RadTreeViewItem be selected...

I'm looking forward for any recommendation! Thanks in advance

[Boris]

Hello Tobias,

I attached a sample project that demonstrates how you can stretch the HyperlinkButton and invoke the Selected event of the RadTreeViewItem. Basically you can control the selection in the ViewModels if your solution utilizes MVVM. You can bind the RadTreeViewItem IsSelected property to a business property and then control the value of the business property from a command being executed when the HyperlinkButton is clicked.

The attached sample project uses an MVVM approach. In order to invoke the Selected event of the RadTreeViewItem from the HyperlinkButton you can use a DelegateCommand. In the business object HyperlinkDataItem class I use the ClickCommand property of type DelegateCommand to set the IsSelected property to true:

private void OnHyperlinkClicked()
        {
            this.IsSelected = true;
        }

in XAML I bind through style the Command property of the HyperlinkButton and in order to stretch it I set the HorizontalContentAlignment property of the RadTreeViewItem to Stretch:

<UserControl.Resources>
        <Style TargetType="telerik:RadTreeViewItem">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <HyperlinkButton
                                         Command="{Binding ClickCommand}"
                                         Content="{Binding Content}"
                                         NavigateUri="{Binding NavigateUri}"
                                         TargetName="_blank" />
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
            <Setter Property="FontSize" Value="15" />
        </Style>
    </UserControl.Resources>

For more information on DelegateCommand you can check our MVVM Support for Silverlight article.

Please let me know if this helps.

Regards,
Boris Penev
Telerik