RadTextBox Light theme problems

9 posts, 0 answers
  1. gilangkusumajati
    gilangkusumajati avatar
    1 posts
    Member since:
    Jan 2013

    Posted 02 Feb 2013 Link to this post

    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
  2. Todor
    Admin
    Todor avatar
    778 posts

    Posted 07 Feb 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
  4. Vitalii
    Vitalii avatar
    104 posts
    Member since:
    Jul 2013

    Posted 28 Sep 2013 Link to this post

    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.
  5. Todor
    Admin
    Todor avatar
    778 posts

    Posted 02 Oct 2013 Link to this post

    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: PhoneTextBoxBrushPhoneTextBoxForegroundBrush, PhoneTextBoxSelectionForegroundBrushPhoneTextBoxEditBackgroundBrushPhoneTextBoxEditBorderBrush 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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINDOWS PHONE 7.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  6. Vitalii
    Vitalii avatar
    104 posts
    Member since:
    Jul 2013

    Posted 02 Oct 2013 Link to this post

    Thanks for the sample, your support is freaking amazing!
  7. Vitalii
    Vitalii avatar
    104 posts
    Member since:
    Jul 2013

    Posted 02 Oct 2013 Link to this post


    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.
  8. Ivo
    Admin
    Ivo avatar
    90 posts

    Posted 07 Oct 2013 Link to this post

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

    Regards,
    Ivo
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINDOWS PHONE 7.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  9. Vitalii
    Vitalii avatar
    104 posts
    Member since:
    Jul 2013

    Posted 07 Oct 2013 Link to this post

    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.
  10. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 08 Oct 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINDOWS PHONE 7.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
Back to Top
DevCraft banner