Customizing the GridViewIndicatorCell

[Mike]

I need to customize the GridViewIndicatorCell style. I am targeting the Vista theme. I have 2 goals; 1) make the indicator cell have the same background and border as the other cells in the row when selected or unselected; 2) display an image of our design when the row is selected. I've compared the resource dictionaries for the various themes and can't see how the image is selected or how to set the image displayed in the cell. I'm also having trouble with the background and border. Here is the GridViewIndicatorCell.xaml  ResourceDictionary file contents.
 

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
		xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
		xmlns:grid="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
		xmlns:treelist="clr-namespace:Telerik.Windows.Controls.TreeListView;assembly=Telerik.Windows.Controls.GridView"
		xmlns:controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView">
 
	<SolidColorBrush x:Key="GridView_RowIndicatorCellBackground" Color="#FFE8EFFC" />
	<SolidColorBrush x:Key="GridView_CellBackground_Edited" Color="White" />
	<SolidColorBrush x:Key="ItemOuterBorder_Over" Color="{StaticResource BaseColor5}" />
	<SolidColorBrush x:Key="ItemInnerBorder_Over" Color="{StaticResource BaseColor5}" />
	<SolidColorBrush x:Key="ItemBackground_Over" Color="{StaticResource BaseColor5}" />
	<SolidColorBrush x:Key="ItemOuterBorder_Selected" Color="{StaticResource BaseColor11}" />
	<SolidColorBrush x:Key="ItemInnerBorder_Selected" Color="{StaticResource BaseColor11}" />
	<SolidColorBrush x:Key="ItemBackground_Selected" Color="{StaticResource BaseColor11}" />
	<SolidColorBrush x:Key="ControlOuterBorder" Color="{StaticResource BaseColor5}" />
	<SolidColorBrush x:Key="ItemBackground" Color="{StaticResource BaseColor13}" />
	<SolidColorBrush x:Key="ControlInnerBorder_Invalid" Color="White" />
	<SolidColorBrush x:Key="ItemOuterBorder_Invalid" Color="#FFCE7D7D" />
	<SolidColorBrush x:Key="ItemInnerBorder_Invalid" Color="{StaticResource BaseColor5}" />
	<LinearGradientBrush x:Key="ItemBackground_Invalid" EndPoint="0.5,1" StartPoint="0.5,0">
		<GradientStop Color="#FFFCDCDC" />
		<GradientStop Color="#FFFCC1C1" Offset="1" />
	</LinearGradientBrush>
	<SolidColorBrush x:Key="ItemBackground_Disabled" Color="#FFE0E0E0" />
	<SolidColorBrush x:Key="ItemInnerBorder_Disabled" Color="#FFF8F8F8" />
	<SolidColorBrush x:Key="GridView_GridLinesItemBorder" Color="{StaticResource BaseColor11}" />
 
	<ControlTemplate x:Key="GridViewIndicatorCellTemplate" TargetType="grid:GridViewIndicatorCell">
		<!-- This is the original ControlTemplate content. The contents after the Border definition were taken from the GridViewCell ResourceDictionary file and hacked. -->
		<!--<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
			<ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
					Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" />
		</Border>-->
		<Grid>
 
			<vsm:VisualStateManager.VisualStateGroups>
				<vsm:VisualStateGroup x:Name="SelectionStates">
					<vsm:VisualState x:Name="Unselected">
						<Storyboard>
							<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background_UnSelected" Storyboard.TargetProperty="Background">
								<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ItemBackground}" />
							</ObjectAnimationUsingKeyFrames>
						</Storyboard>
					</vsm:VisualState>
					<vsm:VisualState x:Name="Selected">
						<Storyboard>
							<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background_Selected" Storyboard.TargetProperty="Background">
								<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ItemBackground_Selected}" />
							</ObjectAnimationUsingKeyFrames>
						</Storyboard>
					</vsm:VisualState>
				</vsm:VisualStateGroup>
			</vsm:VisualStateManager.VisualStateGroups>
 
			<Border x:Name="Background_UnSelected" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"
					BorderThickness="{TemplateBinding BorderThickness}">
				<ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
						HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
						Content="{TemplateBinding Content}" />
			</Border>
 
			<Border x:Name="Background_Selected" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"
					BorderThickness="{TemplateBinding BorderThickness}">
				<Border BorderThickness="1" BorderBrush="{StaticResource ItemInnerBorder_Selected}" Background="{StaticResource ItemBackground_Selected}">
					<ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
							HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
							Content="{TemplateBinding Content}" />
				</Border>
			</Border>
 
		</Grid>
 
	</ControlTemplate>
 
	<Style TargetType="grid:GridViewIndicatorCell">
		<Setter Property="Template" Value="{StaticResource GridViewIndicatorCellTemplate}" />
		<Setter Property="Background" Value="{StaticResource GridView_RowIndicatorCellBackground}" />
		<Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder}" />
		<Setter Property="VerticalContentAlignment" Value="Center" />
		<Setter Property="HorizontalContentAlignment" Value="Center" />
		<Setter Property="BorderThickness" Value="0,1" />
		<Setter Property="Padding" Value="0" />
	</Style>
 
</ResourceDictionary>

Could you post an example of how to accomplish this?

thanks, Mike

[Ivan Ivanov]

Hello Mike,

In order to accomplish this task, you should retemplate the "PART_IndicatorPresenter " border. It is part of the GridViewRow template. The Path that is placed in the "NavigationIndicator" Grid is the image that you are talking about.

Kind regards,
Ivan Ivanov
the Telerik team

[Mike]

Thanks for the tip, that is exactly what we did.

Mike