Hyperlink TreeView item

5 posts, 1 answers
  1. Jon
    Jon avatar
    539 posts
    Member since:
    Apr 2004

    Posted 10 Nov 2010 Link to this post

    Hi..
    How can I programmatically create a TreeView with several nodes as Hyperlinks that can be clicked?
    Say I want to have the Mac Node as hyperlink and nav to  a URL.
    thx

    Fruit
        Apples
             -  Mac
             -  etc...
        Oranges
             - 
  2. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 11 Nov 2010 Link to this post

    Hi Jon,

    There are couple of approaches to this scenario based on whether the TreeView is bound or not. 

    1) XAML defined TreeView:

    <telerik:RadTreeView Grid.Row="1">
        <telerik:RadTreeViewItem>
            <telerik:RadTreeViewItem.Header>
                <Grid>
                    <TextBlock>          
                        <Hyperlink NavigateUri="http://www.google.com"
                                RequestNavigate="Hyperlink_RequestNavigate">
                            Google
                        </Hyperlink>
                    </TextBlock>
                </Grid>
            </telerik:RadTreeViewItem.Header>
        </telerik:RadTreeViewItem>
    </telerik:RadTreeView>

    private void Hyperlink_RequestNavigate(object sender, RequestNavigateEventArgs e)
    {
        Process.Start(new ProcessStartInfo(e.Uri.AbsoluteUri));
        e.Handled = true;
    }

    2) DataBound TreeView:

    <telerik:RadTreeView x:Name="boundTreeView" Grid.Row="1" Grid.Column="1">
        <telerik:RadTreeView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <TextBlock>          
                        <Hyperlink NavigateUri="{Binding NavigateUri}"
                                RequestNavigate="Hyperlink_RequestNavigate">
                            <InlineUIContainer>
                                <TextBlock Text="{Binding NavigateUri}" />
                            </InlineUIContainer>
                        </Hyperlink></TextBlock>
                </Grid>
            </DataTemplate>
        </telerik:RadTreeView.ItemTemplate>
    </telerik:RadTreeView>

    // Business object 
    public class Site
    {
        public Uri NavigateUri { get; set; }
    }

    public MainWindow()
    {
        InitializeComponent();
     
        // Populate the TreeView with data
        List<Site> sites = new List<Site>();
        sites.Add(new Site() { NavigateUri = new Uri("http://www.google.com", UriKind.RelativeOrAbsolute) });
        sites.Add(new Site() { NavigateUri = new Uri("http://www.yahoo.com", UriKind.RelativeOrAbsolute) });
        sites.Add(new Site() { NavigateUri = new Uri("http://www.microsoft.com", UriKind.RelativeOrAbsolute) });
        this.boundTreeView.ItemsSource = sites;
    }

    private void Hyperlink_RequestNavigate(object sender, RequestNavigateEventArgs e)
    {
        Process.Start(new ProcessStartInfo(e.Uri.AbsoluteUri));
        e.Handled = true;
    }



    Please take a look at the attached project for further info. Let me know if it helps.

    Additionally, I'd suggest you take a look at the blog post bellow:

    Using Hyperlink in WPF application

    Sincerely yours,
    Kiril Stanoev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. Jon
    Jon avatar
    539 posts
    Member since:
    Apr 2004

    Posted 11 Nov 2010 Link to this post

    Hi..
    How can I programmatically create the TreeViewItem?  thanks

    <

     

     

    telerik:RadTreeViewItem>

     

     

     

     

    <telerik:RadTreeViewItem.Header>

     

     

     

     

    <Grid>

     

     

     

     

    <TextBlock>

     

     

     

     

    <Hyperlink NavigateUri="http://www.google.com"

     

     

     

    RequestNavigate="Hyperlink_RequestNavigate">

     

    Google

     

     

     

    </Hyperlink></TextBlock>

     

     

     

     

    </Grid>

     

     

     

     

    </telerik:RadTreeViewItem.Header>

     

     

     

     

    </telerik:RadTreeViewItem>

     

  5. Answer
    Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 11 Nov 2010 Link to this post

    Hello Jon,

    Here is one possible solution on how to add a hyperlink TreeViewItem programatically.

    <Window x:Class="WpfApplication1.MainWindow"
            xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" Title="MainWindow"
            Height="350" Width="525" FontSize="16">
        <Grid>
            <telerik:RadTreeView x:Name="treeView1" />
        </Grid>
    </Window>

    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
     
            this.CreateHyperlinkNode("http://www.google.com");
            this.CreateHyperlinkNode("http://www.microsoft.com");
            this.CreateHyperlinkNode("http://www.yahoo.com");
        }
     
        private void CreateHyperlinkNode(string url)
        {
            RadTreeViewItem treeViewItem = new RadTreeViewItem();
            Hyperlink hyperlink = new Hyperlink();
            hyperlink.NavigateUri = new Uri(url, UriKind.RelativeOrAbsolute);
            hyperlink.Inlines.Add(url);
            hyperlink.RequestNavigate += this.Hyperlink_RequestNavigate;
            TextBlock textBlock = new TextBlock();
            textBlock.Inlines.Add(hyperlink);
            Grid grid = new Grid();
            grid.Children.Add(textBlock);
            treeViewItem.Header = grid;
            this.treeView1.Items.Add(treeViewItem);
        }
     
        private void Hyperlink_RequestNavigate(object sender, RequestNavigateEventArgs e)
        {
            Process.Start(new ProcessStartInfo(e.Uri.AbsoluteUri));
            e.Handled = true;
        }
    }

    Let me know if you need further assistance.

    Kind regards,
    Kiril Stanoev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Jon
    Jon avatar
    539 posts
    Member since:
    Apr 2004

    Posted 11 Nov 2010 Link to this post

    THANKS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Back to Top
UI for WPF is Visual Studio 2017 Ready