Problem applying implicit styles with Windows 7 Theme

[Ricky Wu]

I am trying to get RadTreeListView cell contents to be aligned with the top of the cell, in both view and edit modes. Currently I'm doing this with implicit styles for GridViewCell and GridViewEditorPresenter. This works until I apply the Windows7 theme, then it just seems to ignore the GridViewEditorPresenter implicit style.

Here is my code. What am I doing wrong?

MainPage.xaml:

<UserControl x:Class="AlignTop.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.Resources>
        <Style TargetType="telerik:GridViewCell">
            <Setter Property="VerticalContentAlignment" Value="Top" />
        </Style>
        <Style TargetType="telerik:GridViewEditorPresenter">
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadTreeListView x:Name="Tree"
                                 ItemsSource="{Binding Items}"
                                 AlternationCount="2"
                                 AlternateRowBackground="#F1F4F8"
                                 AutoGenerateColumns="False"
                                 CanUserFreezeColumns="False"
                                 EnableRowVirtualization="True"
                                 EnableColumnVirtualization="True"
                                 GridLinesVisibility="None"
                                 RowIndicatorVisibility="Collapsed">
            <telerik:RadTreeListView.ChildTableDefinitions>
                <telerik:TreeListViewTableDefinition ItemsSource="{Binding Items}" />
            </telerik:RadTreeListView.ChildTableDefinitions>

            <telerik:RadTreeListView.Columns>
                <telerik:GridViewDataColumn UniqueName="Name"
                                            DataMemberBinding="{Binding Name}" />
                <telerik:GridViewDataColumn UniqueName="Description"
                                            DataMemberBinding="{Binding Description}"
                                            Width="300">
                    <telerik:GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Description}"
                                       TextWrapping="Wrap" />
                        </DataTemplate>
                    </telerik:GridViewColumn.CellTemplate>
                    <telerik:GridViewColumn.CellEditTemplate>
                        <DataTemplate>
                            <TextBox Text="{Binding Description}"
                                     TextWrapping="Wrap" />
                        </DataTemplate>
                    </telerik:GridViewColumn.CellEditTemplate>
                </telerik:GridViewDataColumn>
            </telerik:RadTreeListView.Columns>
        </telerik:RadTreeListView>
    </Grid>
</UserControl>

MainPage.xaml.cs:

using System.Collections.Generic;
using System.Windows.Controls;
using Telerik.Windows.Controls;

namespace AlignTop
{
    public partial class MainPage : UserControl
    {
        private const string _loremIpsum = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

        public MainPage()
        {
            StyleManager.ApplicationTheme = new Windows7Theme();
            InitializeComponent();
            Tree.DataContext = this;
        }

        private IEnumerable<Item> _items;
        public IEnumerable<Item> Items
        {
            get
            {
                if (_items == null)
                {
                    Item item1 = new Item { Name = "Item1", Description = _loremIpsum };
                    Item item2 = new Item { Name = "Item2", Description = _loremIpsum };
                    Item item3 = new Item { Name = "Item3", Description = _loremIpsum, Items = new List<Item> { item1, item2 } };
                    Item item4 = new Item { Name = "Item4", Description = _loremIpsum };
                    Item item5 = new Item { Name = "Item5", Description = _loremIpsum };
                    Item item6 = new Item { Name = "Item6", Description = _loremIpsum, Items = new List<Item> { item4, item5 } };
                    Item item7 = new Item { Name = "Item7", Description = _loremIpsum };
                    _items = new List<Item> { item3, item6, item7 };
                }
                return _items;
            }
        }
    }

    public class Item
    {
        public string Name { get; set; }
        public string Description { get; set; }
        public IEnumerable<Item> Items { get; set; }
    }
}

[Dimitrina]

Hi,

Thank you to the full code snippets.

I have created a test project including the latest binaries targeting Silverligh5. I have placed two TteeListViews one with the Office_Black, and the other with Windows7.  I could not notice any difference though.

May I ask you to define the style like so:

<Style TargetType="telerik:GridViewEditorPresenter" telerik:StyleManager.BasedOn="Windows7">
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>

Would you please let me know what are the binaries you use? Are they the ones from the Binaries folder version 2012.2.607 (Q2 2012)?

Kind regards,
Didie
the Telerik team

[Ricky Wu]

Hi Didie,

Thanks for the reply. I'm using 2012.2.709.1050 binaries. Adding telerik:StyleManager.BasedOn="Windows7" to the style did not make any difference for me - the cell editors are still center-aligned. I have attached a screenshot.

[Vanya Pavlova]

Hi Ricky,

 

Thank you for reporting this! We were able to replicate the behavior you described. Rather unfortunately the style targeted at GridViewEditorPresenter is not evaluated in a theme different than the default one (Office_Black). For the time being I may suggest you to style RadGridView utilizing the approach of Implicit styles where such a behavior cannot be observed. Please check the following online help article for further reference.   

Regards,
Vanya Pavlova
the Telerik team

[Ricky Wu]

Thanks again for the reply. I can see the benefit of using implict styles, but modifying our entire application just to change something minor like cell vertical alignment may not be practical. Will there be a fix for the themes that don't use the GridViewEditorPresenter style (or at least the Windows 7 theme)? If so, are we talking about a hotfix, the next quarterly release, or beyond that? I know this is a difficult question to answer, but this information would allow me to properly weigh the costs and benefits.

[Dimitrina]

Hi,

 We are currently planning what to be fixed for the next official release and this question will be raised as well. I will update you with our plans once I have more relevant information.

Regards,
Didie
the Telerik team

[Dimitrina]

Hello,

 We have discussed your case. This is how the RadGridView works with the old Theming mechanism when an Application Theme is set. We do not have plans to change it further.

You can use the new Theming mechanism (with Implicit Styles) as my colleague have already suggested. 

All the best,
Didie
the Telerik team

[Maya]

Hello Ricky,

I have prepared a sample project using the code-snippets you provided with our current official release - Q3 2013 SP2. The only thing I changed was the setting of VerticalContentAlignment property of GridViewEditorPresenter to "Top" since I understood that you want the content to be at the top no matter if it is in view or edit mode. Is that correctly or am I missing something here ? 
Please take a look at the sample attached and let me know whether this works as you would expect.

Regards,
Maya
Telerik

[Ricky Wu]

Hi Maya,

Thanks for looking into this again. The effect we're trying to achieve is that the editor should always take up the full width and height of the cell, but the editor's contents should be top-aligned.

Is this possible?

[Maya]

Hello Ricky,

In this case you can define template and bind the Height property of to the parent row. Please take a look at the attached modified project. Is that the behavior that you expect ?

Regards,
Maya
Telerik