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

Changing foreground and background of datepicker

1 Answer 78 Views
DatePicker and DateSelector
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
imsp
Top achievements
Rank 1
imsp asked on 20 Apr 2014, 08:45 AM
I'm having a devil of a time trying to change the foreground fontweight and background of a RadDatepicker control , specifically the default text block that shows before you click on it to expend the control.I want to set the background to transparent, and change it to normal fontweight

e.g. the control says "Select Date" currently, and here is the style associated with that control. Any help you can give me would be greatly appreciated.

 
<Style x:Key="RadDatePickerStyle1" TargetType="telerikInput:RadDatePicker">
<Setter Property="SelectorStyle">
<Setter.Value>
<Style TargetType="telerikInput:RadDateSelector">
<Setter Property="Background" Value="Red"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
</Setter.Value>
</Setter>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="FontSize" Value="20"/>
         
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerikInput:RadDatePicker">
<telerikPrimitives:RadPickerBox x:Name="PART_PickerBox"
                                                    ContentTemplate="{TemplateBinding EmptyContentTemplate}"
                                                    HeaderTemplate="{TemplateBinding HeaderTemplate}"
                                                    HeaderStyle="{TemplateBinding HeaderStyle}"
                                                    Header="{TemplateBinding Header}"
                                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                    PopupCloseAnimation="{StaticResource CloseAnimation}"
                                                    PopupOpenAnimation="{StaticResource OpenAnimation}"
                                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                                    Style="{StaticResource RadPickerBoxStyle1}">
<telerikPrimitives:RadPickerBox.ApplicationBarInfo>
<telerikPrimitives:ApplicationBarInfo x:Name="PART_AppBarInfo">
<telerikPrimitives:ApplicationBarButton x:Name="PART_OKButton"/>
<telerikPrimitives:ApplicationBarButton x:Name="PART_CancelButton"/>
</telerikPrimitives:ApplicationBarInfo>
</telerikPrimitives:RadPickerBox.ApplicationBarInfo>
<Grid Background="{StaticResource PhoneChromeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
                            <ContentControl x:Name="PART_PopupHeader" ContentTemplate="{TemplateBinding PopupHeaderTemplate}" Content="{TemplateBinding PopupHeader}" FontWeight="Normal" FontSize="{StaticResource PhoneFontSizeMedium}" FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalContentAlignment="Left" Margin="24, 55, 0, 24" Grid.Row="0" BorderThickness="1"/>
<telerikInput:RadDateSelector x:Name="PART_Selector" AppointmentSource="{TemplateBinding AppointmentSource}" DayStepBehavior="{TemplateBinding DayStepBehavior}" ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}" MonthStepBehavior="{TemplateBinding MonthStepBehavior}" Grid.Row="1" Style="{TemplateBinding SelectorStyle}" Step="{TemplateBinding Step}" YearStepBehavior="{TemplateBinding YearStepBehavior}"/>
</Grid>
</telerikPrimitives:RadPickerBox>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplateSelector">
<Setter.Value>
<telerikInput:AppointmentTemplateSelector>
<DataTemplate>
<Grid>
<Grid HorizontalAlignment="Right" Margin="2" VerticalAlignment="Top">
<Ellipse Fill="{StaticResource PhoneAccentBrush}" Height="25" Width="25"/>
<TextBlock FontSize="16" HorizontalAlignment="Center" Text="{Binding Appointments, Converter={StaticResource countConverter}}" VerticalAlignment="Center"/>
</Grid>
<StackPanel HorizontalAlignment="Left" Margin="4" MinHeight="100" VerticalAlignment="Bottom">
                                <TextBlock FontSize="54" FontFamily="{StaticResource PhoneFontFamilySemiLight}" Margin="0,0,0,-8" Text="{Binding HeaderText}"/>
<TextBlock Foreground="{StaticResource PhoneSubtleBrush}" FontSize="20" FontFamily="{StaticResource PhoneFontFamilyNormal}" Text="{Binding ContentText}"/>
</StackPanel>
</Grid>
</DataTemplate>
</telerikInput:AppointmentTemplateSelector>
</Setter.Value>
</Setter>
</Style>

1 Answer, 1 is accepted

Sort by
0
Deyan
Telerik team
answered on 24 Apr 2014, 06:57 AM
Hi,

You will need to use the PickerButtonStyle property and define the foreground, background and font style there.

The PickerButtonStyle property accepts styles targeting the Telerik.Windows.Controls.PickerBox.PickerBoxToggleButton type.

I hope this is helpful.

Regards,
Deyan
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
DatePicker and DateSelector
Asked by
imsp
Top achievements
Rank 1
Answers by
Deyan
Telerik team
Share this question
or