Showing a Hyperlink Style button to Popup a New Window in RadGridView for WPF

Introduction

I’ve seen this question asked several times, “How do you show a hyperlink style button inside a column in RadGridView that will popup a new WPF Window upon click?” I’ve decided to write a short blog post to help others with this. Basically, instead of the default behavior of a hyperlink column (which sends you to a URL), we will popup a new WPF Window instead. If you’re interested in learning more about displaying a web URL, then go here.

Getting Started

To keep things simple, I’m going to show you the completed application first as shown in Figure 1 and 2.

Figure 1: RadGridView with Hyperlink style buttons inside of a column.

Figure 2: RadGridView opening a new WPF Window upon clicking the name “Michael Crump”. 

Styling our HyperlinkLikeButton and adding in RadGridView

We are going to use RadGridView and RadButton to achieve this. The first thing that I want to do is setup the style that we are going to use for RadButton. We can do this quickly and easily by adding in the following section above our default Grid layout.

<Window.Resources>

 <Style x:Key="HyperlinkLikeButton" TargetType="Button">

 <Setter Property="Template">

 <Setter.Value>

 <ControlTemplate TargetType="Button">

 <ContentPresenter />

 </ControlTemplate>

 </Setter.Value>

 </Setter>

 <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HotTrackBrushKey}}" />

 <Setter Property="Cursor" Value="Hand" />

 <Style.Triggers>

 <Trigger Property="IsMouseOver" Value="true">

 <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />

 <Setter Property="Template">

 <Setter.Value>

 <ControlTemplate TargetType="Button">

 <ControlTemplate.Resources>

 <Style TargetType="{x:Type TextBlock}">

 <Setter Property="TextDecorations" Value="Underline" />

 </Style>

 </ControlTemplate.Resources>

 <ContentPresenter />

 </ControlTemplate>

 </Setter.Value>

 </Setter>

 </Trigger>

 </Style.Triggers>

 </Style>

</Window.Resources>

Once that is in place, we can simply add the following snippet underneath it to define our RadGridView as well as the DataTemplate used for the column (which will contain our RadButton).

<Grid>

 <telerik:RadGridView x:Name="radGridView"

 AutoGenerateColumns="False">

 <telerik:RadGridView.Columns>

 <telerik:GridViewDataColumn Header="Employee Name">

 <telerik:GridViewDataColumn.CellTemplate>

 <DataTemplate>

 <telerik:RadButton Style="{StaticResource HyperlinkLikeButton}" Click="RadButton_Click_1" Content="{Binding Name}" Tag="{Binding Name}" />

 </DataTemplate>

 </telerik:GridViewDataColumn.CellTemplate>

 </telerik:GridViewDataColumn>

 </telerik:RadGridView.Columns>

 </telerik:RadGridView>

 </Grid>

After we define our DataTemplate, we add a RadButton and apply our Style created earlier. It has a click event handler that we will add code to that will popup a new WPF Window. We will also set the Content and Tag property to bind on the Name property of our Employee class that we will create shortly.

Creating the Employee Class

We will use a simple class with only one property called Name. You can add this class wherever you would like. It is defined below:

public class Employee

{

 public string Name { get; set; }

}

Switching Back to MainPage.xaml.cs

Now we will need to provide some sample data for RadGridView, but before we do that we will need to add a new WPF Window to the application. Go ahead and add a new WPF Window and give it the name Window1. Switching back to the MainPage.xaml.cs, we can add in the following code:

public MainWindow()

{

    InitializeComponent();

    radGridView.ItemsSource=GetData();

}

public static ObservableCollection<Employee> GetData()

{

    var data=new ObservableCollection<Employee>();

    data.Add(new Employee() { Name="Michael Crump" });

    data.Add(new Employee() { Name="John Doe" });

    data.Add(new Employee() { Name="Jane Doe" });

 return data;

}

private void RadButton_Click_1(object sender, RoutedEventArgs e)

{

    RadButton btn=sender as RadButton;

    Window1 win=new Window1();

    win.Title=btn.Tag.ToString();

    win.Show();

}

From the constructor, we can see the ItemSource property is getting set by the GetData() method. This method simply contains some sample data for our Employee class. The RadButton_Click_1 event, initializes the variable btn as our RadButton, where we can access certain properties from it such as Tag, etc. Then it creates a new instance of the WPF Window, sets the title to be whatever was in the tag of the button and finally shows the new Window.

Conclusion

We can see from this short example just how flexible RadControls for WPF really are. The full source code is included here and if you have any questions or comments,  leave them below. You can also download RadControls for WPF right now to give it a shot!  Thanks again for reading and I hope to chat with you soon.