override textbox style

[Jacob]

Hello Telerik,

I wanted to do something similar as this:

<telerik:RadWatermarkTextBox WatermarkContent="{Resx WatermarkTextBox_AddNew }"
                                                   Visibility="{Binding IsNew, Converter={StaticResource VisibilityConverter}}">
                                    <telerik:RadWatermarkTextBox.WatermarkTemplate>
                                        <DataTemplate>
                                            <!--TODO: Do your custom styling here. -->
                                            <TextBlock Style="{StaticResource TextBlockValueDefaultStyle}" Text="{Binding}" />
                                        </DataTemplate>
                                    </telerik:RadWatermarkTextBox.WatermarkTemplate>
                                </telerik:RadWatermarkTextBox>

but for the TextBox part of the control

is there an easy way to do so?

 

Thank you

[Nasko]

Hello Jacob,

RadWatermarkTextBox derives directly from the native WPF TextBox control. So, in order to change the appearance of the control you simply need to create a Style that is targeting the WatermarkTextBox:

<Window.Resources>
    <Style TargetType="telerik:RadWatermarkTextBox" x:Key="CustomWatermarkTextBoxStyle">
        <Setter Property="Background" Value="LightBlue"/>
    </Style>
</Window.Resources>
<StackPanel>
    <telerik:RadWatermarkTextBox Style="{StaticResource CustomWatermarkTextBoxStyle}"/>
</StackPanel>

If you want to modify the default Style or Template of the control you could easily extract the ControlTemplate/Style as demonstrated in the following article:
http://docs.telerik.com/devtools/wpf/styling-and-appearance/styling-apperance-editing-control-templates

Hope this helps.

Regards,
Nasko
Telerik by Progress

[Jacob]

Yes Nasko, thank you for your reply.

It works, however, I am interested in changing the TextBox part of it.

Also, taking the chance we're talking about customizing textboxs inside controls, I also need to customize the RadDatePicker.

 

thank you for your time

[Jacob]

to be specific, I need to set the font...

[Nasko]

Hi Jacob,

We are not exactly sure that we completely understand the appearance of RadWatermarkTextBox you want to achieve. As explained in my previous response the WatermarktTextBox is actually a TextBox because it derives from it. Because of that if you want to change its font you simply need to set the FontSize, FontFamily etc. properties of the control to the desired value:

<telerik:RadWatermarkTextBox FontSize="15" FontFamily="Comic Sans MS"/>

As for the DateTimePicker internally the control uses again the WatermarkTextBox, so if you declare a Style for the WatermarkTextBox inside the Resource of the Window/UserControl (or in Application level inside App.xaml) inside which the DateTimePickers are placed the control should be visualized as desired:

...
<Window.Resources>
    <Style TargetType="telerik:RadWatermarkTextBox">
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="FontFamily" Value="Comic Sans MS"/>
    </Style>
</Window.Resources>
<StackPanel>
    <telerik:RadDatePicker/>
</StackPanel>
...

Hope this helps.

Regards,
Nasko
Telerik by Progress

[Jacob]

Hi Nasko,

 

Ok, it sounds it is quite simple. in fact I think it is. But it apparently just doesn't work for me, there must be something wrong. please take a look at what I tried:

<Style x:Key="DefaultDatePickerStyle" TargetType="telerik:RadDatePicker">
    <Setter Property="FontSize" Value="12" />
    <Setter Property="FontFamily" Value="Calibri"/>
</Style>
<Style x:Key="DefaultRadWatermarkTextBoxStyle" TargetType="telerik:RadWatermarkTextBox">
    <Setter Property="FontSize" Value="12" />
    <Setter Property="FontFamily" Value="Calibri"/>
</Style>

<telerik:RadDatePicker Grid.Row="4"
            Grid.Column="2"
            Height="30"
            Style="{StaticResource DefaultDatePickerStyle}"
           DisplayFormat="{Binding StartDateFormat}"
           SelectedDate="{Binding Path=StartDate,
                  Mode=TwoWay}" />

the Watermark seems to work fine setting the style to DefaultWatermarkTextBoxStyle

but that datetime won't accept the Watermark style on it

am I doing something wrong?

 

 

[Nasko]

Hi Jacob,

The WatermarkTextBox is part of the Template of the DateTimePicker. By creating a Style without setting Key the Style should be applied to all WatermarkTextBoxes that are children of the UIElement whose Resources are used to declare the Style.

If you want to change the WatermarkTextBox to a specific DateTimePicker you could declare the Style inside the Resources of the control and it will be applied as expected:

<telerik:RadDatePicker>
    <telerik:RadDatePicker.Resources>
        <Style TargetType="telerik:RadWatermarkTextBox">
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="FontFamily" Value="Comic Sans MS"/>
        </Style>
    </telerik:RadDatePicker.Resources>
</telerik:RadDatePicker>

Hope this helps.

Regards,
Nasko
Telerik by Progress

[Jacob]

Hi Nasko,

So, I am back here after having failed again setting these fonts in a global place.

You see, the Calibri a (the one I want) looks like the a I wrote in the text box of the attached image.

And yet, the font that shows in the watermark textbox is something else.

Here is my RadDatePicker

<telerik:RadDatePicker Grid.Row="5"
Grid.Column="2"
Height="30"
DisplayFormat="{Binding ExpirationDateFormat}"
SelectedDate="{Binding Path=ExpirationDate,
Mode=TwoWay}" />

here is the style inside my ResourcesDictionay

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:SplaApplication.Utilities.Styles"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
    <Style TargetType="telerik:RadWatermarkTextBox">
        <Setter Property="FontSize" Value="12" />
        <Setter Property="FontFamily" Value="Calibri"/>
    </Style>
</ResourceDictionary>

You see, I am not setting the Style anymore. And the Style in the resourcedictionary  it has no Key.

Supposedly I would expect to have all my watermarks with that's not what is happening.

The only watermark that is responding to this is the

<telerik:RadWatermarkTextBox WatermarkContent="{Resx WatermarkTextBox_AddNew }" TextChanged="RadWatermarkTextBox_TextChanged"
                   Visibility="{Binding IsNew, Converter={StaticResource VisibilityConverter}}" >
    <telerik:RadWatermarkTextBox.WatermarkTemplate>
        <DataTemplate>
            <TextBlock Style="{StaticResource TextBlockValueDefaultStyle}" Text="{Binding}" />
        </DataTemplate>
    </telerik:RadWatermarkTextBox.WatermarkTemplate>
</telerik:RadWatermarkTextBox>

 

But the DatePicker won't listen to the fontsize or family.

and if I may add, I am looking for a general approach, not a page specific one.

 

My hopes you are still there to help me on this

Thank you.

[Nasko]

Hi Jacob,

We have checked your code-snippets and it seems everything is working as expected - please, check the attached sample that demonstrates how the used approach works on our side.

Hope this helps.

Regards,
Nasko
Telerik by Progress