Theme needed for Q3

[Brian]

We are trying to move to Q3.  We have been using the Telerik theme.  As it is no longer supported we're trying to create a theme that is similar.  However all existing examples that I've found are not compatible with Q3.  They either work in Q1 or Q2.  Has anyone created a somewhat similar theme to the Telerik one? Or could some one post Generic and Resource xamls for one of the supported theme that we could tweak? 

Too bad the old Telerik and Caramel themes were dropped.  They had a nice distintive and stylish look instead the old boring plain Windows style grids.

[Brian]

See the attach screen shot.  I've got things along modifying the Office_Black as a guide line.  I'm stuck on a few things though.

[Kalin Milanov]

Hello Brian,

The two elements you pointed out are as follows: 
1. The HeaderRow (the top one) which you can style using the HeaderRowStyle property of the grid.
2. The IndicatorPresenter (found in the template of the row). You can style that using the RowStyle property of the grid and extracting its template via Blend.

I hope this points you in the right direction.

Greetings,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Brian]

I've got everything pretty much figured out but can't find what controls the header left hand corner.  HeaderRowStyle and IndicatorPresenter are not having any effect on it.  See attached sample.   Also here is the style info that I am including in my app.xaml

 

<Application.Resources>
  <!-- Resources scoped at the Application level should be defined here. -->
  <SampleData:SampleDataSource x:Key="SampleDataSource" d:IsDataSource="True"/>
        <Style x:Key="GridViewAlternateRowStyle" TargetType="telerik:GridViewRow">
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type telerik:GridViewRow}">
                            <telerik:SelectiveScrollingGrid x:Name="grid">
                                <telerik:SelectiveScrollingGrid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </telerik:SelectiveScrollingGrid.ColumnDefinitions>
                                <telerik:SelectiveScrollingGrid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </telerik:SelectiveScrollingGrid.RowDefinitions>
                                <Border x:Name="SelectionBackground" Margin="{TemplateBinding Margin}" MinHeight="{TemplateBinding MinHeight}" Grid.Column="2" Grid.ColumnSpan="2" Background="{TemplateBinding Background}" BorderBrush="{x:Null}" BorderThickness="0" Padding="{TemplateBinding Padding}"/>
                                <Rectangle x:Name="BackgroundRectangle" Opacity="0" Grid.Column="2" Grid.ColumnSpan="2">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#7093F8" Offset="0"/>
                                            <GradientStop Color="#84A2F8" Offset=".43"/>
                                            <GradientStop Color="#84A2F8" Offset=".55"/>
                                            <GradientStop Color="#7093F8" Offset="1"/>
                                    </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                                <Rectangle x:Name="InvalidBorder" Opacity="0" Grid.Column="2" Grid.ColumnSpan="2">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#7093F8" Offset="0"/>
                                            <GradientStop Color="#84A2F8" Offset=".43"/>
                                            <GradientStop Color="#84A2F8" Offset=".55"/>
                                            <GradientStop Color="#7093F8" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                                <telerik:GridViewToggleButton MinHeight="24" MinWidth="24" IsHitTestVisible="{Binding IsExpandable, RelativeSource={RelativeSource TemplatedParent}}" Grid.Column="2" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                                    <telerik:GridViewToggleButton.Opacity>
                                        <Binding Path="IsExpandable" RelativeSource="{RelativeSource TemplatedParent}">
                                            <Binding.Converter>
                                                <telerik:BooleanToOpacityConverter/>
                                            </Binding.Converter>
                                        </Binding>
                                    </telerik:GridViewToggleButton.Opacity>
                                    <telerik:GridViewToggleButton.Visibility>
                                        <Binding Path="HasHierarchy" RelativeSource="{RelativeSource TemplatedParent}">
                                            <Binding.Converter>
                                                <telerik:BooleanToVisibilityConverter/>
                                            </Binding.Converter>
                                        </Binding>
                                    </telerik:GridViewToggleButton.Visibility>
                                </telerik:GridViewToggleButton>
                                <Border Grid.Column="2"  BorderThickness="0,0,1,0" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                                    <Border.Visibility>
                                        <Binding Path="HasHierarchy" RelativeSource="{RelativeSource TemplatedParent}">
                                            <Binding.Converter>
                                                <telerik:BooleanToVisibilityConverter/>
                                            </Binding.Converter>
                                        </Binding>
                                    </Border.Visibility>
                                </Border>
                                <telerik:DataCellsPresenter x:Name="PART_DataCellsPresenter" IsTabStop="False" Grid.Column="3" BorderBrush="White">

                                </telerik:DataCellsPresenter>
                                <telerik:DetailsPresenter x:Name="PART_DetailsPresenter" IsTabStop="False" Visibility="Collapsed" Grid.Column="2" Grid.ColumnSpan="2" Grid.Row="1" DetailsProvider="{TemplateBinding DetailsProvider}">

                                </telerik:DetailsPresenter>
                                <ContentPresenter x:Name="PART_HierarchyChildPresenter" Grid.Column="2" Grid.ColumnSpan="2" Grid.Row="2" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" ContentTemplate="{TemplateBinding ContentTemplate}">
                                    <ContentPresenter.Visibility>
                                        <Binding Path="IsExpanded" RelativeSource="{RelativeSource TemplatedParent}">
                                            <Binding.Converter>
                                                <telerik:BooleanToVisibilityConverter/>
                                            </Binding.Converter>
                                        </Binding>
                                    </ContentPresenter.Visibility>
                                </ContentPresenter>
                                <Border x:Name="PART_IndicatorPresenter" VerticalAlignment="Stretch" Width="24" Visibility="{TemplateBinding RowIndicatorVisibility}" Grid.Column="0" Grid.RowSpan="3" BorderBrush="AntiqueWhite" BorderThickness="0,0,0,0" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                                    <Border.Background>
                                        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                                            <GradientStop Color="#84A2F8"/>
                                            <GradientStop Color="#C9CFF1" Offset=".75"/>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                <Path x:Name="NavigatorIndicator" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center" Width="5" Height="8" Visibility="Collapsed" Data="M254.5,183.75L254.5,193.33333 260.75,188.16682z">
                                        <Path.Fill>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="Black" Offset="0"/>
                                                <GradientStop Color="Black" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                </Border>
                            <Border x:Name="PART_RowBorder" Grid.ColumnSpan="4" Grid.RowSpan="3" BorderBrush="Transparent" BorderThickness="0,0,0,1"/>
                                <telerik:IndentPresenter x:Name="PART_IndentPresenter" Background="{TemplateBinding Background}" IsTabStop="False" Grid.Column="1" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" IndentLevel="{TemplateBinding IndentLevel}">
                                    <telerik:StyleManager.Theme>
                                        <telerik:Office_BlackTheme/>
                                    </telerik:StyleManager.Theme>
                                </telerik:IndentPresenter>
                            </telerik:SelectiveScrollingGrid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter Property="Opacity" TargetName="BackgroundRectangle" Value="1"/>
                                    <Setter Property="Foreground" Value="Black" />
                                </Trigger>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsSelected" Value="False"/>
                                        <Condition Property="IsMouseOver" Value="True"/>
                                    </MultiTrigger.Conditions>
                                    <Setter Property="Opacity" TargetName="BackgroundRectangle" Value="0.5"/>
                                </MultiTrigger>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsSelected" Value="True"/>
                                        <Condition Property="IsCurrent" Value="False"/>
                                    </MultiTrigger.Conditions>
                                    <Setter Property="Opacity" TargetName="BackgroundRectangle" Value="1"/>
                                    <Setter Property="Foreground" Value="Red" />
                                </MultiTrigger>
                                <Trigger Property="IsContentValid" Value="False">
                                    <Setter Property="Opacity" TargetName="InvalidBorder" Value="1"/>
                                </Trigger>
                                <Trigger Property="IsCurrent" Value="True">
                                    <Setter Property="Visibility" TargetName="NavigatorIndicator" Value="Visible"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="Background" Value="#D9DDF5"/>
                <Setter Property="BorderBrush" Value="White"/>
                <Setter Property="MinHeight" Value="22"/>
                <Setter Property="FontWeight" Value="Bold"/>
                <Setter Property="Foreground" Value="Black"/>
                <Setter Property="SnapsToDevicePixels" Value="True"/>

        </Style>

        <Style TargetType="{x:Type telerik:GridViewHeaderCell}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type telerik:GridViewHeaderCell}">
                        <Border BorderBrush="#91A5DA" BorderThickness="0,0,1,0">
                            <Grid>
                                <Border x:Name="GridViewHeaderCell" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
                                <Border x:Name="GridViewHeaderCell_Over" Opacity="0" BorderBrush="#91A5DA" BorderThickness="{TemplateBinding BorderThickness}">
                                    <Border.Background>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#91A5DA" Offset="1"/>
                                            <GradientStop Color="#809DDA" Offset="0"/>
                                            <GradientStop Color="#809DDA" Offset="0.43"/>
                                            <GradientStop Color="#91A5DA" Offset="0.42"/>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                </Border>
                                <Border x:Name="GridViewHeaderCell_Selected" Opacity="0" BorderBrush="#91A5DA" BorderThickness="{TemplateBinding BorderThickness}">
                                    <Border.Background>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#809DDA" Offset="1"/>
                                            <GradientStop Color="#91A5DA" Offset="0"/>
                                            <GradientStop Color="#91A5DA" Offset="0.43"/>
                                            <GradientStop Color="#809DDA" Offset="0.42"/>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                </Border>
                                <Border x:Name="GridViewHeaderCell_SelectedOver" Opacity="0" BorderBrush="#91A5DA" BorderThickness="{TemplateBinding BorderThickness}" Background="White" />
                                <Grid x:Name="PART_HeaderCellGrid">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <telerik:AlignmentContentPresenter  Margin="5,0,3,0" VerticalAlignment="Center" Grid.Column="0" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" ContentTemplate="{TemplateBinding ContentTemplate}" TextAlignment="{TemplateBinding TextAlignment}"/>
                                    <Grid HorizontalAlignment="Right" Background="Transparent" Grid.Column="1">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <Path x:Name="PART_SortIndicator" Stretch="Fill" HorizontalAlignment="Left" Margin="1,0,4,0" VerticalAlignment="Center" Width="5" Height="3" RenderTransformOrigin="0.5,0.5" Data="M0,0L1,0 2,0 3,0 4,0 5,0 5,1 4,1 4,2 3,2 3,3 2,3 2,2 1,2 1,1 0,1 0,0z">
                                            <Path.Fill>
                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                    <GradientStop Color="Black" Offset="0"/>
                                                    <GradientStop Color="Black" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Path.Fill>
                                            <Path.RenderTransform>
                                                <TransformGroup>
                                                    <ScaleTransform ScaleX="1" ScaleY="-1"/>
                                                    <SkewTransform AngleX="0" AngleY="0"/>
                                                    <RotateTransform Angle="0"/>
                                                    <TranslateTransform X="0" Y="0"/>
                                                </TransformGroup>
                                            </Path.RenderTransform>
                                        </Path>
                                        <telerik:FilteringDropDown x:Name="PART_DistinctFilterControl" Margin="0,0,8,0" IsTabStop="False" Visibility="{TemplateBinding FilteringUIVisibility}" Grid.Column="1">
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                        </telerik:FilteringDropDown>
                                    </Grid>
                                </Grid>
                                <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left">
                                    <Thumb.Style>
                                        <Style TargetType="{x:Type Thumb}">
                                            <Setter Property="Width" Value="8"/>
                                            <Setter Property="Background" Value="Transparent"/>
                                            <Setter Property="Cursor" Value="SizeWE"/>
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="{x:Type Thumb}">
                                                        <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"/>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </Thumb.Style>
                                </Thumb>
                                <Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right">
                                    <Thumb.Style>
                                        <Style TargetType="{x:Type Thumb}">
                                            <Setter Property="Width" Value="1"/>
                                            <Setter Property="Background" Value="White"/>
                                            <Setter Property="Cursor" Value="SizeWE"/>
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="{x:Type Thumb}">
                                                        <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"/>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </Thumb.Style>
                                </Thumb>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <MultiTrigger>
                                <MultiTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="GridViewHeaderCell_Over" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.1200000" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </MultiTrigger.EnterActions>
                                <MultiTrigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="GridViewHeaderCell_Over" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.1200000" Value="0"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </MultiTrigger.ExitActions>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True"/>
                                    <Condition Property="SortingState" Value="None"/>
                                </MultiTrigger.Conditions>
                            </MultiTrigger>
                            <Trigger Property="SortingState" Value="None">
                                <Setter Property="Visibility" TargetName="PART_SortIndicator" Value="Hidden"/>
                            </Trigger>
                            <Trigger Property="SortingState" Value="Ascending">
                                <Setter Property="Visibility" TargetName="PART_SortIndicator" Value="Visible"/>
                                <Setter Property="LayoutTransform" TargetName="PART_SortIndicator">
                                    <Setter.Value>
                                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Opacity" TargetName="GridViewHeaderCell_Selected" Value="1"/>
                            </Trigger>
                            <Trigger Property="SortingState" Value="Descending">
                                <Setter Property="Visibility" TargetName="PART_SortIndicator" Value="Visible"/>
                                <Setter Property="LayoutTransform" TargetName="PART_SortIndicator">
                                    <Setter.Value>
                                        <ScaleTransform ScaleX="1" ScaleY="-1"/>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Opacity" TargetName="GridViewHeaderCell_Selected" Value="1"/>
                            </Trigger>

                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True" />
                                    <Condition Property="SortingState" Value="Ascending" />
                                </MultiTrigger.Conditions>
                                <Setter Property="Opacity" TargetName="GridViewHeaderCell_SelectedOver" Value=".3" />
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True" />
                                    <Condition Property="SortingState" Value="Descending" />
                                </MultiTrigger.Conditions>
                                <Setter Property="Opacity" TargetName="GridViewHeaderCell_SelectedOver" Value=".3" />
                            </MultiTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#809DDA" Offset="1"/>
                        <GradientStop Color="#91A5DA" Offset="0"/>
                        <GradientStop Color="#91A5DA" Offset="0.43"/>
                        <GradientStop Color="#809DDA" Offset="0.42"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush" Value="#91A5DA"/>
            <Setter Property="BorderThickness" Value="0,0,0,0"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="DropMarkPen">
                <Setter.Value>
                    <Pen Thickness="60">
                        <Pen.Brush>
                            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                                <GradientStop Color="#809DDA" Offset="1"/>
                                <GradientStop Color="#91A5DA" Offset="0"/>
                                <GradientStop Color="#91A5DA" Offset="0.43"/>
                                <GradientStop Color="#809DDA" Offset="0.42"/>
                            </LinearGradientBrush>
                        </Pen.Brush>
                    </Pen>
                </Setter.Value>
            </Setter>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
        </Style>
        <Style TargetType="{x:Type telerik:GridViewRow}">
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type telerik:GridViewRow}">
                        <telerik:SelectiveScrollingGrid x:Name="grid">
                            <telerik:SelectiveScrollingGrid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </telerik:SelectiveScrollingGrid.ColumnDefinitions>
                            <telerik:SelectiveScrollingGrid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </telerik:SelectiveScrollingGrid.RowDefinitions>
                            <Border x:Name="SelectionBackground" Margin="{TemplateBinding Margin}" MinHeight="{TemplateBinding MinHeight}" Grid.Column="2" Grid.ColumnSpan="2" Background="{TemplateBinding Background}" BorderBrush="{x:Null}" BorderThickness="0" Padding="{TemplateBinding Padding}"/>
                            <Rectangle x:Name="BackgroundRectangle" Opacity="0" Grid.Column="2" Grid.ColumnSpan="2">
                                <Rectangle.Fill>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#7093F8" Offset="0"/>
                                        <GradientStop Color="#84A2F8" Offset=".43"/>
                                        <GradientStop Color="#84A2F8" Offset=".55"/>
                                        <GradientStop Color="#7093F8" Offset="1"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Rectangle x:Name="InvalidBorder" Opacity="0" Grid.Column="2" Grid.ColumnSpan="2">
                                <Rectangle.Fill>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#7093F8" Offset="0"/>
                                        <GradientStop Color="#84A2F8" Offset=".43"/>
                                        <GradientStop Color="#84A2F8" Offset=".55"/>
                                        <GradientStop Color="#7093F8" Offset="1"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <telerik:GridViewToggleButton MinHeight="24" MinWidth="24" IsHitTestVisible="{Binding IsExpandable, RelativeSource={RelativeSource TemplatedParent}}" Grid.Column="2" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                                <telerik:GridViewToggleButton.Opacity>
                                    <Binding Path="IsExpandable" RelativeSource="{RelativeSource TemplatedParent}">
                                        <Binding.Converter>
                                            <telerik:BooleanToOpacityConverter/>
                                        </Binding.Converter>
                                    </Binding>
                                </telerik:GridViewToggleButton.Opacity>
                                <telerik:GridViewToggleButton.Visibility>
                                    <Binding Path="HasHierarchy" RelativeSource="{RelativeSource TemplatedParent}">
                                        <Binding.Converter>
                                            <telerik:BooleanToVisibilityConverter/>
                                        </Binding.Converter>
                                    </Binding>
                                </telerik:GridViewToggleButton.Visibility>
                            </telerik:GridViewToggleButton>
                            <Border Grid.Column="2" BorderBrush="Black" BorderThickness="0,0,1,0" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                                <Border.Visibility>
                                    <Binding Path="HasHierarchy" RelativeSource="{RelativeSource TemplatedParent}">
                                        <Binding.Converter>
                                            <telerik:BooleanToVisibilityConverter/>
                                        </Binding.Converter>
                                    </Binding>
                                </Border.Visibility>
                            </Border>
                            <telerik:DataCellsPresenter x:Name="PART_DataCellsPresenter" BorderThickness="0,0,2,0" BorderBrush="White" IsTabStop="False" Grid.Column="3">
                                <telerik:StyleManager.Theme>
                                    <telerik:SummerTheme/>
                                </telerik:StyleManager.Theme>
                            </telerik:DataCellsPresenter>
                            <telerik:DetailsPresenter x:Name="PART_DetailsPresenter" BorderThickness="0,0,2,0" BorderBrush="White" IsTabStop="False" Visibility="Collapsed" Grid.Column="2" Grid.ColumnSpan="2" Grid.Row="1" DetailsProvider="{TemplateBinding DetailsProvider}">
                                <telerik:StyleManager.Theme>
                                    <telerik:SummerTheme/>
                                </telerik:StyleManager.Theme>
                            </telerik:DetailsPresenter>
                            <ContentPresenter x:Name="PART_HierarchyChildPresenter" Grid.Column="2" Grid.ColumnSpan="2" Grid.Row="2" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" ContentTemplate="{TemplateBinding ContentTemplate}">
                                <ContentPresenter.Visibility>
                                    <Binding Path="IsExpanded" RelativeSource="{RelativeSource TemplatedParent}">
                                        <Binding.Converter>
                                            <telerik:BooleanToVisibilityConverter/>
                                        </Binding.Converter>
                                    </Binding>
                                </ContentPresenter.Visibility>
                            </ContentPresenter>
                            <Border x:Name="PART_IndicatorPresenter" VerticalAlignment="Stretch" Width="24" Visibility="{TemplateBinding RowIndicatorVisibility}" Grid.Column="0" Grid.RowSpan="3" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,0,0" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                                <Border.Background>
                                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                                        <GradientStop Color="#D2C7FF"/>
                                        <GradientStop Color="#E2DBFF" Offset=".75"/>
                                    </LinearGradientBrush>
                                </Border.Background>
                                <Path x:Name="NavigatorIndicator" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center" Width="5" Height="8" Visibility="Collapsed" Data="M254.5,183.75L254.5,193.33333 260.75,188.16682z">
                                    <Path.Fill>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="Black" Offset="0"/>
                                            <GradientStop Color="Black" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Path.Fill>
                                </Path>
                            </Border>
                            <Border x:Name="PART_RowBorder" Grid.ColumnSpan="4" Grid.RowSpan="3" BorderBrush="Transparent" BorderThickness="0,0,0,0"/>
                            <telerik:IndentPresenter x:Name="PART_IndentPresenter" Background="Black" IsTabStop="False" Grid.Column="1" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" IndentLevel="{TemplateBinding IndentLevel}">
                                <telerik:StyleManager.Theme>
                                    <telerik:Office_BlackTheme/>
                                </telerik:StyleManager.Theme>
                            </telerik:IndentPresenter>
                        </telerik:SelectiveScrollingGrid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Opacity" TargetName="BackgroundRectangle" Value="1"/>
                                <Setter Property="Foreground" Value="Black" />
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="False"/>
                                    <Condition Property="IsMouseOver" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Opacity" TargetName="BackgroundRectangle" Value="0.5"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="True"/>
                                    <Condition Property="IsCurrent" Value="False"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Opacity" TargetName="BackgroundRectangle" Value="1"/>
                                <Setter Property="Foreground" Value="Black" />
                            </MultiTrigger>
                            <Trigger Property="IsContentValid" Value="False">
                                <Setter Property="Opacity" TargetName="InvalidBorder" Value="1"/>
                            </Trigger>
                            <Trigger Property="IsCurrent" Value="True">
                                <Setter Property="Visibility" TargetName="NavigatorIndicator" Value="Visible"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Background" Value="#F1EEFF"/>
            <Setter Property="BorderBrush" Value="AntiqueWhite"/>
            <Setter Property="MinHeight" Value="22"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
        </Style>
        <Style TargetType="{x:Type telerik:FrozenColumnsSplitter}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type telerik:FrozenColumnsSplitter}">
                        <StackPanel Width="6" Opacity="1" Orientation="Horizontal">
                            <Border HorizontalAlignment="Left" Width="1" Background="White"/>
                            <Border HorizontalAlignment="Left" Width="1" Background="White"/>
                            <Border HorizontalAlignment="Left" Width="1" Background="White"/>
                            <Border HorizontalAlignment="Left" Width="1" Background="White"/>
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="IsTabStop" Value="False"/>
        </Style>
    </Application.Resources>

 

