Theme List Like Demo Application

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

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.

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

Thank you very much, DDLThemeList is working good.

But there is little problem to Display as MenuItem.

If I use following formatting

see Attched image1

see attached image2

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)

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

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

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.

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.

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

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

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

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.

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

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.

Hi Muhammad,

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

Regards,
Dimitar
Progress Telerik