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

How to get my tooltip text to turn red

6 Answers 150 Views

DatePicker

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

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="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>

6 Answers, 1 is accepted

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.

answered on 28 May 2020, 10:59 AM

DateTimePickerSL.zip

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

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.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>

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