override textbox style

9 posts, 0 answers
  1. Jacob
    Jacob  avatar
    49 posts
    Member since:
    Apr 2016

    Posted 21 Feb Link to this post

    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

  2. Nasko
    Admin
    Nasko avatar
    691 posts

    Posted 23 Feb Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. Jacob
    Jacob  avatar
    49 posts
    Member since:
    Apr 2016

    Posted 01 Mar in reply to Nasko Link to this post

    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

  4. Jacob
    Jacob  avatar
    49 posts
    Member since:
    Apr 2016

    Posted 01 Mar in reply to Jacob Link to this post

    to be specific, I need to set the font...
  5. Nasko
    Admin
    Nasko avatar
    691 posts

    Posted 02 Mar Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  6. Jacob
    Jacob  avatar
    49 posts
    Member since:
    Apr 2016

    Posted 02 Mar in reply to Nasko Link to this post

    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?

     

     

  7. Nasko
    Admin
    Nasko avatar
    691 posts

    Posted 02 Mar Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  8. Jacob
    Jacob  avatar
    49 posts
    Member since:
    Apr 2016

    Posted 02 Mar in reply to Nasko Link to this post

    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

                        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.

  9. Nasko
    Admin
    Nasko avatar
    691 posts

    Posted 06 Mar Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top