Hi guys!
I would like to customize as much as possible this wonderful control that is the TimeBar.
At the very least I would like to be able to change the color of the blue thumb handles:
- if possible, I would like to change t only for my current page, not system-wide
- if possible, I would like to find a way to style any control in Telerik in the same manner
My question might be too large in scope, but if you could help me style this control for my current page it would be greatly appreciated, I cannot find anywhere the items that are customizable in the RadTimeBar docs. p.s. the TimeBar tag doesn't exist in this forum neither in the choices below my post. Thanks!!
2 Answers, 1 is accepted
Hello Community,
I am replying with a 2nd answer that also works if you're only looking to change colors that are defined as ThemeResource brushes.
- Go to C:\Program Files (x86)\Progress\Telerik UI for WinUI [version]\Binaries\Win32\Telerik.WinUI.Controls\DataVisualization\Themes
- Open any of the ThemeResourceDark.xaml (or ThemeResourceLight.xaml, it doesn't matter)
- Observable all of the x:Key names for the brushes and properties for TimeBar that can be overridden because they're used via the ThemeResource extension
Take that resource name and set a new value in your application's resources (at the App, UserControl or Control level). Here's a list, as of the time of this reply, that are available to set:
Example
Let's say you wanted to change the SliderThumbs background color, you'll find a TelerikTimeBar_SliderThumbsBackground available to be overridden.
<Grid>
<Grid.Resources>
<SolidColorBrush x:Key="TelerikTimeBar_SliderThumbsBackground">Red</SolidColorBrush>
<SolidColorBrush x:Key="TelerikTimeBar_SelectionThumbThumbsBackground">Red</SolidColorBrush>
<SolidColorBrush x:Key="TelerikTimeBar_SelectionIndicatorBackground">Red</SolidColorBrush>
</Grid.Resources>
<controls:RadTimeBar x:Name="timeBar">
<controls:RadTimeBar.Intervals>
<dataVisualization:YearInterval />
<dataVisualization:MonthInterval />
<dataVisualization:WeekInterval />
<dataVisualization:DayInterval />
</controls:RadTimeBar.Intervals>
</controls:RadTimeBar>
</Grid>Here's the result at runtime:
Regards,
Lance | Manager Technical Support
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Hello Eric,
I think you accidentally opened this question in the wrong forum. this is the Telerik UI for WinUI forums, which is for WinUI 3. I think you meant to open the question in the Telerik UI for WPF forums, which is for WPF.
Side Note: If you did actually intend to mean WinUI Rangeslider, you can find all the information you need to style the components of the RangeSlider here => Customize WinUI RangeSlider Control and its Parts - Telerik UI for WinUI
RadTimeBar Custom Styling
To understand how to style the RadTimeBar, please visit https://docs.telerik.com/devtools/wpf/controls/radtimebar/overview and carefully read through all the steps. What you particularly need to pay attention to is Step #5.
We avoid putting the entire XAML into the documentation because it is subject to change and is different for every single theme, and can be subject to change between releases. So, we ask that you take a very easy step in Visual Studio/Blend to get a complete copy of the style for the theme you're using...
- Right-click on the component in the Document Outline
- Select "Edit Template (or sometimes it might show 'Edit Style')
- Select "Edit a Copy".
It will go into the XAML resource dictionary for the component and make an identical copy of the entire thing for you and ask where you want it (in App.xaml Resources, local view's Resources or a separate Resource Dictionary).
Demo
You didn't say what theme you're using, so I cannot give you 100% correct demo until I know that info. So I recommend following my 3 steps above to extract the base style for your exact scenario.
In case you are using the Fluent theme, I have already extracted the style so I could take some screenshots for you. I have attached my MainPage for you to see.
IMPORTANT: My demo uses the NoXaml binaries, therefore it will use the BasedOn paradigm. If you are using the Xaml binaries, then you still need to extract it for yourself because you need that specific styling inheritance instead.
Technical Support
If you run into any further issues, I recommend opening a Support Ticket instead of a forum post as after this point, your questions will be more specific to your scenario, and you can attach your code files in the ticket. Here's a link that will let you skip right to the ticket submission page.
Regards,
Lance | Manager Technical Support
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
Hi Lance!
Thank you so much for your help! I am indeed asking the question for WinUI3. I will look into your explanation carefully.
Please note that my question was really for the WinUI TimeBar control. As for the RangeSlider comment, it's just that I could not assign a TimeBar tag to my comment in the forum - it looks like you've done it on your end. Thanks!!!
Hi Eric, thank you for the confirmation.
Since you are indeed using WinUI, my explanation for the styling is only partially relevant. Ultimately, my guidance is still the same: use the "Edit a Copy" trick to get a copy of the base style and templates... just don't use the WPF docs I linked to as that will add unnecessary confusion.
Additionally, you don't need to be concerned about Xaml/NoXaml variants because that is only relevant for WPF. I will work on a demo for you and reply back when that's done.
As you've mentioned, there is not yet an equivalent article in the WinUI docs, so I will ask the dev team to add more information to the Overview TimeBar - Telerik UI for WinUI documentation about styling and templates.
Finally, you're correct that even though there is a "TimeBar / WinUI" category, there is no "TimeBar" tag for this forum. I will ask the WinUI team to get that fixed as soon as they can. Thank you for bringing that to our attention, as a small token of appreciation, I have awarded your account some Telerik Points.
Hi Eric,
Please accept my apologies... misled you a little; the Document Outline doesn't appear to work for WinUI3 packages project types (in VS2022 or Blend), so there's no extract option.
I do have a way for you to easily get the styles for anything you want.
- Go to the following folder => C:\Program Files (x86)\Progress\Telerik UI for WinUI 2.6.0\Binaries\Win32\Telerik.WinUI.Controls
- Then drill down to the control you want to get the styles/template => \DataVisualization\Themes
- There you will see a bunch of XAML ResourceDictionaries, always start with the Resources.xaml file.
This is where VS2022/Expression Blend would have extracted the styles from. so, the only difference now is that you'll need to open the Resources.xaml file and use CTRL + F to find the style you need.
In most situations, the best way to find the style is to search for the type nam:
Finally, as you scroll through that region, you will find style names that clearly explain what it does. For example:
Once you have the styles you want, copy/paste them insto your project's view, then modify as needed.
In Practice
For example, with the ThumbStyle, you want to start with the SelectionThumbStyle and copy it into your project. Now, be careful to also copy in any dependent styles. In this case we have three more to add: SelectionRangeStyle, SelectionThumbHandleStyle and SelectionThumbHandleStyle_Flipped.
Once you have them in place, add a prefix to the names so they don't clash with our default resources. In the example, below, everything is original, except I added the "MY_" prefix to all the names:
<Window x:Class="EricApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:Telerik.UI.Xaml.Controls"
xmlns:dataVisualization="using:Telerik.UI.Xaml.Controls.DataVisualization"
xmlns:core="using:Telerik.Core">
<Grid>
<Grid.Resources>
<Style x:Key="MY_SelectionThumbHandleStyle"
TargetType="Thumb">
<Setter Property="CornerRadius"
Value="{ThemeResource TelerikControlCornerRadius}" />
<Setter Property="Background"
Value="{ThemeResource TelerikTimeBar_SelectionThumbThumbsBackground}" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="IsTabStop"
Value="False" />
<Setter Property="controls:CursorExtensions.Cursor"
Value="SizeWestEast" />
<Setter Property="Width"
Value="12" />
<Setter Property="Height"
Value="32" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid>
<controls:CommandManager.InputBindings>
<controls:InputBindingCollection>
<controls:MouseBinding MouseAction="LeftDoubleClick"
Command="{core:Static Member=dataVisualization:RadTimeBarCommands.SelectGroupIntervalEnd}" />
</controls:InputBindingCollection>
</controls:CommandManager.InputBindings>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="Border.Background"
Value="{ThemeResource TelerikTimeBar_SelectionThumbThumbsBackgroundPointerOver}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="Border.Background"
Value="{ThemeResource TelerikTimeBar_SelectionThumbThumbsBackgroundPressed}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
CornerRadius="{TemplateBinding CornerRadius}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MY_SelectionThumbHandleStyle_Flipped"
TargetType="Thumb"
BasedOn="{StaticResource MY_SelectionThumbHandleStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid>
<controls:CommandManager.InputBindings>
<controls:InputBindingCollection>
<controls:MouseBinding MouseAction="LeftDoubleClick"
Command="{core:Static Member=dataVisualization:RadTimeBarCommands.SelectGroupIntervalStart}" />
</controls:InputBindingCollection>
</controls:CommandManager.InputBindings>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="Border.Background"
Value="{ThemeResource TelerikTimeBar_SelectionThumbThumbsBackgroundPointerOver}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="Border.Background"
Value="{ThemeResource TelerikTimeBar_SelectionThumbThumbsBackgroundPressed}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
CornerRadius="{TemplateBinding CornerRadius}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MY_SelectionRangeStyle"
TargetType="Thumb">
<Setter Property="Foreground"
Value="{ThemeResource TelerikTimeBar_SelectionThumbRangeForeground}" />
<Setter Property="BorderBrush"
Value="{ThemeResource TelerikTimeBar_SelectionThumbRangeBorder}" />
<Setter Property="BorderThickness"
Value="2 2 2 0" />
<Setter Property="Background"
Value="#01FFFFFF" />
<Setter Property="IsTabStop"
Value="False" />
<!--*** Margin Left and Margin Right = (SelectionThumbHandleStyle.Width - SelectionRange.BorderThickness)/2 ***-->
<!-- (5 - 1)/2 = 2 -->
<Setter Property="Margin"
Value="5 1 5 1" />
<Setter Property="controls:CursorExtensions.Cursor"
Value="Hand" />
<Setter Property="HorizontalContentAlignment"
Value="Center" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid>
<controls:CommandManager.InputBindings>
<controls:InputBindingCollection>
<controls:MouseBinding MouseAction="LeftDoubleClick"
Command="{core:Static Member=dataVisualization:RadTimeBarCommands.SelectGroupInterval}" />
</controls:InputBindingCollection>
</controls:CommandManager.InputBindings>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="SelectionRangeInnerVisual.Background"
Value="{ThemeResource TelerikTimeBar_SelectionThumbRangeBackgroundPointerOver}" />
<Setter Target="SelectionRangeInnerVisual.Opacity"
Value="0.2" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto"
MinHeight="32" />
</Grid.RowDefinitions>
<Border x:Name="SelectionRangeVisual"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Border x:Name="SelectionRangeInnerVisual"
Background="{TemplateBinding Background}"
Opacity="0" />
</Border>
<Border Grid.Row="1"
x:Name="TextWrapper"
Background="{TemplateBinding BorderBrush}">
<TextBlock x:Name="Title"
Text="{Binding ElementName=PART_SelectionThumb, Path=Title}"
Margin="{ThemeResource TelerikTimeBar_SelectionThumbRangeMargin}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MY_SelectionThumbStyle"
TargetType="dataVisualization:SelectionThumb">
<Setter Property="Margin"
Value="-7 0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="dataVisualization:SelectionThumb">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Thumb Name="PART_CenterHandle"
Style="{StaticResource MY_SelectionRangeStyle}" />
<Thumb Name="PART_LeftHandle"
HorizontalAlignment="Left"
Style="{StaticResource MY_SelectionThumbHandleStyle_Flipped}" />
<Thumb Name="PART_RightHandle"
HorizontalAlignment="Right"
Style="{StaticResource MY_SelectionThumbHandleStyle}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<controls:RadTimeBar x:Name="timeBar"
SelectionThumbStyle="{StaticResource MY_SelectionThumbStyle}">
<controls:RadTimeBar.Intervals>
<dataVisualization:YearInterval />
<dataVisualization:MonthInterval />
<dataVisualization:WeekInterval />
<dataVisualization:DayInterval />
</controls:RadTimeBar.Intervals>
</controls:RadTimeBar>
</Grid>
</Window>
Rank 1
Iron
No worries! I figured out quickly Blend could not open the template.
Thank you so much for your hard work!... Your instructions and amazing example will get me going a long way! have a great day!
Thank you for the kinds words! Yeah, what I showed you is the ultimate power users guide to all the XAML you will ever need. That is literally the source code for the front-end.
Just make a judgment call on what subfolder you need to look in, this is obvious from the xmlns that the control uses. For example, the dataVisualization:RadTimeBar, you'll find all the XAML in the .../DataVisualization/Themes folder. Or if you wanted the input:RadNumericUpDown control, then it's in the .../Input/Themes subfolder, and so forth.
I'm happy that I was able to point you in the right direction. Have a great rest of the day!
Rank 1
Iron
Hi Lance,
unfortunately I've never been able to make your example work. I have tried with my current project without success, and now trying to use it in an empty app it's not working neither. I am probably missing something simple, please excuse my lack of experience.
If you would be so kind as to test things on your side it would be appreciated. I include the app I am testing with.
Also, I understand the concept of Templates, but I find it waayy overkill to have to copy the entire template - if it's indeed the case - to simply change the color of the timebar from blue to gray... It would be great if there was a simple override system. Once again, I am not the most experienced developer so I could be missing obvious things.
https://drive.google.com/file/d/1SbEKc30Q6GkFdcz-4GEEcUCTbqfW8wDX/view?usp=sharing
Thanks
Hi Eric,
Thank you for the project, with it I was able to quickly isolate the problem. for future reference, please delete the bin and obj folder before zipping up a project (these are automatically created by Visual Studio when you do a build). This will reduce the ZIP size from 77mb to just 17kb.
Okay, onto the issue... you forgot to merge the Telerik theme dictionary in App.xaml, this is a prerequisite for use of any Telerik WinUI controls.
<Application
x:Class="TestApp.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestApp">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
<ResourceDictionary Source="ms-appx:///Telerik.WinUI.Controls/Themes/Generic.xaml"/>
</ResourceDictionary.MergedDictionaries>
<!-- Other app resources here -->
</ResourceDictionary>
</Application.Resources>
</Application>That is why you got a COM exception, once it's fixed you will see the TimeBar at runtime.
About the need for using the entire original Style/ControlTemplate. Depending on the hierarchy you can use BasedOn to inherit the rest of a style from the original source, but it can get really tricky, really fast. As an example, here's a style that inherits from the base SelectionThumbStyle and only changes the BackgroundColor.
<Style x:Key="MY_SelectionThumbHandleStyle"
TargetType="Thumb"
BasedOn="{StaticResource SelectionThumbHandleStyle}">
<!-- <Setter Property="Background" Value="{ThemeResource TelerikTimeBar_SelectionThumbThumbsBackground}" /> -->
<Setter Property="Background" Value="Red" />
<Style>So after you get everything working the way you want it, then you can take a 2nd look at what styles might be convertible to using BasedOn. But I urge caution here, take your time and always keep a backup copy of the original style before you start stripping it down.
I have reattached your project, with some minor changes, and this is the result:
Rank 1
Iron
Hi Lance,
sorry for being so annoying... Please know that for each question I spend many hours trying by myself lol... I have 2 small questions:
1. I have no idea why, but in my case the blue letters (the months) disappear. I cannot reproduce this in a simple app example. Can I brute-force their visibility to be on? In my case, the letters disappear if I remove the Width property. If I put the width property back on the letters reappear (I have a bug filed for another width bug that will be fixed in 2.7).
2. I could never find how to style the scrollbar below (selection thumb + resizable scrollbar). Could you tell me which property must be changed please?
Thank you so much for your patience, I should be done after this. It's important for me because it's in the middle of my app page and it's a very important visual component in my design.
(if I put the width property back on:)
Hi Eric,
Don't worry, you're not being annoying, that's what we're here for!
For the latest set of the questions, due to their level of specialization and individualization, I recommend opening a Support Ticket instead of a forum post. This will guarantee a 1:1 discussion with the WinUI team's Technical support Engineers (or developers if an escalation is needed).
Here's how to open a ticket
- Go to https://www.telerik.com/account/support-center/contact-us and select "Get Technical Support"
- Ask your question, there will be help results, but scroll to the bottom and select the "Contact Team" button
- Fill out the form and submit it, this goes directly to the support engineers' queue.
Speeding Things Up
For your convenience and to save you some time, I have manually created the ticket for you this time. Find it here => https://www.telerik.com/account/support-center/view-ticket/1615090.
Although it's not absolutely necessary in this case, I would still recommend that you reply again to the ticket and attach the code you've already written.... preferably the entire UserControl so they can see everything affecting the TimeBar, but ideally update the same app we've been using so it replicates the issue (dont forget to delete the bin and obj folders before zipping it up).
<Page.Resources> <ResourceDictionary> <Style x:Key="NoSlider" TargetType="tcontrols:RadTimeBar"> <Setter Property="Opacity" Value="0.25" /> <Setter Property="Background" Value="Transparent" /> </Style> </ResourceDictionary> </Page.Resources>and later:
<tcontrols:RadTimeBar x:Name="timeBar" Height="150" Style="{StaticResource NoSlider}">