Problem applying implicit styles with Windows 7 Theme

10 posts, 0 answers
  1. Ricky Wu
    Ricky Wu avatar
    16 posts
    Member since:
    Apr 2010

    Posted 17 Jul 2012 Link to this post

    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"
        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; }
        }
    }
  2. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 20 Jul 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Ricky Wu
    Ricky Wu avatar
    16 posts
    Member since:
    Apr 2010

    Posted 20 Jul 2012 Link to this post

    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.
  5. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 25 Jul 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Ricky Wu
    Ricky Wu avatar
    16 posts
    Member since:
    Apr 2010

    Posted 26 Jul 2012 Link to this post

    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.
  7. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 31 Jul 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  8. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 05 Sep 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  9. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 07 Feb 2014 Link to this post

    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

    Check out the new Telerik Platform - the only modular platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native apps. Register for the free online keynote and webinar to learn more about the Platform on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT).

  10. Ricky Wu
    Ricky Wu avatar
    16 posts
    Member since:
    Apr 2010

    Posted 10 Feb 2014 in reply to Maya Link to this post

    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?
  11. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 12 Feb 2014 Link to this post

    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

    Check out the new Telerik Platform - the only modular platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native apps. Register for the free online keynote and webinar to learn more about the Platform on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT).

Back to Top
DevCraft banner