Theme List Like Demo Application

18 posts, 4 answers
  1. Kashif
    Kashif avatar
    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

  2. Answer
    Dimitar
    Admin
    Dimitar avatar
    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.
  3. Kashif
    Kashif avatar
    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.

  4. Kashif
    Kashif avatar
    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
  5. Dimitar
    Admin
    Dimitar avatar
    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.
  6. Kashif
    Kashif avatar
    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)

  7. Answer
    Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    4120 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.
  8. Kashif
    Kashif avatar
    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

  9. Kashif
    Kashif avatar
    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.

     

     

  10. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    4120 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.
  11. Kashif
    Kashif avatar
    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.
  12. Answer
    Dimitar
    Admin
    Dimitar avatar
    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.
  13. Kashif
    Kashif avatar
    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.

     

  14. Answer
    Dimitar
    Admin
    Dimitar avatar
    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.
  15. Kashif
    Kashif avatar
    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.
  16. Kashif
    Kashif avatar
    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.

  17. Dimitar
    Admin
    Dimitar avatar
    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.
  18. Kashif
    Kashif avatar
    66 posts
    Member since:
    Jan 2019

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

    Yes, sure I will contact.
Back to Top