Customizing the GridViewIndicatorCell

3 posts, 0 answers
  1. Mike
    Mike avatar
    32 posts
    Member since:
    May 2011

    Posted 23 Jun 2011 Link to this post

    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
  2. Ivan Ivanov
    Admin
    Ivan Ivanov avatar
    1127 posts

    Posted 28 Jun 2011 Link to this post

    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
    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. DevCraft banner
  4. Mike
    Mike avatar
    32 posts
    Member since:
    May 2011

    Posted 30 Jun 2011 Link to this post

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

    Mike
Back to Top