Inclined (Tilted) header for GridView and GridViewColumn header hide (first column)

[Daryn]

Hi there,

In my project I'm using MVVM and have to do something like in the picture (file attached)

1. First of all I have to change GridView header and do it like tilted list with the "label" and "count"

I did some changed in GridViewHeaderCell:

<DataTemplate x:Key="GridViewHeaderDataTemplate">
    <StackPanel Orientation="Horizontal" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left">
        <StackPanel.RenderTransform>
            <CompositeTransform Rotation="-90"/>
        </StackPanel.RenderTransform>
        <TextBlock RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" Text="Property" HorizontalAlignment="Left">
            <TextBlock.RenderTransform>
                <CompositeTransform SkewX="-22"/>
            </TextBlock.RenderTransform>
        </TextBlock>
        <TextBlock RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" Foreground="Red" HorizontalAlignment="Left">
            <TextBlock.RenderTransform>
                <CompositeTransform SkewX="-22"/>
            </TextBlock.RenderTransform>
            <Run Text=" ("/>
            <Run Text="{Binding Property13}"/>
            <Run Text=")"/>
            </TextBlock>
    </StackPanel>
</DataTemplate>
<Style x:Key="GridViewHeaderCellMainStyle" TargetType="telerik:GridViewHeaderCell">
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="ContentTemplate" Value="{StaticResource GridViewHeaderDataTemplate}"/>
    <Setter Property="Padding" Value="3,0,3,32"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Bottom"/>
    <Setter Property="Background" Value="#19B1B8BA"/>
</Style>

and changed GridViewHeaderRow:

<ControlTemplate x:Key="DataCellsPresenterTemplate" TargetType="telerik:DataCellsPresenter">
    <Grid RenderTransformOrigin="0.5,1">
        <Grid.RenderTransform>
            <CompositeTransform SkewX="-35"/>
        </Grid.RenderTransform>
        <ItemsPresenter/>
        <telerik:FrozenColumnsSplitter x:Name="PART_FrozenColumnsSplitter" HorizontalAlignment="Left"/>
    </Grid>
</ControlTemplate>
<Style x:Key="DataCellsPresenterMainStyle" TargetType="telerik:DataCellsPresenter">
    <Setter Property="Template" Value="{StaticResource DataCellsPresenterTemplate}"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <telerik:GridViewCellsPanel/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="GridViewHeaderRowMainStyle" TargetType="telerik:GridViewHeaderRow">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:GridViewHeaderRow">
                <Grid>
                    <telerik:DataCellsPresenter x:Name="PART_DataCellsPresenter" Style="{StaticResource DataCellsPresenterMainStyle}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="RowIndicatorVisibility" Value="Collapsed"/>
    <Setter Property="IsAlternating" Value="False"/>
    <Setter Property="VerticalAlignment" Value="Bottom"/>
    <Setter Property="Height" Value="135"/>
</Style>

Then created RadGridView control:

<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <telerik:RadGridView DataContext="{Binding Collection}" ItemsSource="{Binding}" HeaderRowStyle="{StaticResource GridViewHeaderRowMainStyle}" Style="{StaticResource RadGridViewMainStyle}" FrozenColumnCount="2" AutoGenerateColumns="False">
        <telerik:RadGridView.Columns>
            <telerik:GridViewDataColumn Header="Property 1" DataMemberBinding="{Binding Property1}" HeaderCellStyle="{StaticResource FirstColumnStyle}" />
            <telerik:GridViewCheckBoxColumn Header="Property 2" DataMemberBinding="{Binding Property2}" HeaderCellStyle="{StaticResource GridViewHeaderCellMainStyle}" />
            <telerik:GridViewDataColumn Header="Property 3" DataMemberBinding="{Binding Property3}" HeaderCellStyle="{StaticResource GridViewHeaderCellMainStyle}" />
            <telerik:GridViewDataColumn Header="Property 4" DataMemberBinding="{Binding Property4}" HeaderCellStyle="{StaticResource GridViewHeaderCellMainStyle}" />
            <telerik:GridViewDataColumn Header="Property 5" DataMemberBinding="{Binding Property5}" HeaderCellStyle="{StaticResource GridViewHeaderCellMainStyle}" />
            <telerik:GridViewDataColumn Header="Property 6" DataMemberBinding="{Binding Property6}" HeaderCellStyle="{StaticResource GridViewHeaderCellMainStyle}" />
            <telerik:GridViewDataColumn Header="Property 7" DataMemberBinding="{Binding Property7}" HeaderCellStyle="{StaticResource GridViewHeaderCellMainStyle}" />
            <telerik:GridViewDataColumn Header="Property 8" DataMemberBinding="{Binding Property8}" HeaderCellStyle="{StaticResource GridViewHeaderCellMainStyle}" />
            <telerik:GridViewDataColumn Header="Property 9" DataMemberBinding="{Binding Property9}" HeaderCellStyle="{StaticResource GridViewHeaderCellMainStyle}" />
            <telerik:GridViewDataColumn Header="Property 10" DataMemberBinding="{Binding Property10}" HeaderCellStyle="{StaticResource GridViewHeaderCellMainStyle}" />
        </telerik:RadGridView.Columns>
    </telerik:RadGridView>
