Problem with StyleManger.SetTheme and MS TextBox in DataForm

5 posts, 1 answers
  1. Ben Hayat
    Ben Hayat avatar
    902 posts
    Member since:
    May 2008

    Posted 19 Aug 2009 Link to this post

    When my page loads, I'd like to set any MS TextBox theme that are in a DataForm to Telerik Theme, so the TextBox and MaskEdit would match on the DataForm.
    But I ran into a problem. If a place a TextBox outside of the Dataform, The StyleManage.SetTheme will recognize it as the first paramaeter. However, as soon as I put the TextBox inside of a DataForm, the Stylemanager.SetTheme does not see it.

    Could you please verify this to see if it's a bug or there is another way to approach it.
    Thanks!
    ..Ben
  2. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 25 Aug 2009 Link to this post

    Hi Ben,

    Do you place the MS TextBox inside DataForm's EditTemplate? If this is the case then it is normal not to see it in the code-behind. I created a test project and in XAML I applied an Office_Black theme to a regular MS TextBox and it worked as expected. This is what I did:

    <df:DataForm Width="400" Height="300"
        <df:DataForm.EditTemplate> 
            <DataTemplate> 
                <TextBox Text="{Binding Name, Mode=TwoWay}" VerticalAlignment="Center" 
                                    telerik:StyleManager.Theme="Office_Black" /> 
            </DataTemplate> 
        </df:DataForm.EditTemplate> 
    </df:DataForm> 

    No matter if I give the TextBox an x:Name="myTextBox" I cannot do this in the code-behind:

    StyleManager.SetTheme(myTextBox, new Office_BlackTheme()); 

    So my suggestion would be for you to set the theme from XAML.
    I am attaching my sample project. Give it a try and let me know if you encounter any problems.


    Best wishes,
    Kiril Stanoev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Ben Hayat
    Ben Hayat avatar
    902 posts
    Member since:
    May 2008

    Posted 25 Aug 2009 Link to this post

    Hi Kiril;

    Thank you for the reply. A few weeks ago, I actually started going the route that you prescribed however, the problem is that, you have to explicitly use the word "Office_Black" in xaml. If an application would be set statically to Office_black only one hem), then it's not a problem, but if the application offers the end user to select a theme from a drop-down to set it dynamically, then the xaml setting would prevent it from dynamic setting.

    I've created a class in my APP.cs that has a property called "MyTheme". The default is Office_Black. However, if a user selects a different theme, I can change that property according to the user's selection. But in all the forms, in the "Loaded" event I use the following code to set the MS controls on the form:
    StyleManager.SetTheme(OKButton, App.NewTheme.MyTheme);
    StyleManager.SetTheme(CancelButton, App.NewTheme.MyTheme);

    StyleManager.SetTheme(XXXXXXX, App.NewTheme.MyTheme);

    With this code, I don't need to explicitly set the theme to Office_Black and this allows me to change the theme at runtime.

    How can we achive my goal with your suggestion?
    Thank you in advance!
    ..Ben

  4. Answer
    Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 26 Aug 2009 Link to this post

    Hi Ben,

    Thank you for the wonderful scenario. Bellow is my version of the solution.
    I created a class called MyStyleManager that has a single property of type Telerik.Windows.Controls.Theme.

    public class MyStyleManager : INotifyPropertyChanged 
        private Theme theme; 
     
        public Theme Theme 
        { 
            get 
            { 
                return this.theme; 
            } 
            set 
            { 
                if (this.theme != value) 
                { 
                    this.theme = value; 
                    OnNotifyPropertyChanged("Theme"); 
                } 
            } 
        } 
        #region INotifyPropertyChanged Members 
     
        public event PropertyChangedEventHandler PropertyChanged; 
        private void OnNotifyPropertyChanged(string propertyName) 
        { 
            if (PropertyChanged != null
            { 
                PropertyChanged(thisnew PropertyChangedEventArgs(propertyName)); 
            } 
        } 
        #endregion 
     

    After that I exposed MyStyleManager to be accessible from XAML.

    <UserControl.Resources> 
        <local:MyStyleManager x:Key="MyManager" /> 
    </UserControl.Resources> 

    Then, I created a ComboBox and populated with all the Telerik themes (make sure you add the binary for each theme you are about to use). Also I bound the ComboBox to MyStyleManager and set its SelectedIndex to 0.

    <ComboBox
            SelectedItem="{Binding Path=Theme, Source={StaticResource MyManager}, Mode=TwoWay}" 
            SelectedIndex="0" Width="200"
        <telerik:Office_BlackTheme /> 
        <telerik:Office_BlueTheme /> 
        <telerik:VistaTheme /> 
        <telerik:Office_SilverTheme /> 
        <telerik:SummerTheme /> 
    </ComboBox> 

    This way, every time the selected item in the ComboBox is changed, the change will reflect the Theme property of MyStyleManager.
    The final thing I did was to bind the theme of each control to the Theme property of MyStyleManager. For example, this is how the DataForm looked after the changes:

    <df:DataForm x:Name="theForm" Width="400" Height="300"
        <df:DataForm.EditTemplate> 
            <DataTemplate> 
                <StackPanel> 
                    <TextBox 
                            telerik:StyleManager.Theme="{Binding Theme, Source={StaticResource MyManager}}" 
                            Text="{Binding Name, Mode=TwoWay}" 
                            VerticalAlignment="Center" /> 
                    <telerikInput:RadMaskedTextBox 
                            telerik:StyleManager.Theme="{Binding Theme, Source={StaticResource MyManager}}" 
                            Value="{Binding Name, Mode=TwoWay}" /> 
                </StackPanel> 
            </DataTemplate> 
        </df:DataForm.EditTemplate> 
    </df:DataForm> 

    I am attaching my sample project for further reference. Take a look at it and let me know how it works for you.


    All the best,
    Kiril Stanoev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Ben Hayat
    Ben Hayat avatar
    902 posts
    Member since:
    May 2008

    Posted 26 Aug 2009 Link to this post

    This is it. You gave great solution!

    In fact I like this better to set it in xaml. I had created the same class too except mine did not implement "INotifyPropertyChanged". I propose to make this part of the Theme system.

    Thank you again.
    ..Ben
Back to Top