Styling Empty Content

[Ian]

Hi,

As mentioned in another thread, I have applied a style to the PickerButtonStyle property of the RadDatePicker.  This has allowed me to customize the appearance of the picker box background.

However, I would like to expand this and have a different color for the empty content foreground text. i.e. the watermark that says "Pick Date" should be a different color to the date value shown after the user has selected it.

I have tried setting the EmptyContentTemplate, but not had any luck achieving the right result.

Could you please point me in the right direction to achieve this?

Thanks
Ian

[Deyan]

Hello Ian,

Thanks for writing.

Take a look at the "null value" example of RadDatePicker in our Demos app. Here is an excerpt from the XAML code of the example:

<telerikInput:RadDatePicker Grid.Row="1" x:Name="radDatePickerExample"  Margin="0, 24, 0, 0">
    <telerikInput:RadDatePicker.EmptyContentTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Image Source="../Images/DatePickerEmptyContent.png" Grid.Column="0"/>
                <TextBlock Foreground="Red" Text="Select date" Grid.Column="1" Margin="10, 0, 0, 0"/>
            </Grid>
        </DataTemplate>
    </telerikInput:RadDatePicker.EmptyContentTemplate>
</telerikInput:RadDatePicker>

As you can see, we define a custom EmptyContentTemplate for RadDatePicker. In this template, we have a TextBlock that displays the Select date text. If you set the Foreground property of this element to Red, you will get the desired behavior.

I hope this helps.

Let me know if you need further assistance with this.

Regards,
Deyan
the Telerik team

[Ian]

Hi Deyan,

Thanks for the response.  

I have implemented the EmptyContentTemplate as suggested, however it seems I can't use bindings/resources with this? My exact markup is:

<telerikInput:RadDatePicker Grid.Column="1" SelectorFormat="{Binding DatePickerFormat}" DisplayValueFormat="{Binding DatePickerFormat}"  Value="{Binding RegisterDateOfBirth, Mode=TwoWay}" VerticalAlignment="Top" CancelButtonIconUri="/Images/Telerik/DateTimePickerCancel.png" OkButtonIconUri="/Images/Telerik/DateTimePickerOk.png">
    <telerikInput:RadDatePicker.EmptyContentTemplate>
        <DataTemplate>
            <TextBlock Style="{StaticResource WatermarkStyle}" Text="{Binding DateOfBirthWatermark}"/>
        </DataTemplate>
    </telerikInput:RadDatePicker.EmptyContentTemplate>
</telerikInput:RadDatePicker>

In this case, the DateOfBirthWatermark string value being bound is not shown. 

Any help is appreciated!

Thanks
Ian

[Deyan]

Hello Ian,

Well, it seems that the DataContext of RadDatePicker is not initialized to the correct instance. Could you please share some further details on the scenario like:

- Do you explicitly set a DataContext to your RadDatePicker instance, or
- Do you set a DataContext to the page where RadDatePicker resides.

It will be extremely helpful if you manage to prepare a sample project that reproduces the undesired behavior and send it to us so that we can directly take a look and see what goes wrong.

Please not that in order to be able to attach your project you will need to open a new support ticket.

Thanks for your time.

Greetings,
Deyan
the Telerik team

[Ian]

Hi Deyan,

Thanks for your reply.

I am setting a DataContext for the whole page to an instance of my page view model class.  The DateOfBirthWatermark string property is declared in this view model class.

As suggested, I have created a small project and will attach to a support ticket.

Many thanks
Ian

[Deyan]

Hi Ian,

We took a look at your project and were able to find the reason for the undesired behavior.

Basically, RadDatePicker is a content control and thus it exposes the Content and ContentTemplate properties. The ContentControl handles the bindings in its ContentTemplate a bit different by using its Content for initializing them. In your case, you need to set the EmptyContent property also in order to be able to bind the EmptyContentTemplate elemnts to given values from your source. Here's a slightly different version of your XAMl that works as expected:

