How to get my tooltip text to turn red

[Kathy]

I'm able to change the default error text, but I want the text to be red. Here is my xaml:

 

 

Thanks for your help.

<xfDashboards:DashboardParameterControlBase x:Class="OneStream.Client.Silverlight.Dashboards.XFCalendarButtonControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:xfPagesCS="clr-namespace:OneStream.Client.Silverlight"
    xmlns:xfSharedUI="http://onestream.com/sharedUI"
    xmlns:xfDashboards="clr-namespace:OneStream.Client.Silverlight.Dashboards"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">


    <Grid x:Name="layoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Loaded="layoutRoot_Loaded">
        <Grid.Resources>
            <Style x:Key="calendarStyle" TargetType="telerik:RadCalendar" BasedOn="{StaticResource RadCalendarStyle}">
                <Setter Property="AreWeekNumbersVisible" Value="False" />
            </Style>

        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="auto" />
        </Grid.ColumnDefinitions>


        <telerik:RadDatePicker x:Name="DatePicker" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0" Padding="6,4,6,4"
                           Foreground="{StaticResource DarkBlueTextBrush}" Grid.Row="1" Grid.Column="1"
                           DisplayFormat="Short" DateSelectionMode="Day" ErrorTooltipContent="Enter a valid date"
                           CalendarStyle="{StaticResource calendarStyle}" >

        </telerik:RadDatePicker>
    </Grid>
</xfDashboards:DashboardParameterControlBase>

[Vladimir Stoyanov]

Hello Kathy,

Thank you for the shared code snippet. 

In order to achieve the desired behavior you can use the approach demonstrated in the following article: Preview ToolTip of setting the ToolTipTemplate of the RadDateTimePicker. 

If you want the Foreground inside the ToolTipTemplate to be Red only when there isn't a valid date entered, you can use a converter and check whether the TooltipContent is the same as the ErrorTooltipContent:

 <Grid >
        <Grid.Resources>
            <local:Converter x:Key="Converter" />
        </Grid.Resources>
        <telerik:RadDateTimePicker x:Name="RadDateTimePicker"  VerticalAlignment="Center" Width="100" ErrorTooltipContent="Enter a valid date" >
            <telerik:RadDateTimePicker.TooltipTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Path=TooltipContent, ElementName=RadDateTimePicker}" FontWeight="Bold">
                        <TextBlock.Style>
                            <Style TargetType="TextBlock">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Path=TooltipContent, ElementName=RadDateTimePicker, Converter={StaticResource Converter}}" Value="True">
                                        <Setter Property="Foreground" Value="Red" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </TextBlock.Style>
                    </TextBlock>
                </DataTemplate>
            </telerik:RadDateTimePicker.TooltipTemplate>
        </telerik:RadDateTimePicker>

    </Grid>

public class Converter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var tooltipContent = (string)value;

            if(tooltipContent == "Enter a valid date")
            {
                return true;
            }

            return false;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

I hope you find this information helpful.

Regards,
Vladimir Stoyanov
Progress Telerik

[Kathy]

Thank you for the snippet, Vlad. But I was getting an error "Converter is not supported in a Silverlight project". This has to work with both windows and Silverlight.

[Vladimir Stoyanov]

Hello Kathy,

Thanks for the update. 

Please, find a sample Silverlight project attached, which uses a slightly updated approach that should be viable in both SL and WPF.

<Grid >
        <Grid.Resources>
            <local:Converter x:Key="Converter" />
        </Grid.Resources>
        <telerik:RadDateTimePicker x:Name="RadDateTimePicker"  VerticalAlignment="Center" Width="100" ErrorTooltipContent="Enter a valid date" >
            <telerik:RadDateTimePicker.TooltipTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Path=TooltipContent, ElementName=RadDateTimePicker}" FontWeight="Bold">
                        <TextBlock.Style>
                            <Style TargetType="TextBlock">
                                <Setter Property="Foreground" Value="{Binding TooltipContent, ElementName=RadDateTimePicker, Converter={StaticResource Converter}}" />
                            </Style>
                        </TextBlock.Style>
                    </TextBlock>
                </DataTemplate>
            </telerik:RadDateTimePicker.TooltipTemplate>
        </telerik:RadDateTimePicker>

    </Grid>

