This is a migrated thread and some comments may be shown as answers.

Theming subitems

4 Answers 143 Views

Themes and Visual Style Builder

This is a migrated thread and some comments may be shown as answers.

4 Answers, 1 is accepted

answered on 25 Jul 2008, 10:01 AM

WindowsApplication1.zip

Hi Nopecio,

The key in styling custom controls, is in these few lines of code that should define how this custom control should appear in VSB. Generally you need to do 2 things:

Inherit a class that should create instances of your custom controls, to be styled in the VSB. This would be RadControlDesignTimeData.
Add the RadThemeDesignerDataAttribute to your custom control class declaration that associates the control with the inherited RadControlDesignTimeData.

Now when it comes to implementing the RadControlDesignTimeData, there are few things you should have mind. You should start with overriding the GetThemeDesignedControls method. If we assume we should make the Magnifier example themmable, you should do the following:

    
                public class MagnifierThemeDesignerData: RadControlDesignTimeData 
            
                { 
            
                        public override ThemeDesignedControlList GetThemeDesignedControls(System.Windows.Forms.Control previewSurface) 
            
                        {...} 
            
                }

2.Set the attribute

    
            [RadThemeDesignerData(typeof(MagnifierThemeDesignerData))] 
        
            public class Magnifier : RadControl 
        
            { 
        
                ... 
        
            }

3. Here is a sample GetThemeDesignedControls method implementation:

    
            public override ThemeDesignedControlList GetThemeDesignedControls(System.Windows.Forms.Control previewSurface) 
        
            { 
        
                //This method should return a list of control pairs. The first control in the pair will apear in the "Design" and  
        
                //"Preview" panes. The second will be used to generate the "Control Structure" treeview. 
        
                //This control instance will appear in "Desin" and "Preview" panes in the Visual Style Builder app 
        
                Magnifier magnifierPreview = new Magnifier(); 
        
                magnifierPreview.Size = new Size(300, 300); 
        
                //Setup the control and add some items to preview 
        
                magnifierPreview.Element.Layout.Columns = 7; 
        
                magnifierPreview.Element.Layout.DefaultCellSize = new Size(56, 48); 
        
                for (int i = 0; i < 49; i++) 
        
                { 
        
                RadButtonElement button = new RadButtonElement(i.ToString()); 
        
                button.StretchHorizontally = false; 
        
                button.StretchVertically = false; 
        
                magnifierPreview.Items.Add(button); 
        
                } 
        
                //The UI element structure of the following control will appear in "Control Structure" treeview in the Visual Style Builder app 
        
                Magnifier magnifierStructure = new Magnifier(); 
        
                magnifierStructure.Size = new Size(300, 300); 
        
                //Add a button to enable Styling of buttons within the Magnifier control 
        
                magnifierStructure.Items.Add(new RadButtonElement("A button in magnifier to style"));  
        
                //This way VSB will produce themes that contain styles for both MagnifierElement and any RadButtonElements within it. 
        
                //setup data for VSB 
        
                ThemeDesignedControl themeDesignerControl = new ThemeDesignedControl(magnifierPreview, magnifierStructure.RootElement); 
        
                ThemeDesignedControlList res = new ThemeDesignedControlList(); 
        
                res.Add(themeDesignerControl); 
        
                return res; 
        
            }

I've attached a modified version of the Magnifier sample that demonstrates the approach and employing my humble design skills I styled the Magnifier using the VSB:

Let me know if there are any problems with the sample.

Please, don't hesitate to contact me if you have other questions.

All the best,
Mike
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.