multi line header- using escape chars and the Simple theme

[Erez]

Hello, following the post:
http://www.telerik.com/community/forums/wpf/gridview/multi-line-header.aspx

I have a much more simple solution using escape chars, however

,as you can see by running the below example, when I add the
telerik:StyleManager.Theme="Simple"
the last text line of the header (ccc) is not displayed.

Is there a way to overcome it ?

Thanks,

Erez


<Window x:Class="ChangeTelerikGridHeaderSize.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="333" Width="582" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">

    <StackPanel Orientation="Horizontal">
        <telerik:RadGridView Name="radGridView1"
                             ShowGroupPanel="False">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn UniqueName="ABC" HeaderText="aaa&#13;bbb&#13;ccc" Width="Auto"/>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>

        <telerik:RadGridView Name="radGridView2"
                             telerik:StyleManager.Theme="Simple"
                             ShowGroupPanel="False">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn UniqueName="ABC" HeaderText="aaa&#13;bbb&#13;ccc" Width="Auto"/>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </StackPanel>
</Window>

[Kalin Milanov]

Hi Erez,

You are experiencing this behavior due to a flaw in template of the header cell. You can go around this by editing the template of GridViewHeaderCell and assigning a MinHeight value which will make it expand to show all the content.

<Style TargetType="{x:Type telerik:GridViewHeaderCell}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type telerik:GridViewHeaderCell}">
                <Grid MinHeight="26" Margin="1,0,1,0" x:Name="PART_HeaderCellGrid" Background="{TemplateBinding Background}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock HorizontalAlignment="Stretch" Margin="5,0,5,0" VerticalAlignment="Center" FontWeight="Bold" Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Content}" TextAlignment="{TemplateBinding TextAlignment}"/>
                    <Grid HorizontalAlignment="Right" Grid.Column="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Path Fill="#FF000000" Stretch="Fill" HorizontalAlignment="Right" Margin="0,0,4,0" x:Name="PART_SortIndicator" VerticalAlignment="Center" Width="7" Height="4" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" Grid.Column="0" Data="F1M-3,-3L4,-3 4,-2 3,-2 3,-1 2,-1 2,4.4703484E-08 1,4.4703484E-08 1,1 2.9802322E-08,1 2.9802322E-08,4.4703484E-08 -1,4.4703484E-08 -1,-1 -2,-1 -2,-2 -3,-2 -3,-3z"/>
                        <telerik:FilteringDropDown x:Name="PART_DistinctFilterControl" IsTabStop="False" Visibility="{TemplateBinding FilteringUIVisibility}" Grid.Column="1">
                            <telerik:StyleManager.Theme>
                                <telerik:SimpleTheme/>
                            </telerik:StyleManager.Theme>
                        </telerik:FilteringDropDown>
                    </Grid>
                </Grid>
                <ControlTemplate.Triggers>
                    <DataTrigger Binding="{Binding Path=Column.SortingState, RelativeSource={RelativeSource Self}}" Value="Ascending">
                        <Setter Property="Visibility" TargetName="PART_SortIndicator" Value="Visible"/>
                        <Setter Property="RenderTransform" TargetName="PART_SortIndicator">
                            <Setter.Value>
                                <ScaleTransform ScaleX="1" ScaleY="-1"/>
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Path=Column.SortingState, RelativeSource={RelativeSource Self}}" Value="Descending">
                        <Setter Property="Visibility" TargetName="PART_SortIndicator" Value="Visible"/>
                        <Setter Property="RenderTransform" TargetName="PART_SortIndicator">
                            <Setter.Value>
                                <ScaleTransform ScaleX="1" ScaleY="1"/>
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Path=Column.SortingState, RelativeSource={RelativeSource Self}}" Value="None">
                        <Setter Property="Visibility" TargetName="PART_SortIndicator" Value="Collapsed"/>
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.468,0.284" StartPoint="0.468,1.191">
                <GradientStop Color="#FF9EB6CE" Offset="0"/>
                <GradientStop Color="#FFF4F8FA" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="DropMarkPen">
        <Setter.Value>
            <Pen Thickness="40">
                <Pen.Brush>
                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                        <GradientStop Color="#00FFFFFF" Offset="0"/>
                        <GradientStop Color="#FF808080" Offset="0.45"/>
                        <GradientStop Color="#FF808080" Offset="0.55"/>
                        <GradientStop Color="#00FFFFFF" Offset="1"/>
                    </LinearGradientBrush>
                </Pen.Brush>
            </Pen>
        </Setter.Value>
    </Setter>
