Name with icon

3 posts, 0 answers
  1. MaiK
    MaiK avatar
    20 posts
    Member since:
    Mar 2018

    Posted 14 May 2018 Link to this post

    Hi there!

     

    Im working with property grid, and I need to put an image with property name.

    I have achieved it, but I need give some margin betwen image and text.(See attached image)

    I used that code:

    Private Sub PropertyGridParams_ItemFormatting(sender As Object, e As UI.PropertyGridItemFormattingEventArgs) Handles PropertyGridParams.ItemFormatting
        
                            e.VisualElement.Image = New Bitmap(ImagePath, New Size(18, 18))
                            e.VisualElement.ImageAlignment = ContentAlignment.MiddleRight
                     
     
    End Sub

    How can I set custom image without cover the text?

     

    Thank you!

     

  2.
  3. Hristo
    Admin
    Hristo avatar
    1507 posts

    Posted 15 May 2018 Link to this post

    Hi Mikel,

    Thank you for writing.

    The visual element to which you are setting the image in the ItemFormatting event is actually a container of the text and value elements. The visual element also does not have a text and an image set to it will always be positioned in the center of the element. The text which is displayed comes from the child text and value elements. I can suggest accessing any of these child elements and applying the image. You can also control how the image is positioned in relation to the text with the TextImageRelation property: 
    public partial class RadForm1 : Telerik.WinControls.UI.RadForm
    {
        Image image;
        public RadForm1()
        {
            InitializeComponent();
     
            new RadControlSpyForm().Show();
     
            this.image = Image.FromFile(@"..\..\error.png");
            this.radPropertyGrid1.SelectedObject = this;
            this.radPropertyGrid1.ItemFormatting += RadPropertyGrid1_ItemFormatting;
        }
     
        private void RadPropertyGrid1_ItemFormatting(object sender, Telerik.WinControls.UI.PropertyGridItemFormattingEventArgs e)
        {
            PropertyGridTextElement textElement = e.VisualElement.FindDescendant<PropertyGridTextElement>();
            if (textElement == null)
            {
                return;
            }
     
            PropertyGridItem item = e.Item as PropertyGridItem;
            if (item != null && item.Value != null && item.Value.ToString() == "RadForm1")
            {
                textElement.Image = this.image;
                textElement.TextImageRelation = System.Windows.Forms.TextImageRelation.TextBeforeImage;
            }
            else
            {
                textElement.ResetValue(LightVisualElement.ImageProperty, Telerik.WinControls.ValueResetFlags.Local);
                textElement.ResetValue(LightVisualElement.TextImageRelationProperty, Telerik.WinControls.ValueResetFlags.Local);
            }
        }
    }

    I am also attaching a screenshot showing the result on my end. I hope this will help.

    Regards,
    Hristo
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. MaiK
    MaiK avatar
    20 posts
    Member since:
    Mar 2018

    Posted 15 May 2018 in reply to Hristo Link to this post

    That worked! Thank you.
Back to Top