</Grid>

But now I can't change Header content for each column with binding. How is it possible to do it?

2. Then I have to delete or hide the first column header (cell)

I tried to do this:

<Style TargetType="telerik:GridViewHeaderCell" x:Key="FirstColumnStyle">
    <Setter Property="Opacity" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Grid />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

but that just hided header content. And I have to hide all header with the border for first column

I don't now how I can do this. Is it possible to do so?

 

Kind regards,

Daryn

[Vanya Pavlova]

Hello Daryn,



You may try to predefine the Header property of the column and bind it to a property value of your ViewModel as suggested here. As per removing column header Borders you may check the following thread and download a runnable application which demonstrates how to achieve your goal.   

 

All the best,
Vanya Pavlova
the Telerik team

[Daryn]

Hi,
I changed necessary styles and templates and now I have this: image attached

<ControlTemplate x:Key="DataCellsPresenterTemplate" TargetType="telerik:DataCellsPresenter">
    <Grid RenderTransformOrigin="0.5,1">
        <Grid.RenderTransform>
            <CompositeTransform SkewX="-35"/>
        </Grid.RenderTransform>
        <ItemsPresenter/>
        <telerik:FrozenColumnsSplitter x:Name="PART_FrozenColumnsSplitter" HorizontalAlignment="Left"/>
    </Grid>
</ControlTemplate>
<Style x:Key="DataCellsPresenterMainStyle" TargetType="telerik:DataCellsPresenter">
    <Setter Property="Template" Value="{StaticResource DataCellsPresenterTemplate}"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <telerik:GridViewCellsPanel/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="GridViewSlantedHeaderRowMainStyle" TargetType="telerik:GridViewHeaderRow">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:GridViewHeaderRow">
                <Grid>
                    <telerik:DataCellsPresenter x:Name="PART_DataCellsPresenter" Style="{StaticResource DataCellsPresenterMainStyle}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="RowIndicatorVisibility" Value="Collapsed"/>
    <Setter Property="IsAlternating" Value="False"/>
    <Setter Property="VerticalAlignment" Value="Bottom"/>
    <Setter Property="Height" Value="135"/>
</Style>
<Style x:Key="RadGridViewSlantedMainStyle" TargetType="telerik:RadGridView">
    <Setter Property="RowIndicatorVisibility" Value="Collapsed"/>
    <Setter Property="ShowGroupFooters" Value="False"/>
    <Setter Property="ShowInsertRow" Value="False"/>
    <Setter Property="ShowGroupPanel" Value="False"/>
    <Setter Property="CanUserResizeColumns" Value="False"/>
    <Setter Property="CanUserReorderColumns" Value="False"/>
    <Setter Property="CanUserInsertRows" Value="False"/>
    <Setter Property="CanUserDeleteRows" Value="False"/>
    <Setter Property="CanUserFreezeColumns" Value="False"/>
    <Setter Property="IsFilteringAllowed" Value="False"/>
    <Setter Property="HeaderRowStyle" Value="{StaticResource GridViewSlantedHeaderRowMainStyle}"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="AlternateRowBackground" Value="DarkGray"/>
    <Setter Property="SelectionUnit" Value="Cell"/>
</Style>
<Style x:Key="GridViewSlantedHeaderCellMainStyle" TargetType="telerik:GridViewHeaderCell">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" RenderTransformOrigin="0.5,0">
                    <ContentPresenter RenderTransformOrigin="0.5,0.5" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}">
                        <ContentPresenter.RenderTransform>
                            <CompositeTransform Rotation="-90" SkewX="-17.5"/>
                        </ContentPresenter.RenderTransform>
                    </ContentPresenter>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="Background" Value="White"/>
    <Setter Property="BorderThickness" Value="1,1,0,1"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="Width" Value="50"/>
    <Setter Property="Height" Value="135"/>
    <Setter Property="VerticalContentAlignment" Value="Bottom"/>
    <Setter Property="Padding" Value="5,0,3,15"/>
</Style>
<Style x:Key="ColumnHeaderHideStyle" TargetType="telerik:GridViewHeaderCell">
    <Setter Property="BorderThickness" Value="0,0,0,1"/>
    <Setter Property="BorderBrush" Value="#FF848484"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Border BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

and this is in the MainPage:

