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

[Farid]

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,

Farid