Foreground styling of GroupHeaderRow

3 posts, 1 answers
  1. Loic
    Loic avatar
    7 posts
    Member since:
    May 2014

    Posted 14 Jul 2014 Link to this post

    Hello,

    I am trying to set the color of the text in the GroupHeaderRow of my gridview. 
    Both the title of the group (value of the column grouped) and the text of the aggregate functions.

    When I use the office black theme, everything is in black and when I use the windows 8 theme, the aggregate function text is in blue.

    I use a GroupRowStyleSelector :

    <cstyle:ReconReportStyle x:Key="styleGroupHeaderRow">
                <cstyle:ReconReportStyle.UnmatchedStyle>
                    <Style TargetType="telerik:GroupHeaderRow">
                        <Setter Property="Background" Value="Red"/>
                        <Setter Property="Foreground" Value="Pink"/>                     <!--  this setter does not change anything-->
                    </Style>....


    <telerik:RadGridView ...
    GroupRenderMode="Flat"
    GroupRowStyleSelector="{StaticResource styleGroupHeaderRow}"
    </....>


     What should I do ?








  2. Answer
    Boris
    Admin
    Boris avatar
    276 posts

    Posted 14 Jul 2014 Link to this post

    Hello Loic,

    The easiest way to set the Foreground color of the GroupHeaderRow is to use the GroupHeaderTemplate property of the GridView. 

    <telerik:RadGridView.GroupHeaderTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Header}" Foreground="Yellow"/>
                </StackPanel>
            </DataTemplate>
    </telerik:RadGridView.GroupHeaderTemplate>

    In addition, to set the Background property of the GroupHeaderRow / GridViewGroupRow(depending on the GroupRenderMode), you can use a style.

    GroupRenderMode="Flat":

    <Style TargetType="telerik:GroupHeaderRow" BasedOn="{StaticResource GroupHeaderRowStyle}">
                <Setter Property="Background" Value="Red"/>
    </Style>
        

    GroupRenderMode="Nested":

    <Style TargetType="telerik:GridViewGroupRow" BasedOn="{StaticResource GridViewGroupRowStyle}">
                <Setter Property="Background" Value="Red" />
    </Style>

    As for the aggregate functions, you can edit their ControlTemplate with x:Key="GridViewAggregateResultCellTemplate" directly in the Telerik.Windows.Controls.GridView.xaml file or through style. All you need to do is set the Foreground property of the two TextBlocks. For your conveyance I have implemented the second approach:

    <Style TargetType="telerik:GridViewAggregateResultCell">
                <Setter Property="Template">
                    <Setter.Value>
     
                        <ControlTemplate TargetType="telerik:GridViewAggregateResultCell">
                            <StackPanel Margin="{TemplateBinding Padding}"
                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                        Background="{TemplateBinding Background}"
                                        Orientation="Horizontal">
                                <TextBlock Margin="10 0 0 0"
                                           VerticalAlignment="Center"
                                           Foreground="Yellow"
                                           Text="{Binding Caption}"
                                           TextAlignment="Right" />
                                <TextBlock Margin="3 0"
                                           VerticalAlignment="Center"
                                           Foreground="Yellow"
                                           Text="{Binding FormattedValue}"
                                           TextAlignment="Right" />
                            </StackPanel>
                        </ControlTemplate>
     
                    </Setter.Value>
                </Setter>
            </Style>

    I hope this helps.

    Regards,
    Boris Penev
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  3. Loic
    Loic avatar
    7 posts
    Member since:
    May 2014

    Posted 14 Jul 2014 in reply to Boris Link to this post

    Thank you, it is working.
Back to Top