Changing foreground and background of datepicker

2 posts, 0 answers
  1. imsp
    imsp avatar
    4 posts
    Member since:
    Nov 2011

    Posted 20 Apr 2014 Link to this post

    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>
  2. Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 24 Apr 2014 Link to this post

    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.

     
  3. DevCraft banner
Back to Top