<telerikInput:RadDatePicker Grid.Row="0" EmptyContent="{Binding}" SelectorFormat="{Binding DatePickerFormat}" DisplayValueFormat="{Binding DatePickerFormat}"  Value="{Binding RegisterDateOfBirth, Mode=TwoWay}" VerticalAlignment="Top" CancelButtonIconUri="/Images/Telerik/DateTimePickerCancel.png" OkButtonIconUri="/Images/Telerik/DateTimePickerOk.png">
    <telerikInput:RadDatePicker.EmptyContentTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding DateOfBirthWatermark}"/>
        </DataTemplate>
    </telerikInput:RadDatePicker.EmptyContentTemplate>
</telerikInput:RadDatePicker>

I hope this helps.

Let me know if you need further assistance here.

Greetings,
Deyan
the Telerik team

[Ian]

Hi Deyan,

That's great - thanks for confirming. That all makes sense, thanks for the great explanation.

Regards
Ian

[Ian]

Hi again,

I have another question regarding the DatePicker control. How do I remove the tilt effect?

I have tried adding <Setter Property="telerikCore:InteractionEffectManager.IsInteractionEnabled" Value="False"/> to the style set to the PickerButtonStyle property. I have also tried adding it directly as a property to the RadDatePicker control directly in the XAML using telerikCore:InteractionEffectManager.IsInteractionEnabled="False".

Neither of these appear to work and the date picker still has the tilt effect.

Any advice would be appreciated.

Many thanks
Ian

[Deyan]

Hello Ian,

Thanks for contacting us and for your question.

The Tilt Interaction Effect in RadDatePicker is applied to a ToggleButton that represents the inline part of the control. You should find the ToggleButton instance in the visual tree of RadDatePicker and set the IsInteractionEnabled property on it. Here's an example:

InteractionEffectManager.SetIsInteractionEnabled(ElementTreeHelper.FindVisualDescendant<ToggleButton>(this.radDatePicker1), false);

As you can see, I am using the ElementTreeHelper class we have implemented for easier navigation over the visual tree of an element.

Please note that you should make sure that the RadDatePicker control has loaded its element hierarchy before using this approach.

I hope this helps.

Kind regards,
Deyan
the Telerik team

[Ian]

A shame I have to do it in code, but the solution works great.

Thanks for all your help!

Ian

[Cesar Vinas]

Hi Deyan,

I have three questions:

1. I'm trying to change the FontWeight of the ToggleButton in my RadDatePicker. I'm doing this by changing its style, but I've not been able to make it work. Other properties, like Foreground, does work though. My code is:

<

telerikInput:RadDatePicker Grid.Row="2" x:Name="dsrQuitDate" Header="quit date" EmptyContent="select your quit date" DisplayValueFormat="MMMM dd, yyyy" Margin="0,0,0,12" OkButtonIconUri="/Images/appbar_datetimepickerok.png" CancelButtonIconUri="/Images/appbar_datetimepickercancel.png">

<telerikInput:RadDatePicker.HeaderTemplate>

<DataTemplate>

<TextBlock Foreground="{StaticResource PhoneForegroundBrush}" Text="{Binding}" />

</DataTemplate>

</telerikInput:RadDatePicker.HeaderTemplate>

<telerikInput:RadDatePicker.PickerButtonStyle>

<Style TargetType="ToggleButton">

<Setter Property="Foreground" Value="Gray" />

<Setter Property="FontWeight" Value="Light" />

<Setter Property="Background" Value="White" />

<Setter Property="BorderBrush" Value="#BFFFFFFF" />

<Setter Property="BorderThickness" Value="2" />

</Style>

</telerikInput:RadDatePicker.PickerButtonStyle>

</telerikInput:RadDatePicker>

2. Is there a way to have a different style for the ToggleButton when the value is NULL and when it's a date? I want to have the foreground color as gray (simulating a watermark) when the value is NULL and as black when the value is a date.

