Rank 1
For some strange reason the default background for Telerik MaskedNumericInput validation tooltip is has a white background and red text, where as all the Microsoft controls (TextBox, ComboBox, etc.) have a red background and white text.
So if I mix controls the validation tooltip is not a consistent look and feel. Is there any "easy" way to simply change the validation tooltip background and foreground colors so I can match Microsoft's default colors?
Please don't start on about using No XAML binaries and loading blend to see the templates and then change the templates ... 5 hours later and tons of code change later and a broken project I eventually get a red background and white text in my validation tooltip. There MUST be a easier way? going back 12 years it was as simple as click and pick the color I want ... I'm hoping in this day and age it does require hours of research, loading project samples on how to do it, and hours and hours of changing my existing code. All I want to do is change a background color from white to red and a foreground color from red to white ... nothing more, nothing less.
Please tell me this is easy.
Sorry if I sound frustrated but I often wonder if software engineering is actually moving forward and not backward.
Cheers, Rob.
6 Answers, 1 is accepted
I understand your frustration when it comes to retemplating as sometimes it really is hard-time. We are doing our best to ease the process with implementing custom properties for our controls that will help you control their appearance without having to do a complex customizations (for example the HeaderForeground property of the RadTabItem and HeaderBackground property of the RadTabControl). When it comes to Validation however this can not be achieved so easily and I'll try to explain why here. When the WPF validation system detects an invalid control it creates an Adorner element that inserts another visual control into it and sets that control template to the content of the Validation.ErrorTemplate attached property. It positions the adorner above the original control so that the AdornedElementPlaceholder is exactly above the control and that let us easily place the control template content relative to the original control. But here's the limitation -- Adorners don't live in the same visual tree as their parent-most controls and therefore there's no way to easily pass properties to them.
Onto your exact question -- Indeed I was able to reproduce visual difference between our Validation Tooltips in Summer and Vista themes compared to all others -- as you mentioned they have Red Foreground and custom but not White Background. To have this appear as you desired unfortunately you'll have to do a retemplate. I know this might sound time-consuming and difficult at first but I'll assist you doing it for your easiness. In fact if you search online (here are some articles from MSDN and CodeProject ) you'll find out that retemplating the Validation.ErrorTemplate is exactly the same thing you should do to have different apparance than default one for MS controls as well.
Make sure that you apply the following Style for your RadMaskedTextInput control for example and the Validation Tooltip will look as desired. Feel free to customize the predefined CornerRadius or Colors per your own requirement:
<LinearGradientBrush x:Key="ValidationInnerTick" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFB42F34" Offset="0"/> <GradientStop Color="#FFBF4137" Offset="1"/> </LinearGradientBrush> <LinearGradientBrush x:Key="ValidationOuterTick" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFB42F34" Offset="0"/> <GradientStop Color="#FFBF4137" Offset="1"/> </LinearGradientBrush> <SolidColorBrush x:Key="RedBrush">#FFCB576E</SolidColorBrush> <ControlTemplate x:Key="ValidationTooltipTemplate"> <Grid SnapsToDevicePixels="True" VerticalAlignment="Top"> <Border Background="Transparent" HorizontalAlignment="Right" VerticalAlignment="Top" Width="3" Height="3"/> <AdornedElementPlaceholder x:Name="Holder"/> <Border BorderBrush="{StaticResource RedBrush}" BorderThickness="1" CornerRadius="2"/> <Path Data="M2,1 L6,1 6,5 Z" Fill="{StaticResource ValidationInnerTick}" Width="7" Height="7" HorizontalAlignment="Right" VerticalAlignment="Top"/> <Path Data="M0,0 L2,0 7,5 7,7 Z" Fill="{StaticResource ValidationOuterTick}" Width="7" Height="7" HorizontalAlignment="Right" VerticalAlignment="Top"/> <ToolTipService.ToolTip> <ToolTip x:Name="PART_ToolTip" DataContext="{Binding RelativeSource={RelativeSource Mode=Self}, Path=PlacementTarget.DataContext}" Content="{Binding ErrorContent}" Background="{StaticResource RedBrush}" Placement="Right" Foreground="White"/> </ToolTipService.ToolTip> </Grid> </ControlTemplate> <Style TargetType="telerik:RadMaskedTextInput" BasedOn="{StaticResource RadMaskedInputBaseStyle}" > <Setter Property="Validation.ErrorTemplate" Value="{StaticResource ValidationTooltipTemplate}" /> </Style>I hope this information helps.
Regards,
Evgenia
Telerik by Progress
Rank 1
Hi Evgenia,
Thanks for the response. My issue isn't that it's "hard", my issue is that it's time consuming and "3rd party" controls are supposed to reduce my workload as I have more important aspects to program.
Thank you for the sample, but unfortunately it doesn't work as "SnapsToDevicePixels" is not a valid property of Grid and "AdornedElementPlaceholder" don't exist in the namespace "http://schemas.microsoft.com/client/2007" ... I don't think this is supported by Silverlight 5?
Cheers, Rob.
Rank 1
In Addition:
<Setter Property="Validation.ErrorTemplate" Value="{StaticResource ValidationTooltipTemplate}" />
Produces the error "ErrorTemplate is not recognized or accessible"
I think the sample you provided was for WPF and Silverlight 5.
Cheers, Rob.
I apologize for I omitted to see that you are using our UI for Silverlight suite and yes you are right -- my previous code snippets are related to WPF.
In Silverlight we provided our own ValidationTooltip control and added it inside the ControlTemplate of all our controls that support validation (mostly those that have user input and are located in Telerik.Windows.Controls.Input assembly). So to achieve your desired look for the RadMaskedTextInput control there are some things I'd like to mention:
1. You'll have to add global implicit style (without x:Key for the ValidationTooltip control). Since it is implicit it will get applied on all our Telerik controls out-of-the-box.
2. Since most of our themes have more complex visual appearance (for example Office based themes as well as Summer and Transparent have double borders, CornerRadius and complex Gradients) overriding the Background and Foreground of the ValidationTooltip won't be as simple as just applying two Setters in the Style. Once again you'll have to customize its default ControlTemplate that we provide with each theme.
3. The Red Foreground gets preset by the ErrorMessageTemplate of the RadMaskedInputBase control. To apply the White Foreground just override it the following way:
<DataTemplate x:Key="MaskErrorMessageTemplate"> <TextBlock Text="{Binding}" TextWrapping="Wrap" Foreground="White" Padding="4 1" MaxWidth="250"/> </DataTemplate><telerik:RadMaskedTextInput Mask="####" Height="80" Margin="2" EmptyContent="Masked Input" ErrorMessageTemplate="{StaticResource MaskErrorMessageTemplate}" ErrorMessage="{Binding Text, ElementName=customErrorMessage}" Value="{Binding MyValue, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}" />Once again for your easiness I prepared a sample based on our Summer theme where you can get the idea of how to achieve your requirement. Add reference to your version of our Telerik controls in the project and feel free to customize it per your own needs.
Regards,
Evgenia
Telerik by Progress
Rank 1
Sorry but I couldn't get this to work the way I wanted it to. I looked at the attached project you provided and there was a syntax error in the xaml ... minor system boolean. I corrected that error and used the ControlTemplate code you provided in your project sample and copied it to my project making it local to my UserControl ... this would work so long as my referenced Style defined in App.xaml was NOT using a "BasedOn="{StaticResource RadMaskedInputBaseStyle}".
I did find the RadMaskedInputBaseStyle (in Telerik.Windows.Controls.Input.xaml) and tried to put the TextBlock in a Grid or Border with Background=Red but that still did NOT work.
I was NOT successful at trying to apply this globally to all the telerik input controls. I must admit, all this research and time and hours of attempting to make just ONE small adjustment to simply set the background color to Red and Foreground color to White has turned into a Multi-day research and test session.
As I've said before, the object was to simply change a background color and a foreground color. If such a simple task requires this much effort then clearly something on a larger conceptual scale went drastically wrong. Like I said before I purchase Telerik controls to SPEED up my development efforts, so far this HAS not been the case.
Rob.
In the attached project of my colleague there is a ValidationTooltipTemplate that targets the telerikChromes:ValidationTooltip. The TextBlock in the DataTemplate is only to handle the foreground and the error message content.
If you are to make modifications to the border containing it, you would need to edit the border that is inside the Tooltip in the ValidationTooltipTemplate.
As for the mask inputs - please review the Masks.xaml dictionary that I have included in the project for the approach to styling all the RadMaskedInputs in the project. Note that I am merging it in the UserControl.Resources as there is sometimes an issue with the BasedOn styles due to the loading of the merged resources in the app.xaml in SL which is not executed necessarily in the order that they are defined.
Regards,
Martin
Progress Telerik