This is a migrated thread and some comments may be shown as answers.

expression_dark theme not displaying as expected

6 Answers 147 Views
TimeLine
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Robert asked on 20 Oct 2014, 07:31 PM
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>

6 Answers, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 23 Oct 2014, 03:02 PM
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.

 
0
Robert
Top achievements
Rank 1
answered on 23 Oct 2014, 09:00 PM
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.
0
Robert
Top achievements
Rank 1
answered on 23 Oct 2014, 09:02 PM
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.
0
Martin Ivanov
Telerik team
answered on 28 Oct 2014, 03:14 PM
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.

 
0
Robert
Top achievements
Rank 1
answered on 28 Oct 2014, 07:23 PM
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?
0
Martin Ivanov
Telerik team
answered on 29 Oct 2014, 06:22 AM
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.

 
Tags
TimeLine
Asked by
Robert
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Robert
Top achievements
Rank 1
Share this question
or