<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <telerik:RadGridView DataContext="{Binding Collection}" ItemsSource="{Binding}" HeaderRowStyle="{StaticResource GridViewSlantedHeaderRowMainStyle}" Style="{StaticResource RadGridViewSlantedMainStyle}" FrozenColumnCount="2" AutoGenerateColumns="False" Margin="10">
        <telerik:RadGridView.Columns>
            <telerik:GridViewDataColumn Header="Property 1" DataMemberBinding="{Binding Property1}" HeaderCellStyle="{StaticResource ColumnHeaderHideStyle}" />
            <telerik:GridViewCheckBoxColumn Header="Property 2" DataMemberBinding="{Binding Property2}" HeaderCellStyle="{StaticResource GridViewSlantedHeaderCellMainStyle}" />
            <telerik:GridViewDataColumn Header="Property Prop 3" DataMemberBinding="{Binding Property3}" HeaderCellStyle="{StaticResource GridViewSlantedHeaderCellMainStyle}" />
            <telerik:GridViewDataColumn Header="Property 4" DataMemberBinding="{Binding Property4}" HeaderCellStyle="{StaticResource GridViewSlantedHeaderCellMainStyle}" />
            <telerik:GridViewDataColumn Header="Prop 5" DataMemberBinding="{Binding Property5}" HeaderCellStyle="{StaticResource GridViewSlantedHeaderCellMainStyle}" />
            <telerik:GridViewDataColumn Header="Property Property 6" DataMemberBinding="{Binding Property6}" HeaderCellStyle="{StaticResource GridViewSlantedHeaderCellMainStyle}" />
            <telerik:GridViewDataColumn Header="Property 7" DataMemberBinding="{Binding Property7}" HeaderCellStyle="{StaticResource GridViewSlantedHeaderCellMainStyle}" />
            <telerik:GridViewDataColumn Header="Property 8" DataMemberBinding="{Binding Property8}" HeaderCellStyle="{StaticResource GridViewSlantedHeaderCellMainStyle}" />
            <telerik:GridViewDataColumn Header="Property 9" DataMemberBinding="{Binding Property9}" HeaderCellStyle="{StaticResource GridViewSlantedHeaderCellMainStyle}" />
            <telerik:GridViewDataColumn Header="Property 10" DataMemberBinding="{Binding Property10}" HeaderCellStyle="{StaticResource GridViewSlantedHeaderCellMainStyle}" />
        </telerik:RadGridView.Columns>
    </telerik:RadGridView>
</Grid>

As you can see the header content cutted to header width count. How can I fix this bug?

Best regard, Daryn

[Ivan Ivanov]

Hello,

Unfortunately the reason for this behavior is a Framework limitation. As RenderTransform operations are calculated after the Measure-Arrange layout cycle, the only option would be to use a hard-coded width value for the columns that would be large enough to fit the inclined elements.

All the best,
Ivan Ivanov
the Telerik team

[Daryn]

I did it.
I changed this:

<Style x:Key="GridViewSlantedHeaderCellMainStyle" TargetType="telerik:GridViewHeaderCell">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" RenderTransformOrigin="0.5,0">
                    <ContentPresenter RenderTransformOrigin="0.5,0.5" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}">
                        <ContentPresenter.RenderTransform>
                            <CompositeTransform Rotation="-90" SkewX="-17.5"/>
                        </ContentPresenter.RenderTransform>
                    </ContentPresenter>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="Background" Value="White"/>
    <Setter Property="BorderThickness" Value="1,1,0,1"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="Width" Value="50"/>
    <Setter Property="Height" Value="135"/>
    <Setter Property="VerticalContentAlignment" Value="Bottom"/>
    <Setter Property="Padding" Value="5,0,3,15"/>
</Style>

to this:

<Style x:Key="GridViewSlantedHeaderCellMainStyle" TargetType="telerik:GridViewHeaderCell">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" RenderTransformOrigin="0.5,0">
                        <Border Margin="0,0,-86,0" Width="{TemplateBinding Height}" Height="{TemplateBinding Width}" VerticalAlignment="Bottom">
                            <ContentPresenter RenderTransformOrigin="0.5,0.5" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Width="{TemplateBinding Height}">
                                <ContentPresenter.RenderTransform>
                                    <CompositeTransform Rotation="-90" SkewX="-17.5" TranslateX="-45" TranslateY="-65"/>
                                </ContentPresenter.RenderTransform>
                            </ContentPresenter>
                        </Border>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="Background" Value="White"/>
        <Setter Property="BorderThickness" Value="1,1,0,1"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="Width" Value="50"/>
        <Setter Property="Height" Value="135"/>
        <Setter Property="VerticalContentAlignment" Value="Bottom"/>
        <Setter Property="Padding" Value="0"/>
    </Style>

And now the everything are working.

Best regardes,
Daryn