public class Converter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var tooltipContent = (string)value;

            if(tooltipContent == "Enter a valid date")
            {
                return new SolidColorBrush(Colors.Red);
            }

            return new SolidColorBrush(Colors.Black);
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

Hope this helps.

Regards,
Vladimir Stoyanov
Progress Telerik

[Kathy]

Nope. I'm getting no error handling now.

Here is my xaml:

<xfDashboards:DashboardParameterControlBase x:Class="OneStream.Client.Silverlight.Dashboards.XFCalendarButtonControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:xfPagesCS="clr-namespace:OneStream.Client.Silverlight"
xmlns:xfSharedUI="http://onestream.com/sharedUI"
xmlns:xfDashboards="clr-namespace:OneStream.Client.Silverlight.Dashboards"
xmlns:local="clr-namespace:OneStream.Client.Silverlight.Dashboards"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="layoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Loaded="layoutRoot_Loaded">
<Grid.Resources>
<local:Converter x:Key="Converter" />
<Style x:Key="calendarStyle" TargetType="telerik:RadCalendar" BasedOn="{StaticResource RadCalendarStyle}">
<Setter Property="AreWeekNumbersVisible" Value="False" />
</Style>
</Grid.Resources>

<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<TextBlock x:Name="textBlockLeft" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,0,4,0"
Foreground="{StaticResource DarkBlueTextBrush}" Grid.Row="1" Grid.Column="0" Visibility="Collapsed"/>
<TextBlock x:Name="textBlockTop" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,0,0,4"
Foreground="{StaticResource DarkBlueTextBrush}" Grid.Row="0" Grid.Column="1" Visibility="Collapsed"/>
<TextBlock x:Name="textBlockRight" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="4,0,0,0"
Foreground="{StaticResource DarkBlueTextBrush}" Grid.Row="1" Grid.Column="2" Visibility="Collapsed"/>
<TextBlock x:Name="textBlockBottom" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,4,0,0"
Foreground="{StaticResource DarkBlueTextBrush}" Grid.Row="2" Grid.Column="1" Visibility="Collapsed"/>

<telerik:RadDatePicker x:Name="DatePicker" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0" Padding="6,4,6,4"
Foreground="{StaticResource DarkBlueTextBrush}" Grid.Row="1" Grid.Column="1"
DisplayFormat="Short" DateSelectionMode="Day" ErrorTooltipContent="Enter a valid date"
CalendarStyle="{StaticResource calendarStyle}" >
<telerik:RadDateTimePicker.TooltipTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=TooltipContent, ElementName=RadDateTimePicker}" FontWeight="Bold">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="{Binding TooltipContent, ElementName=RadDateTimePicker, Converter={StaticResource Converter}}" />
</Style>
</TextBlock.Style>
</TextBlock>
</DataTemplate>
</telerik:RadDateTimePicker.TooltipTemplate>
</telerik:RadDatePicker>
</Grid>
</xfDashboards:DashboardParameterControlBase>

[Vladimir Stoyanov]

Hello Kathy,

Thank you for the shared snippet. 

You should not set the x:Name of the RadDateTimePicker to "DatePicker" as suggested in the Preview ToolTip article. You can try the following:

<telerik:RadDatePicker x:Name="RadDateTimePicker" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0" Padding="6,4,6,4"
Foreground="Black" Grid.Row="1" Grid.Column="1"
 ErrorTooltipContent="Enter a valid date"
 DisplayFormat="Short" DateSelectionMode="Day" 
CalendarStyle="{StaticResource calendarStyle}" >
            <telerik:RadDateTimePicker.TooltipTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Path=TooltipContent, ElementName=RadDateTimePicker}" FontWeight="Bold">
                        <TextBlock.Style>
                            <Style TargetType="TextBlock">
                                <Setter Property="Foreground" Value="{Binding TooltipContent, ElementName=RadDateTimePicker, Converter={StaticResource Converter}}" />
                            </Style>
                        </TextBlock.Style>
                    </TextBlock>
                </DataTemplate>
            </telerik:RadDateTimePicker.TooltipTemplate>
        </telerik:RadDatePicker>

I hope you find this information helpful.

Regards,
Vladimir Stoyanov
Progress Telerik

[Kathy]

That fixed it. Thanks so much.