[Kalin Milanov]

Hello Brian,

Attached I am sending you a sample which applies a template to the header row to style the presenter I mentioned in my previous reply. It is also marked with a comment so it will be easier for you to find.

On a side note the styling you are applying is shaping pretty well. Keep us posted with your progress.

Greetings,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Brian]

Okay here's my latest problem in this endeavor.  If I scroll items off screen and then scroll them back onto screen, the alternate row color disappears.  It will come back if I sort/resort a column.  I have no idea how to fix that.  This is happening with previous posted style information.

Also I don't know if this a result of the styling or just what.  When the grid displays for the first time it is very small then expands to the proper size and a lot of display flicker.  Once it has finished sizing/painting all is fine other than the previous mention issue with alternate row color. 

Also could post an example of styling the scroll bars (slider and background)?  My attempts have caused weird behaviour like columns not sizing properly and column headers disappearing.

Thank you very much for all the assistance.

[Kalin Milanov]

Hi Brian,

We have discovered that there is a bug with the row alternation in conjunction with virtualization which causes the behavior you are experiencing. As we are working on resolving this one of our customers reported that applying both RowStyle and AlternateRowStyle to set the backgrounds provides a decent enough workaround.

As for the ScrollViewer I would suggest you do the following:
Add a GridViewScrollViewer in Blend and start working on its elements one by one. I have also updated my last sample with a "what could be Telerik theme ScrollViewer" though I would leave the final touches to you.

Regards,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.