Theme List Like Demo Application

[Kashif]

Hello Admins.

Currently I'm using radMenu for displaying and changing the theme at Run time.

Its working fine, but I want to Display the List like in Demo Forms.(Theme Name + its Color Bar).

How can i achieve this UI behavior .

I have check the demo application but unable to find any help.

 

Thank you

[Dimitar]

Hi Muhammad,

I have created and attached a project that uses the code from the demo application and displays the themes with the colors. 

I hope this helps. Should you have any other questions, do not hesitate to ask.

Regards,
Dimitar
Progress Telerik

[Kashif]

Thank you very much for the example. its working perfectly as i required.

Can i Display Color Codes in RadMenu items.

How can i check my Current Enabled theme programmatically to select/Highlight it from the List.

[Kashif]

How can i Display Color Code with radMenu items Or With CommandBar DropDownList Items

[Dimitar]

Hello Muhammad,

You can use the same approach to add the items to a menu or a DropDownList:

private void AddDDLItem(string text, IList<Color> colors)
{
    var item = new RadListDataItem(text);
    Image image = this.CreateBitmapFromColors(colors);

    item.Image = image;
    item.TextImageRelation = TextImageRelation.TextBeforeImage;
    item.ImageAlignment = ContentAlignment.MiddleRight;
    this.commandBarDropDownList1.Items.Add(item);
}
private void AddMenuItem(string text, IList<Color> colors)
{
    var item = new RadMenuItem(text);
    Image image = this.CreateBitmapFromColors(colors);
    item.Layout.InternalLayoutPanel.AutoSizeMode = RadAutoSizeMode.FitToAvailableSize;
    item.Layout.InternalLayoutPanel.FitToSizeMode = RadFitToSizeMode.FitToParentBounds;
    item.Image = image;
    item.TextImageRelation = TextImageRelation.TextBeforeImage;
    item.ImageAlignment = ContentAlignment.MiddleRight;
    
    radMenuItem3.Items.Add(item);
}

I hope this helps. Should you have any other questions, do not hesitate to ask.

Regards,
Dimitar
Progress Telerik

[Kashif]

Thank you very much, DDLThemeList is working good.

But there is little problem to Display as MenuItem.

If I use following formatting

item.TextImageRelation = TextImageRelation.TextBeforeImage;
item.ImageAlignment = ContentAlignment.MiddleRight;

see Attched image1

 

item.TextImageRelation = TextImageRelation.TextBeforeImage;
item.ImageAlignment = ContentAlignment.MiddleLeft;

see attached image2

item.TextImageRelation = TextImageRelation.ImageBeforeText;
item.ImageAlignment = ContentAlignment.MiddleRight;

See attched image3

Only third Code looks to work.(Alignment).

Is it possible to show Color image at right side in menuitem, with proper alignment (Like in ListBoxControl or DropDownList)

I have to Show CheckBox at the left side of ThemeName which is currently applied to application.and if ColorBox is at left side no checkbox appears.(See Attached Image4 required with color box at right side)

[Dess | Tech Support Engineer, Principal]

Hello, Kashif,    

Currently, Dimitar is out of office so I will be assisting with this thread. 

If you need to align the text and color box in a similar way as it is in RadListControl and RadDropDownList, you need to manipulate not only the ImageAlignment, but the TextAlignment for the menu item as well:

        private void AddMenuItem(string text, IList<Color> colors)
        {
            var item = new RadMenuItem(text);
            Image image = this.CreateBitmapFromColors(colors);
            item.Layout.InternalLayoutPanel.AutoSizeMode = RadAutoSizeMode.FitToAvailableSize;
            item.Layout.InternalLayoutPanel.FitToSizeMode = RadFitToSizeMode.FitToParentBounds;
            item.Image = image;
            item.TextImageRelation = TextImageRelation.TextBeforeImage;
            item.ImageAlignment = ContentAlignment.MiddleRight;
            item.TextAlignment = ContentAlignment.MiddleLeft;

            this.radMenuItem1.Items.Add(item);
        }

As to the check mark, note that the image is applied to the CheckmarkPrimitive. Hence, it will overlap the check mark itself and you wouldn't be able to see it. If you need to display the check mark as well, I would recommend you to use a LightVisualElement for the text and image as follows:

 

        private void AddMenuItem(string text, IList<Color> colors)
        {
            var item = new RadMenuItem();
            Image image = this.CreateBitmapFromColors(colors);
            item.Layout.InternalLayoutPanel.AutoSizeMode = RadAutoSizeMode.FitToAvailableSize;
            item.Layout.InternalLayoutPanel.FitToSizeMode = RadFitToSizeMode.FitToParentBounds;

            LightVisualElement lve = new LightVisualElement();
            lve.Image = image;
            lve.StretchHorizontally = true;
            lve.Text = text;
            lve.Margin = new System.Windows.Forms.Padding(30, 0, 0, 0);
            item.Children.Insert (0,lve);
            lve.TextImageRelation = TextImageRelation.TextBeforeImage;
            lve.ImageAlignment = ContentAlignment.MiddleRight;
            lve.TextAlignment = ContentAlignment.MiddleLeft;
            item.CheckOnClick = true;
            this.radMenuItem1.Items.Add(item);
        }

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Kashif]

