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

How to get my tooltip text to turn red

6 Answers 116 Views
DatePicker
This is a migrated thread and some comments may be shown as answers.
Kathy
Top achievements
Rank 1
Veteran
Kathy asked on 21 May 2020, 05:11 PM

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:xfPagesCS="clr-namespace:OneStream.Client.Silverlight"
    xmlns:xfSharedUI="http://onestream.com/sharedUI"
    xmlns:xfDashboards="clr-namespace:OneStream.Client.Silverlight.Dashboards"
    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>

6 Answers, 1 is accepted

Sort by
0
Vladimir Stoyanov
Telerik team
answered on 26 May 2020, 09:14 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Kathy
Top achievements
Rank 1
Veteran
answered on 26 May 2020, 12:10 PM
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.
0
Vladimir Stoyanov
Telerik team
answered on 28 May 2020, 10:59 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Kathy
Top achievements
Rank 1
Veteran
answered on 28 May 2020, 12:41 PM

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>

0
Vladimir Stoyanov
Telerik team
answered on 02 Jun 2020, 08:26 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Kathy
Top achievements
Rank 1
Veteran
answered on 02 Jun 2020, 04:35 PM
That fixed it. Thanks so much.
Tags
DatePicker
Asked by
Kathy
Top achievements
Rank 1
Veteran
Answers by
Vladimir Stoyanov
Telerik team
Kathy
Top achievements
Rank 1
Veteran
Share this question
or