Gradient in GridViewVirtualizingPanel

[Lowie]

Hi

Is it possible to add a gradient (shown in attachment) at the top and bottom of the gridviewVirtualizingPanel (or ColumnCollection)?
Currently I do this by setting a LinearGradientBrush on my Radgridview.background and set the rowbackground transparent. But when I resize my window, the gradient disappears. 

<t:RadGridView.Background>
    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="White" Offset="0" />
        <GradientStop Color="Gray" Offset="0.07" />
        <GradientStop Color="White" Offset="0.1" />
        <GradientStop Color="White" Offset="0.97" />
        <GradientStop Color="Gray" Offset="1" />
    </LinearGradientBrush>
</t:RadGridView.Background>

Thanks in advance
Lowie

[Vanya Pavlova]

Hello Lowie,



Can you please point us in what way the gradient disappears when you resize the window?


Kind regards,
Vanya Pavlova
the Telerik team

[Lowie]

Hello

It disappears because of the dynamic offset. The gradient will become smaller (or bigger) on resizing. My question is, is it possible to add a gradient with theming?

Thanks in advance
Lowie

[Vanya Pavlova]

Hi Lowie,


Thank you for getting back to us!
In general, you are right, however the gradient do not disappear - it simply changes the offset.
If you want to add the default gradient for Background a specific theme only for RadGridView you may define an implicit style based on a particular theme (in your case Windows 8) and set its Background from there. You may check the following online help article for further reference. Furthermore Windows8 allows you to define your own resources and to modify a specific color from this theme, as described here.
Hope this helps!



Regards,
Vanya Pavlova
the Telerik team

[Lowie]

Hello

In my original example, the top gradient 'disappears' behind the header, the bottom one will become smaller. This is because the gradient is set on the gridview and not the area where the rows are generated.

I tried to edit the Windows 8 GridView theme like this but it did not work: 

<grid:GridViewVirtualizingPanel x:Name="PART_GridViewVirtualizingPanel">
                        <grid:GridViewVirtualizingPanel.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="White" Offset="0" />
                                <GradientStop Color="Gray" Offset="0.07" />
                                <GradientStop Color="White" Offset="0.1" />
                                <GradientStop Color="White" Offset="0.97" />
                                <GradientStop Color="Gray" Offset="1" />
                            </LinearGradientBrush>
                        </grid:GridViewVirtualizingPanel.Background>
                    </grid:GridViewVirtualizingPanel>
                </grid:GridViewScrollViewer>

And it will be possible to choose between certain themes, so it would be nice if I can set this in the windows.xaml file. 

Thanks in advance
Lowie

[Vanya Pavlova]

Hi Lowie,



Looking at the snippet provided everything should work as expected.
I am attaching you runnable project, which demonstrates how to apply the desired Background for GridViewVirtualizingPanel through editing Telerik.Windows.Controls.GridView.xaml ResourceDictionary.




Kind regards,
Vanya Pavlova
the Telerik team

[Lowie]

If I add items to the gridview in the example, the gradient isn't set anymore.
So I guess it is not possible?

[Vanya Pavlova]

Hello Lowie,


Since the GridViewRows are white by default in Windows 8 theme you cannot see the previously defined gradient. You may set the Transparent Background for these items through editing the Telerik.Windows.Controls.GridView.xaml as follows:

<Style x:Key="GridViewRowStyle" TargetType="grid:GridViewRow">
        .....
    <Setter Property="Template" Value="{StaticResource GridViewRowTemplate}" />
    <Setter Property="Background" Value="Transparent" />
       ......
   </Style>

Then you may see a result similar to the one demonstrated at the attached image. However the offset will be changed each time you add new items. If you have 1000 items in your grid the offset will be stretched against these items and the effect will be lost. The attached image demonstrates a result with 10 items in the grid.


All the best,
Vanya Pavlova
the Telerik team

[Lowie]

Strange, I had the GridViewRowStyle set to transparent in Windows.resources, when I changed this to the controls.gridview.xaml it worked. Thanks a lot!

Is it possible to set the gradient in windows.resources? Because the user can choose between skins and it would be easier to set the gradient only once for al the themes.

Thanks in advance
Lowie

[Vanya Pavlova]

Hi Lowie,


The previous code snippet demonstrates the style, which is directly located within Telerik.Windows.Controls.GridView.xaml. If you want to move it to the resource collection of MainWindow you should base the style on the one located within this Resource Dictionary:

<Style TargetType="telerik:GridViewRow" BasedOn="{StaticResource GridViewRowStyle}">
               <Setter Property="Background" Value="Transparent"/>
           </Style>

It's simple style inheritance and the result will be the same as you are overriding simple properties of this element. However the same cannot be done with GridViewVirtualizingPanel, because it is not supposed to be themed. By that reason parent style with name GridViewVirtualizingPanelStyle do not exist. In this case you should get the whole style for RadGridView and move it to Windows.Resources.
Please keep in mind that the styles are theme specific and it is much more clear to load different Resource Dictionaries for different themes rather than to keep several styles for RadGridView just for a single gradient.  I believe that the following help article will be useful on that matter.


Kind regards,
Vanya Pavlova
the Telerik team

[Lowie]

Hello Vanya

Ok, that's why I could not set it in windows.resources. Thanks a lot!

Greetings
Lowie