Telerik Forums / UI for WinForms Forum / General Discussions /

Theme List Like Demo Application

Telerik UI for WinForms
Resources Buy Try

18 posts, 4 answers

Kashif

66 posts

Member since:
Jan 2019

Posted 02 Oct 2019 Link to this post

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
Answer
Dimitar
Admin

2960 posts
Posted 02 Oct 2019 Link to this post

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

1432409.zip
Kashif

66 posts

Member since:
Jan 2019

Posted 02 Oct 2019 in reply to Dimitar Link to this post

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

66 posts

Member since:
Jan 2019

Posted 02 Oct 2019 in reply to Dimitar Link to this post

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

Dimitar

Admin

2960 posts

Posted 03 Oct 2019 Link to this post

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Kashif

66 posts

Member since:
Jan 2019
Posted 03 Oct 2019 in reply to Dimitar Link to this post

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)

image4.png

image1.png

image3.png

image2.png

Answer

Dess | Tech Support Engineer, Sr.

Admin

4130 posts

Posted 07 Oct 2019 Link to this post

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Kashif

66 posts

Member since:
Jan 2019
Posted 07 Oct 2019 in reply to Dess | Tech Support Engineer, Sr. Link to this post

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

ThemesMenu.gif
Kashif

66 posts

Member since:
Jan 2019

Posted 07 Oct 2019 in reply to Dess | Tech Support Engineer, Sr. Link to this post

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, Sr.
Admin

4130 posts
Posted 08 Oct 2019 Link to this post

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Kashif

66 posts

Member since:
Jan 2019
Posted 09 Oct 2019 in reply to Dess | Tech Support Engineer, Sr. Link to this post

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.

themesmenu.gif

Answer

Dimitar

Admin

2960 posts

Posted 10 Oct 2019 Link to this post

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Kashif

66 posts

Member since:
Jan 2019

Posted 10 Oct 2019 Link to this post

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.
Answer
Dimitar
Admin

2960 posts
Posted 11 Oct 2019 Link to this post

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Kashif

66 posts

Member since:
Jan 2019

Posted 11 Oct 2019 in reply to Dimitar Link to this post

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

66 posts

Member since:
Jan 2019

Posted 12 Oct 2019 in reply to Kashif Link to this post

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
Admin

2960 posts

Posted 14 Oct 2019 Link to this post

Hi Muhammad,
I am glad that this works now. Do not hesitate to contact us if you have other questions.
Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Kashif

66 posts

Member since:
Jan 2019

Posted 15 Oct 2019 in reply to Dimitar Link to this post

Yes, sure I will contact.