</Style>

On another note please note that we will be marking as obsolete the Simple theme (together with Telerik and Caramel) and will be moving towards themes which we can use in all of our controls. I strongly recommend you moving towards on of the other themes.

Sincerely yours,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Erez]

Hi Kalin,

I tried using the template you gave me, however I could not make the three lines appear in the right side header.
I tried playing around with some of the settings in the template and came still came up with nothing.

Any suggestions ?

Thanks,
Erez

Here is the complete XAML with your addition:

<Window x:Class="ChangeTelerikGridHeaderSize.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="333" Width="582" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">

    <Window.Resources>
        <!--A Style that affects all TextBlocks-->
        <Style x:Key="Style1">
            <Setter Property="Control.Height" Value="50"/>
        </Style>
    </Window.Resources>

    <StackPanel Orientation="Horizontal">
        <telerik:RadGridView Name="radGridView1"
                             ShowGroupPanel="False">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn UniqueName="ABC"  HeaderText="aaa&#13;bbb&#13;ccc" Width="Auto"/>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>

        <telerik:RadGridView Name="radGridView2"
                             telerik:StyleManager.Theme="Simple"
                             ShowGroupPanel="False">
        <telerik:RadGridView.Resources>
                <Style TargetType="{x:Type telerik:GridViewHeaderCell}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type telerik:GridViewHeaderCell}">
                                <Grid MinHeight="26" Margin="1,0,1,0" x:Name="PART_HeaderCellGrid" Background="{TemplateBinding Background}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock HorizontalAlignment="Stretch" Margin="5,0,5,0" VerticalAlignment="Center" FontWeight="Bold" Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Content}" TextAlignment="{TemplateBinding TextAlignment}"/>
                                    <Grid HorizontalAlignment="Right" Grid.Column="1">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <Path Fill="#FF000000" Stretch="Fill" HorizontalAlignment="Right" Margin="0,0,4,0" x:Name="PART_SortIndicator" VerticalAlignment="Center" Width="7" Height="4" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" Grid.Column="0" Data="F1M-3,-3L4,-3 4,-2 3,-2 3,-1 2,-1 2,4.4703484E-08 1,4.4703484E-08 1,1 2.9802322E-08,1 2.9802322E-08,4.4703484E-08 -1,4.4703484E-08 -1,-1 -2,-1 -2,-2 -3,-2 -3,-3z"/>
                                        <telerik:FilteringDropDown x:Name="PART_DistinctFilterControl" IsTabStop="False" Visibility="{TemplateBinding FilteringUIVisibility}" Grid.Column="1">
                                            <telerik:StyleManager.Theme>
                                                <telerik:SimpleTheme/>
                                            </telerik:StyleManager.Theme>
                                        </telerik:FilteringDropDown>
                                    </Grid>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <DataTrigger Binding="{Binding Path=Column.SortingState, RelativeSource={RelativeSource Self}}" Value="Ascending">
                                        <Setter Property="Visibility" TargetName="PART_SortIndicator" Value="Visible"/>
                                        <Setter Property="RenderTransform" TargetName="PART_SortIndicator">
                                            <Setter.Value>
                                                <ScaleTransform ScaleX="1" ScaleY="-1"/>
                                            </Setter.Value>
                                        </Setter>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Path=Column.SortingState, RelativeSource={RelativeSource Self}}" Value="Descending">
                                        <Setter Property="Visibility" TargetName="PART_SortIndicator" Value="Visible"/>
                                        <Setter Property="RenderTransform" TargetName="PART_SortIndicator">
                                            <Setter.Value>
                                                <ScaleTransform ScaleX="1" ScaleY="1"/>
                                            </Setter.Value>
                                        </Setter>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Path=Column.SortingState, RelativeSource={RelativeSource Self}}" Value="None">
                                        <Setter Property="Visibility" TargetName="PART_SortIndicator" Value="Collapsed"/>
                                    </DataTrigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0.468,0.284" StartPoint="0.468,1.191">
                                <GradientStop Color="#FF9EB6CE" Offset="0"/>
                                <GradientStop Color="#FFF4F8FA" Offset="1"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="DropMarkPen">
                        <Setter.Value>
                            <Pen Thickness="40">
                                <Pen.Brush>
                                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                                        <GradientStop Color="#00FFFFFF" Offset="0"/>
                                        <GradientStop Color="#FF808080" Offset="0.45"/>
                                        <GradientStop Color="#FF808080" Offset="0.55"/>
                                        <GradientStop Color="#00FFFFFF" Offset="1"/>
                                    </LinearGradientBrush>
                                </Pen.Brush>
                            </Pen>
                        </Setter.Value>
                    </Setter>
                </Style>
            </telerik:RadGridView.Resources>

            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn UniqueName="ABC" HeaderText="aaa&#13;bbb&#13;ccc" Width="Auto"/>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </StackPanel>