Thank you very much, RadMenu showing the its items as expected.

But it is not like as standard Menu items. like highlighting Menu items When mouse moves on them.

Image Attached

[Kashif]

I have another question, which is related to already on going discussion.

RadMenu which is am already using to Change the Theme of the Application uses the following code to change the Theme and MenuItem CheckBox.

public MainForm()
 {
     InitializeComponent();

     MenuItemDefault.Click += new EventHandler(ChangeTheme_Click);
     MenuItemFluent.Click += new EventHandler(ChangeTheme_Click);
     MenuItemWindows8.Click += new EventHandler(ChangeTheme_Click);
     MenuItemTelerikBlue.Click += new EventHandler(ChangeTheme_Click);
     MenuItemTelerikMetro.Click += new EventHandler(ChangeTheme_Click);
     MenuItemOffice2010Blue.Click += new EventHandler(ChangeTheme_Click);
     MenuItemOffice2007Silver.Click += new EventHandler(ChangeTheme_Click);
     MenuItemOffice2013Light.Click += new EventHandler(ChangeTheme_Click);
     MenuItemVS2012Light.Click += new EventHandler(ChangeTheme_Click);
 }

 private void ChangeTheme_Click(object sender, EventArgs e)
 {
     RadMenuItem menuItem = (RadMenuItem)sender;

     foreach (RadMenuItem sibling in menuItem.HierarchyParent.Items)
         sibling.IsChecked = false;

     menuItem.IsChecked = true;

     string themeName = (string)(menuItem).Tag;
     ThemeResolutionService.ApplicationThemeName = themeName;
 }

It was working fine Before, But when i Added MenuItemSeperator, It is generating Exception in this line

foreach (RadMenuItem sibling in menuItem.HierarchyParent.Items)

$exception    {"Unable to cast object of type 'Telerik.WinControls.UI.RadMenuSeparatorItem' to type 'Telerik.WinControls.UI.RadMenuItem'."}    System.InvalidCastException.

 

 

[Dess | Tech Support Engineer, Principal]

Hello, Kashif,     

RadMenuSeparatorItem is a derivative of RadMenuItemBase. That is why it can't be converted to RadMenuItem in the foreach loop. Feel free to use in the loop the RadMenuItemBase type and try to cast each item to RadMenuItem and only if the cast is successful, proceed with the further execution:

            foreach (RadMenuItemBase item in this.radMenuItem1.Items)
            {
                RadMenuItem menuItem = item as RadMenuItem;
                if (menuItem!=null)
                {
                    //TODO
                }
            }

I hope this information helps.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Kashif]

RadMenu showing the its items as expected.
But it is not like as standard Menu items. like highlighting Menu items When mouse moves on them.

[Dimitar]

Hello Muhammad,

Indeed this breaks the hover effect. You can change this a little to fix this. Here is the new code: 

private void AddMenuItem(string text, IList<Color> colors)
{
    var item = new RadMenuItem(text);
    Image image = this.CreateBitmapFromColors(colors);
    item.Layout.InternalLayoutPanel.AutoSizeMode = RadAutoSizeMode.FitToAvailableSize;
    item.Layout.InternalLayoutPanel.FitToSizeMode = RadFitToSizeMode.FitToParentBounds;

    LightVisualElement lve = new LightVisualElement();
    lve.Image = image;
    lve.Alignment = ContentAlignment.MiddleRight;
    lve.StretchHorizontally = false;
    lve.ShouldHandleMouseInput = false;
    lve.NotifyParentOnMouseInput = true;
    lve.DrawText = false;
    lve.ZIndex = 100; ;          
    item.Children.Insert(0, lve);
    lve.TextImageRelation = TextImageRelation.TextBeforeImage;
    lve.ImageAlignment = ContentAlignment.MiddleRight;
    lve.TextAlignment = ContentAlignment.MiddleLeft;
    item.CheckOnClick = true;
    this.radMenuItem3.Items.Add(item);
}

Let me know how this works for you.

Regards,
Dimitar
Progress Telerik

[Kashif]

Thank you very much Mr. Dimitar.

Now the Display is Looking Good.

Is it possible to increase MenuItem Width, Because some theme names and Color Box are overlapping.

I Can register the Menuitem Click event, But How to Get the Theme Name within the Event.

 

Can u please explain ZIndex property used in the example.

 

[Dimitar]

Hello Muhammad,

To increase the width set the MinimumSize (this should be done after the items are added): 

radMenuItem1.DropDown.MinimumSize = new Size(300, 0);

The Z-index indicates the paint order (elements with higher Zindex are painted over the elements with a lower one).

Please let me know if there is anything else I can help you with. 

Regards,
Dimitar
Progress Telerik

[Kashif]

I Can register the Menuitem Click event, But How to Get the Theme Name within the Event.

[Kashif]

Thank you very much for Helping me to get the required UI design.

I have also manage to work with Menuitem Click event and Change the Application Theme.

Thank you again Mr. Dimitar & Ms. Dess for all your support.

[Dimitar]

Hi Muhammad,

I am glad that this works now. Do not hesitate to contact us if you have other questions.

Regards,
Dimitar
Progress Telerik

[Kashif]

Yes, sure I will contact.