3. Can I change the style of the window when the user selects the actual date? I want to set a background image and change the colors of the rest of the elements accordingly so that window is consistent with the rest of my application.

Thanks in advance for the answers.
Cesar Vinas

[Deyan]

Hello Cesar,

Thanks for writing and for your questions.

1. You can set the FontWeight directly to RadDatePicker instead of trying to change the style of the ToggleButton inside:

<telerikInput:RadTimePicker x:Name="timePicker" FontWeight="Bold"/>

2. Currently, the only way to change the foreground of the RadDatePicker control according to its Value is to listen for the ValueChanged event and do it programmatically. The reason for this is that there is no visual state which is updated when there is null as value or a valid date.

3. You can change the appearance of the popup contents by modifying the corresponding styles. Since we currently do not have any properties exposed for this, I am sending you the XAML styles which you can modify and use in your application:

<Style TargetType="ToggleButton" x:Key="PickerButtonStyle">
        <Setter Property="telerikCore:InteractionEffectManager.IsInteractionEnabled" Value="True"/>
        <Setter Property="Padding" Value="8"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid Background="Transparent" >
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBackground" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBackground" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledContent" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBackground" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledBackground" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBackground" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBackground" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledContent" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Unchecked" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="EnabledBackground" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Margin="{StaticResource PhoneTouchTargetOverhang}">
                            <ContentControl x:Name="EnabledContent" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                        </Border>
                        <Border x:Name="DisabledBackground" IsHitTestVisible="False" Background="Transparent" BorderBrush="{StaticResource PhoneDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed">
                            <ContentControl x:Name="DisabledContent" Foreground="{StaticResource PhoneDisabledBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

