I would like to display a hyperlink in a GridViewHeaderCell. I have found this thread. I would like to do this in XAML. I have extracted the markup for a GridViewHeaderCell and modified a derived style with no luck (below). I have two questions:
- How can modify the derived style to display a hyperlink as well as the filter control (ie. only override the TextBlock displaying the column name)?
- How can I bind both the display text and navigation URI to this hyperlink control?
<Style x:Key="GridViewHeaderCellStyle" TargetType="{x:Type telerik:GridViewHeaderCell}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type telerik:GridViewHeaderCell}"> <Grid x:Name="PART_OuterGrid"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualStateGroup.Transitions> <VisualTransition From="{x:Null}" GeneratedDuration="0:0:0.2" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="Normal"/> <VisualTransition From="{x:Null}" GeneratedDuration="0:0:0.2" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="MouseOver"/> </VisualStateGroup.Transitions> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard> <DoubleAnimationUsingKeyFrames BeginTime="0" Duration="0:0:0.001" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Over"> <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/> </DoubleAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0:0:0.001" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <SolidColorBrush Color="Black"/> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Ascending"> <Storyboard> <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0:0:0.001" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <SolidColorBrush Color="Black"/> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_SortIndicator"> <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Selected"> <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Descending"> <Storyboard> <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0:0:0.001" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <SolidColorBrush Color="Black"/> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_SortIndicator"> <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/> </DoubleAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform" Storyboard.TargetName="PART_SortIndicator"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <ScaleTransform ScaleY="-1" ScaleX="1"/> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Selected"> <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid x:Name="PART_HeaderCellGrid" MinHeight="26"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Border x:Name="GridViewHeaderCell" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2"> <Border BorderBrush="#FF4B4B4B" BorderThickness="1" Background="{TemplateBinding Background}"/> </Border> <Border x:Name="GridViewHeaderCell_Over" BorderBrush="#FFFFC92B" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0"> <Border BorderBrush="White" BorderThickness="1"> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFFFFBA3" Offset="1"/> <GradientStop Color="#FFFFFBDA" Offset="0"/> <GradientStop Color="#FFFFD25A" Offset="0.43"/> <GradientStop Color="#FFFEEBAE" Offset="0.42"/> </LinearGradientBrush> </Border.Background> </Border> </Border> <Border x:Name="GridViewHeaderCell_Selected" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0"> <Border.BorderBrush> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF616161" Offset="0"/> <GradientStop Color="#FF989898" Offset="1"/> </LinearGradientBrush> </Border.BorderBrush> <Border BorderThickness="1"> <Border.BorderBrush> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFB69A78"/> <GradientStop Color="#FFFFE17A" Offset="0.126"/> </LinearGradientBrush> </Border.BorderBrush> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFFFD74E" Offset="0.996"/> <GradientStop Color="#FFFFDCAB" Offset="0.17"/> <GradientStop Color="#FFFFB062" Offset="0.57"/> <GradientStop Color="#FFFFD18F" Offset="0.56"/> <GradientStop Color="#FFFFBA74"/> </LinearGradientBrush> </Border.Background> </Border> </Border> <ContentControl x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="{TemplateBinding IsTabStop}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> <ContentControl.Style> <Style TargetType="{x:Type ContentControl}"> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> <Setter Property="VerticalContentAlignment" Value="Stretch"/> </Style> </ContentControl.Style> </ContentControl> <Path x:Name="PART_SortIndicator" Grid.ColumnSpan="2" Data="M256,328L248,336 264,336" Fill="Black" HorizontalAlignment="Center" Height="3" Margin="0,3,0,0" Opacity="0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" SnapsToDevicePixels="True" VerticalAlignment="Top" Width="5"> <Path.RenderTransform> <TransformGroup> <ScaleTransform ScaleY="1" ScaleX="1"/> <SkewTransform AngleY="0" AngleX="0"/> <RotateTransform Angle="0"/> <TranslateTransform X="0" Y="0"/> </TransformGroup> </Path.RenderTransform> </Path> <telerik:FilteringDropDown x:Name="PART_DistinctFilterControl" Grid.Column="1" IsTabStop="False" Margin="0,0,4,0" Visibility="{TemplateBinding FilteringUIVisibility}"> <telerik:StyleManager.Theme> <telerik:Office_BlackTheme/> </telerik:StyleManager.Theme> </telerik:FilteringDropDown> <Thumb x:Name="PART_LeftHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Left" IsTabStop="{TemplateBinding IsTabStop}"> <Thumb.Style> <Style TargetType="{x:Type Thumb}"> <Setter Property="Width" Value="8"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderBrush" Value="Transparent"/> <Setter Property="BorderThickness" Value="0"/> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> <Setter Property="VerticalContentAlignment" Value="Stretch"/> <Setter Property="Padding" Value="0"/> <Setter Property="Cursor" Value="SizeWE"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Thumb}"> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </ControlTemplate> </Setter.Value> </Setter> </Style> </Thumb.Style> </Thumb> <Thumb x:Name="PART_RightHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Right" IsTabStop="{TemplateBinding IsTabStop}"> <Thumb.Style> <Style TargetType="{x:Type Thumb}"> <Setter Property="Width" Value="8"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderBrush" Value="Transparent"/> <Setter Property="BorderThickness" Value="0"/> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> <Setter Property="VerticalContentAlignment" Value="Stretch"/> <Setter Property="Padding" Value="0"/> <Setter Property="Cursor" Value="SizeWE"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Thumb}"> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </ControlTemplate> </Setter.Value> </Setter> </Style> </Thumb.Style> </Thumb> </Grid> <telerik:FieldFilterControl x:Name="PART_FieldFilterControl" Column="{x:Null}" IsTabStop="False" Grid.Row="1" Visibility="{TemplateBinding FieldFilterControlVisibility}"> <telerik:StyleManager.Theme> <telerik:Office_BlackTheme/> </telerik:StyleManager.Theme> </telerik:FieldFilterControl> </Grid> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF5B5B5B" Offset="1"/> <GradientStop Color="#FF868686"/> <GradientStop Color="#FF4F4F4F" Offset="0.42"/> <GradientStop Color="#FF0E0E0E" Offset="0.43"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="BorderBrush" Value="#FF848484"/> <Setter Property="BorderThickness" Value="0,0,1,1"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> <Setter Property="Padding" Value="5,0,3,0"/> <Setter Property="Foreground" Value="White"/> <Setter Property="DropMarkPen"> <Setter.Value> <Pen Brush="White" Thickness="2"/> </Setter.Value> </Setter> <Setter Property="SnapsToDevicePixels" Value="True"/> </Style> <!-- Hyperlink GridViewHeaderCell --> <Style x:Key="HyperlinkHeaderCellStyle" TargetType="{x:Type telerik:GridViewHeaderCell}" BasedOn="{StaticResource GridViewHeaderCellStyle}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type telerik:GridViewHeaderCell}"> <Grid x:Name="PART_OuterGrid"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid x:Name="PART_HeaderCellGrid" MinHeight="26"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <ContentControl x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="{TemplateBinding IsTabStop}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> <ContentControl.Style> <Style TargetType="{x:Type ContentControl}"> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> <Setter Property="VerticalContentAlignment" Value="Stretch"/> </Style> </ContentControl.Style> </ContentControl> </Grid> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>2 Answers, 1 is accepted
0
Accepted
Hello,
Regards,
Didie
the Telerik team
Actually the GridView's Header is an object and you could directly assign any object for it.
For example:
<telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"> <telerik:GridViewDataColumn.Header> <Your Hyperlink here/> </telerik:GridViewDataColumn.Header></telerik:GridViewDataColumn>Didie
the Telerik team
Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.
0
Jack
Top achievements
Rank 1
Rank 1
answered on 29 Mar 2013, 01:41 PM
Thanks, that did the trick.