expression_dark theme not displaying as expected

7 posts, 0 answers
  1. Robert
    Robert avatar
    15 posts
    Member since:
    Jul 2012

    Posted 20 Oct 2014 Link to this post

    I started by copying the sample code available for radtimeline themes through the WPF Controls Example app. However, whenever I display the radtimeline using expression_dark theme, you can see that there are white sections of the timeline (shown in the image attachment) when instead I was expecting a shade of grey.

    I tried this using both "UI for WPF Q1 2014" as well as "UI for WPF Q2 2014"
    I don't see what I am missing here.


                <telerik:RadTimeline x:Name="RadTimeline1"
                                     Height="230"
                                     VerticalAlignment="Top"
                                     Margin="6"
                                     PeriodStart="{Binding StartDate, Mode=TwoWay}"
                                     PeriodEnd="{Binding EndDate, Mode=TwoWay}"
                                     StartPath="Date"
                                     DurationPath="Duration"
                                     IsSelectionEnabled="True"
                                     SelectionMode="Extended"
                                     ItemsSource="{Binding Data}"
    telerik:StyleManager.Theme="Expression_Dark"
    >
                    <telerik:RadTimeline.Intervals>
                        <telerik:YearInterval />
                        <telerik:MonthInterval />
                        <telerik:WeekInterval />
                        <telerik:DayInterval />
                    </telerik:RadTimeline.Intervals>
                </telerik:RadTimeline>
  2. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 23 Oct 2014 Link to this post

    Hi Robert,

    I can confirm that this is an issue with the RadTimeline component. I logged it in our feedback portal where you can track its status. I also updated your Telerik points as a small gesture of gratitude for the report. 

    We will do our best to introduce the fix for this issue in next Latest Internal Build.

    As a workaround you can use few approaches:
    • Set the theme on application level in the main window's constructor before the InitializeComponent() call.
      public MainWindow()
      {
          StyleManager.ApplicationTheme = new Expression_DarkTheme();               
          InitializeComponent();
      }
      This will apply the theme for the entire application on the strip lines will be in the correct color
    • Another approach is to set the Theme on the TimelineStripLineControls through an implicit style
      <Window.Resources>
          <Style TargetType="telerik:TimelineStripLineControl">
              <Setter Property="telerik:StyleManager.Theme" Value="Expression_Dark" />
          </Style>
      </Window.Resources>
    • The last and most recommended approach is to use the Implicit Styles mechanism for setting the theme instead using the old StyleManager. The new mechanism has better performance and it is more flexible. You can read about the differences between the styling mechanisms in the Implicit Styles versus StyleManager blog post.

    Please let me know if this helps.

    Regards,
    Martin
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Robert
    Robert avatar
    15 posts
    Member since:
    Jul 2012

    Posted 23 Oct 2014 in reply to Martin Link to this post

    Hi Martin,

    Thanks for your response. I used the implicit style workaround that you documented and it works as expected.

    However, further testing on my end shows a similar issue for another item. I'll call it Group Header since I don't know what the actual name of the item is.

    Attached is a screenshot. Can you please provide me with another implicit style example as a workaround.

    Thanks.
  5. Robert
    Robert avatar
    15 posts
    Member since:
    Jul 2012

    Posted 23 Oct 2014 in reply to Robert Link to this post

    Additional details for my previous post. The issue is that the Group Header text is expected to be White when instead it is Black and has very low contrast to the background. It used to be white ... prior to a recent Telerik library upgrade.
  6. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 28 Oct 2014 Link to this post

    Hello Robert,

    Indeed this is another issue with RadTimeline and we logged it in the feedback portal

    As a workaround you can extract the ControlTemplate of the TimelineItemGroupControl and slightly modify it. Basically you can find the RadToggleButton element with x:Name set to "HeaderButton" inside the template and template bind its Foreground property to the item group control's Foreground.

    <telerik:RadToggleButton x:Name="HeaderButton" Foreground="{TemplateBinding Foreground}"
    ..... >

    Another approach could be to subscribe for the Loaded event of RadTimeline and inside its handler to get all TimelineItemGroupControls with the ChildrenOfType<T>() extension method. Then get their RadToggleButton children and change their Foreground programmatically.

    private void RadTimeline1_Loaded(object sender, RoutedEventArgs e)
    {
        var itemGroups = this.RadTimeline1.ChildrenOfType<TimelineItemGroupControl>();
        foreach (TimelineItemGroupControl group in itemGroups)
        {
            var button = group.FindChildByType<RadToggleButton>();
            if (button != null)
            {
                button.Foreground = group.Foreground;
            }
        }           
    }

    I hope this helps.

    Regards,
    Martin
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Robert
    Robert avatar
    15 posts
    Member since:
    Jul 2012

    Posted 28 Oct 2014 in reply to Martin Link to this post

    Hi Martin,

    Your original solution for setting the StyleManager.Theme within TimelineStripLineControl was easily implemented. However, I'm not as familiar with how to extract the ControlTemplate of the TimelineItemGroupControl to modify it.

    I am preferring the programmatic approach, however, the RadToggleButton is never found within the TimelineItemGroupControl and is therefore always null.

    Is it supposed to be a different control?
  8. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 29 Oct 2014 Link to this post

    Hello Robert,

    I forgot to give you a link to the Editing Control Templates help article. Please excuse me for that.

    As for the approach in code behind, I attached a sample project demonstrating it. Please give it a try and let me know if it helps. 

    Regards,
    Martin
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for WPF is Visual Studio 2017 Ready