</Window>

[Kalin Milanov]

Hi Erez,

There are two things I noticed int your sample. First when defining a style to affect all TextBlocks you should use the following syntax:

<Window.Resources>
        <!--A Style that affects all TextBlocks-->
        <Style TargetType="TextBlock">
            <Setter Property="Control.Height" Value="50"/>
        </Style>
</Window.Resources>

note that this will affect all the textblocks in the grid including those in the cells and the group headers.

Being the first theme made for the grid the Simple theme does not support most of the customizations options available for Office and Vista themes. Summer will be the next theme which will undergo a customization overhaul and as mentioned in my previous reply Simple will be marked as obsolete in Q2.

However you can achieve the desired result if in addition to the HeaderCell restyling you Edit the template of the GrisdViewHeaderRow which also has some hard coded values.

<Style TargetType="{x:Type telerik:GridViewHeaderRow}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type telerik:GridViewHeaderRow}">
                <Border x:Name="PART_GridViewHeaderRowBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.ColumnSpan="3">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.468,0.284" StartPoint="0.468,1.191">
                                    <GradientStop Color="#FF9EB6CE" Offset="0"/>
                                    <GradientStop Color="#FFF4F8FA" Offset="1"/>
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>
                        <telerik:IndicatorPresenter x:Name="PART_IndicatorPresenter" VerticalAlignment="Stretch" IsTabStop="False" Visibility="{TemplateBinding RowIndicatorVisibility}" Grid.Column="0">
                            <telerik:StyleManager.Theme>
                                <telerik:SimpleTheme/>
                            </telerik:StyleManager.Theme>
                        </telerik:IndicatorPresenter>
                        <telerik:IndentPresenter x:Name="PART_IndentPresenter" IsTabStop="False" Grid.Column="1" IndentLevel="{TemplateBinding IndentLevel}">
                            <telerik:IndentPresenter.ItemTemplate>
                                <DataTemplate>
                                    <telerik:GridViewHeaderIndentCell IsTabStop="False">
                                        <telerik:StyleManager.Theme>
                                            <telerik:SimpleTheme/>
                                        </telerik:StyleManager.Theme>
                                    </telerik:GridViewHeaderIndentCell>
                                </DataTemplate>
                            </telerik:IndentPresenter.ItemTemplate>
                            <telerik:StyleManager.Theme>
                                <telerik:SimpleTheme/>
                            </telerik:StyleManager.Theme>
                        </telerik:IndentPresenter>
                        <telerik:DataCellsPresenter x:Name="PART_DataCellsPresenter" Height="Auto" IsTabStop="False" Grid.Column="2" RadRowItem="{x:Null}">
                            <telerik:StyleManager.Theme>
                                <telerik:SimpleTheme/>
                            </telerik:StyleManager.Theme>
                        </telerik:DataCellsPresenter>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

In this case you will need to set the Height of the PART_DataCellsPresenter to Auto. Also you will need to set this style in <telerik:RadGridView.Resources>.

This should to the trick.

All the best,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.