Styling Selector Items?

4 posts, 1 answers
  1. John
    John avatar
    5 posts
    Member since:
    Jul 2013

    Posted 17 Apr Link to this post

    How would I go about styling the Selector items in the RadDatePicker flyout?  I found in the documentation information on styling the selector button as well as setting values on Telerik named brushes, but can't find anything about styling the items inside the flyout.

    Specifically, I would like to change the FontFamily and HorizontalAlignment properties on the scrollable text blocks inside the flyout grid (year, month, day).

    I was hoping to extract a template by right-clicking on the element and selecting "Edit a Copy..." but this option is disabled in VS2017.

     

  2. Lance | Tech Support Engineer, Sr.
    Admin
    Lance | Tech Support Engineer, Sr. avatar
    338 posts

    Posted 18 Apr Link to this post

    Hello John,

    You can find the relevant ResourceDictionaries on your machine (this is where 'Edit A Copy' would have copied from).

    Go to the following location, where you'll find a folder for each Telerik assembly.

    C:\Program Files (x86)\Telerik\UI for Universal Windows Platform R1 2017\Binaries


    Those folders contains a Themes subfolder that has all the ResourceDictiories used by that namespace. In the case of the RadDatePicker, which is located in the Input namespace, you'll want to drill down into the Input folder:

    Telerik.UI.Xaml.Input.UWP\Themes

    Now, you have access to all the styles used by all the controls in the Input namespace. Specifically, you'll find the Picker styles in Generic.xaml starting on line 840.





    Lastly, you'll want to open Resources.xaml as well, and go to line 492. This is the ControlTemplate for the RadDatePicker. On line 517 is the popup for the selector.





    One final note:
    Make sure you don't delete anything with a name prefixed with "PART_", these are required by the control to operate properly.

    If you have any further trouble, you can open a support ticket here (you have an enterprise license that carries priority support).

    Regards,
    Lance | Tech Support Engineer, Sr.
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Answer
    Lance | Tech Support Engineer, Sr.
    Admin
    Lance | Tech Support Engineer, Sr. avatar
    338 posts

    Posted 18 Apr Link to this post

    Hi John,

    Just wanted to quickly follow up to call out which parts are responsible for the selector's items. In the Styles, you'll see DateTimeList and DateTimeListItem. In the selector, there are three vertical DateTimeList controls. They render the DateTimeListItems the you scroll through.

    You don't want to touch anything in the actual ControlTemplate, just style the DateTimeList.

    I've attached a simple demo, all the code is on MainPage. I leverage the power of implicit styling (the BasedOn attribute inherits all the style's setter that are not explicitly overridden in your custom style)

    In the demo, go to MainPage.xaml and see line 65 through 70. There I show you how to change the background to GreenYellow (it's normally transparent) and the FontWeight to Light (it's normally bold).


    For your convenience, here'e the entire MainPage XAML:

    XML namespaces needed

    xmlns:input="using:Telerik.UI.Xaml.Controls.Input"
    xmlns:dateTimePickers="using:Telerik.UI.Xaml.Controls.Input.DateTimePickers"


    MainPage content:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <input:RadDatePicker/>
        </Grid>
     
        <Page.Resources>
            <Style TargetType="dateTimePickers:DateTimeList"
                   x:Key="DateTimeListStyle">
                <Setter Property="ItemTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Grid>
                             <ContentControl Content="{Binding HeaderText}"
                                      FontFamily="Segoe UI Semilight"
                                      FontSize="26.667"
                                      Margin="5 0 0 -3"
                                      Padding="0"
                                      VerticalAlignment="Center" />
                             <ContentControl Content="{Binding ContentText}"
                                      Grid.Row="1"
                                      Opacity=".6"
                                      FontFamily="Segoe UI"
                                      FontSize="12"
                                      Margin="5 0 0 4"
                                      VerticalAlignment="Bottom" />
                            </Grid>
     
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
     
            <Style TargetType="dateTimePickers:DateTimeList"
                   BasedOn="{StaticResource DateTimeListStyle}">
                <Setter Property="Background"
                        Value="GreenYellow" />
                <Setter Property="FontFamily"
                        Value="Times New Roman" />
                <Setter Property="FontWeight"
                        Value="Light"/>
            </Style>
        </Page.Resources>


    Here's the result at runtime:




    Regards,
    Lance | Tech Support Engineer, Sr.
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  4. John
    John avatar
    5 posts
    Member since:
    Jul 2013

    Posted 18 Apr in reply to Lance | Tech Support Engineer, Sr. Link to this post

    Thanks!  That was exactly what I was looking for.

    I had been using UI for UWP as a NuGet package, but once I installed it to my system locally, I found the files you referenced.

    John

     

Back to Top