RadTextBox Light theme problems

[gilangkusumajati]

I want to use RadTextBox in my app with white solid background. As a default, the header color is white, so it is not visible with my white solid background. How can I change the style of RadTextBox to get consistent/same appearance in both Light and Dark Theme and works as expected in Edit mode, like in this article : http://www.windowsphonegeek.com/tips/wp7-textbox-light-theme-problems-the-solution

Sorry for my bad English.

Thanks.
Gilang

[Todor]

Hello Giliang,

Thank you for your question.

You can use similar approach with RadTextBox for defining consistent appearance in both light and dark theme.
1) Again you will need to extract the default style for RadTextBox by using either Expression Blend or Visual Studio 2012.
2) Similarly to the article change the Background color to white for the Focused state. The difference is that you need to do the same for FocusedInvalid and FocusedValid states. You can also change the BorderBrush if you'd like:

<VisualState x:Name="Focused">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="Background">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <SolidColorBrush Color="White"/>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="BorderBrush">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <SolidColorBrush Color="Gray"/>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

3) Set the Foreground of RadTextBox to a color of your choice.
4) Set the newly created style to your RadTextBox.
5) For the header, you will need to change its color as well. When you have extracted the style of RadTextBox, you should see in your resources also a Style with the key HeaderStyle. You will need to change its foreground as well:

<Style x:Key="HeaderStyle" TargetType="ContentControl">
    <Setter Property="Foreground" Value="LightGray"/>
    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}"/>
    <Setter Property="Padding" Value="0,0,0,8"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
</Style>

I hope this information helps. If you need additional assistance, let us know.

Regards,
Todor
the Telerik team

[Vitalii]

Hi Todor,

I strongly believe that styling things are too complicated with RadTextBox. There are only 2 main themes, which are used in 95% cases: black and white (the rest is colorful image as background, but even they are bright or dark). So, i guess, it would be much easier to add a flag IsDarkTheme (false for light background, true otherwise).

It is great to have that agile while configuring (like http://www.telerik.com/community/forums/windows-phone/textbox/can-t-style-a-radtextbox.aspx), but i'd like (probably, it would be useful for 95% of users) to have those 2 themes working out-of-box, without dealing with hundreds of style lines.

PS: can you, please, just provide RadTextBox style for white background (just black border and gray readable font, nothing special)? I'm not familiar with design, and currently i dont have enough time to jump into it.

[Todor]

Hi Vitalii,

The parts of RadTextBox that look different on light and on dark theme are actually default resources provided by Windows Phone. RadTextBox uses them in a way similar to the way the native TextBox control does. I have attached a sample project with RadTextBox's default style attached. Please note that the resources that we use change their value depending on the currently selected theme. I have attached a sample which demonstrates two possible options that you have if you want your RadTextBox to look the same on both themes.

The first method is shown in MainPage.xaml.cs. There you can manually change the values of the resources and set them to the values that they have on light theme. Please note that you don't need to care about the style of RadTextBox and you can safely remove if from  MainPage.xaml.

The second method includes the Style that is added as a resource on MainPage.xaml. You need to replace the occurrences of these resources: PhoneTextBoxBrush, PhoneTextBoxForegroundBrush, PhoneTextBoxSelectionForegroundBrush, PhoneTextBoxEditBackgroundBrush, PhoneTextBoxEditBorderBrush with another values that will not change with the theme. If you choose this approach, you can remove the code that changes the resources from MainPage.xaml.cs, but may peek at the values that are set and in order to use them when you modify RadTextBox's Style in the resources.

I hope this information helps.
 
Regards,
Todor
Telerik

[Vitalii]

Thanks for the sample, your support is freaking amazing!

[Vitalii]

Thanks again for useful and teaching sample.

Values that i was needed: 
<Setter Property="BorderBrush"> 44 line
PhoneTextBoxEditBorderBrush    113 line

I wish you move them out of context to constants (espesially second one) and define them with default values, so it would be easier to customize.

[Ivo]

Hi Vitalii,
We will answer you tomorrow at the earliest convenience if and if so, when that will be done.

Regards,
Ivo
Telerik

[Vitalii]

Thanks!

Just to sum up: 
1) Please, add flag IsLightTheme for fast style switching (this would be used in 95% cases, i guess)
2) In case extra customization is needed, it would be cool to move all vars to constants so it would be really easy to change them.

[Kiril Stanoev]

Hi Vitalii,

Thank you for the valuable feedback. We will definitely consider your suggestions for future versions of RadControls for Windows Phone. 

Regards,
Kiril Stanoev
Telerik