<telerikCore:RadPlaneProjectionAnimation x:Key="OpenAnimation" Axes="X" StartAngleX="-90" EndAngleX="0" Duration="0:0:.2">
        <telerikCore:RadPlaneProjectionAnimation.Easing>
            <ExponentialEase Exponent="4" EasingMode="EaseOut"/>
        </telerikCore:RadPlaneProjectionAnimation.Easing>
    </telerikCore:RadPlaneProjectionAnimation>

    <telerikCore:RadPlaneProjectionAnimation x:Key="CloseAnimation" Axes="X" StartAngleX="0" EndAngleX="90" Duration="0:0:.2">
        <telerikCore:RadPlaneProjectionAnimation.Easing>
            <ExponentialEase Exponent="4" EasingMode="EaseIn"/>
        </telerikCore:RadPlaneProjectionAnimation.Easing>
    </telerikCore:RadPlaneProjectionAnimation>

    <Style x:Key="HeaderStyle" TargetType="ContentControl">
        <Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}"/>
        <Setter Property="Margin" Value="12,0,0,-4"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
    </Style>

    <telerikInput:EnumerableToCountConverter x:Key="countConverter"/>
        <Style TargetType="telerikInput:RadDatePicker">
        <Setter Property="SelectorStyle">
            <Setter.Value>
                <Style TargetType="telerikInput:RadDateSelector">
                    <Setter Property="Background" Value="{StaticResource PhoneChromeBrush}"/>
                    <Setter Property="HorizontalAlignment" Value="Stretch"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="HeaderStyle" Value="{StaticResource HeaderStyle}"/>
        <Setter Property="PickerButtonStyle" Value="{StaticResource PickerButtonStyle}"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerikInput:RadDatePicker">
                    <telerikPrimitives:RadPickerBox x:Name="PART_PickerBox"
                                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                                    PopupOpenAnimation="{StaticResource OpenAnimation}"
                                                    PopupCloseAnimation="{StaticResource CloseAnimation}"
                                                    Header="{TemplateBinding Header}"
                                                    HeaderTemplate="{TemplateBinding HeaderTemplate}"
                                                    HeaderStyle="{TemplateBinding HeaderStyle}"
                                                    ContentTemplate="{TemplateBinding EmptyContentTemplate}"
                                                    PickerButtonStyle="{TemplateBinding PickerButtonStyle}">
                        <telerikPrimitives:RadPickerBox.PopupContent>
                            <Grid Background="{StaticResource PhoneChromeBrush}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <ContentControl
                                    Margin="24, 55, 0, 24"
                                    FontFamily="{StaticResource PhoneFontFamilySemiBold}"
                                    FontWeight="SemiBold"
                                    FontSize="{StaticResource PhoneFontSizeMedium}"
                                    Grid.Row="0"
                                    x:Name="PART_PopupHeader"
                                    Content="{TemplateBinding PopupHeader}"
                                    ContentTemplate="{TemplateBinding PopupHeaderTemplate}"
                                    HorizontalContentAlignment="Left"
                                    />
                                <telerikInput:RadDateSelector
                                    Grid.Row="1"
                                    x:Name="PART_Selector"
                                    TimeStep="{TemplateBinding TimeStep}"
                                    ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                    AppointmentSource="{TemplateBinding AppointmentSource}"
                                    Style="{TemplateBinding SelectorStyle}"/>
                            </Grid>
                        </telerikPrimitives:RadPickerBox.PopupContent>

                        <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>
                    </telerikPrimitives:RadPickerBox>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

        <Setter Property="ItemTemplateSelector">
            <Setter.Value>
                <telerikInput:AppointmentTemplateSelector>
                    <DataTemplate>
                        <Grid>
                            <Grid HorizontalAlignment="Right"
                            VerticalAlignment="Top"
                            Margin="2">
                                <Ellipse Width="25"
                                    Height="25"
                                    Fill="{StaticResource PhoneAccentBrush}"/>
                                <TextBlock Text="{Binding Path=Appointments, Converter={StaticResource countConverter}}"
                                    FontSize="16"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"/>
                            </Grid>

                            <StackPanel MinHeight="100" Margin="4"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Bottom">
                                <TextBlock Text="{Binding Path=HeaderText}" FontSize="54" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Margin="0,0,0,-8"/>
                                <TextBlock Text="{Binding Path=ContentText}" FontSize="20"  Foreground="{StaticResource PhoneSubtleBrush}" FontFamily="{StaticResource PhoneFontFamilyNormal}"/>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </telerikInput:AppointmentTemplateSelector>
            </Setter.Value>
        </Setter>
    </Style>

I hope this helps.

Let me know if you need further assistance here.

All the best,
Deyan
the Telerik team

[Cesar Vinas]

Hi Deyan,

Thanks for the answers. I've been able to make question 2 works, but I'm still having with questions 1 and 3:

1. I've tried your suggestion, but it's still not working. The problem is not with the Foreground, but with the FontWeight. Please see the image "question1.png" where the FontWeight of "Quit Date" (DatePicker) is clearly different than "select a language". It's as if the default FontWeight of the ToggleButton were Bold, but even though I set the FontWeight to Normal as you indicated, it doesn't work, it's still shown as bold. Any ideas?

3. I'm not sure if I explained my requirement correctly. I've been reviewing the code you send, but It seems it's not to change the styles of the window I want. The window I want to re-style is in image "question3.png".

Thanks.
Cesar

[Deyan]

Hi Cesar,

Thanks for writing back.

1. Well, it seems that you have applied some additional settings in your scenario which prevent the FontWeight from being applied correctly. Could you please make a demo project that reproduces the issue and send it to us so that we can take a look and see how we can help (you will have to open a new support ticket in order to do this)?

2. The XAML code I sent you are basically all the styles you need to update according go your needs and apply to RadDatePicker so that its popup appears as you require. We may give you an example in the demo project that you will send (mentioned in point 1 of my answer).

I am looking forward to receiving the requested details.

Greetings,
Deyan
the Telerik team