Images display in User Controls

Question

Hi.

I'm programming an application in order to make lists, forms and i created my own explorator.

The problem is, when I want to display images that are in user controls, there is a bug in the display. It's quite difficult to understand, but I'll try.

• In my Form (which I called ListEditor), there is a user control. Let's call this ItemsLignBox (because it is a lign of item for my list).
• Then, in the ItemsLignBox, there is an other user control which I called ItemBox.
• Eventually, there is an other user control in the ItemBox, which name is SimpleButton (because it is a button I created, with my own properties, events and methods).
• In this SimpleButton, there is a classic windows button, and the image is set in the BackgroundImage property, and the BackgroundImageLayout propety is set to Stretch.

So now, when I set the image and I open the list for the first time, all is right.

But when I delete the ItesmLignBox controls and I create new ones (whhen I add a lign for example), the image doesn't fit in the button.

Here is an image when I open the Form for the first time:

Here is an image after I added a lign:

Can someone help me with this bug? I have tried many things, and the only thing to make the images fit in the buttons is to close and to open again the window. But I don't want to close and to open the window each time I add a lign...

Thank you.

Answer 1

@NathanTheProgrammer I test the project you provided. When I followed the steps:

1. delete the addValueButton's ButtonImage in "Properties Window"
2. rebuild and debug it, the deleteValueButton's ButtonImage displayed normally
3. reset the addValueButton's ButtonImage
4. both buttons' ButtonImage displayed normally

which is quite weird. You can report a problem on Developer Community.

Here I have a workaround that you can try to resize the image to match the size of the button.

private void List_ItemBox_Load(object sender, EventArgs e)  
{  
    Image originalimage = Properties.Resources.Add;  
    Image newimage = (Image)(new Bitmap(originalimage, new Size(addValueButton.Width - 7, addValueButton.Height - 7)));  
  
    addValueButton.ButtonImage = newimage;  
    addValueButton.ButtonImageLayout = ImageLayout.None;  
}  

Answer 2

Hi, sorry to answer so late.

It's not "lign" it is "line", I can do some mistakes as I'm french.

Of course I can give you some.
As I don't know what exactly the problem is, I may not give you the good code snippets, but here are some:

This is how I refresh the lines to the form (the Source contains the lists datas, with the differents lines, items, items values...)

    private void RefreshLigns()  

    {  
        SuspendLayout();  
        linesPanel.Controls.Clear();  
        linesPanel.RowStyles.Clear();  
        linesPanel.RowCount = Source.Lines.Count + 1;  
        for (int line = 0; line < Source.Lines.Count; line++)  
        {  
            var newline = new List_ItemsLineBox(Source.Lines[line], Source.ColumnsNumber)  
            {  
                Dock = DockStyle.Fill  
            };  
            newline.LineDeleted += new List_ItemsLignBox.LineDeletedHandler(Source.OnLignDeleted_Received);  
            linesPanel.RowStyles.Insert(line, new RowStyle(SizeType.AutoSize));  
            linesPanel.Controls.Add(newline, 0, line);  
        }  
        ResumeLayout();  
    }  

This is what a "line" look:

Here is how I refresh the differents items in "ItemsLineBox"(in the program, a "line" is made of "items")

public void RefreshItems()

    {  
        SuspendLayout();  
        itemsTableLayoutPanel.Controls.Clear();  
        itemsTableLayoutPanel.ColumnStyles.Clear();  
        itemsTableLayoutPanel.ColumnCount = ColumnsNumber;  
        for (int item = 0; item < ColumnsNumber; item++)  
        {  
            if (Datas.Items.Count <= item)  
            {  
                Datas.AddItem();  
            }  
            itemsTableLayoutPanel.ColumnStyles.Insert(item, new ColumnStyle(SizeType.Percent, 100 / ColumnsNumber));  
            var newitem = new List_ItemBox(Datas.Items[item])  
            {  
                Dock = DockStyle.Fill  
            };  
            itemsTableLayoutPanel.Controls.Add(newitem, item, 0);  
        }  
        ResumeLayout();  
    }  

Here is what an item looks like:

(The image that doesn't fit is when executing program is the top left one)

If you need more snippets, I can send all of the code, I didn't sent him is this answer because I thought it would be too long.

Thanks to care about this and for your help.

Answer 3

Hi NathanTheProgrammer,

It seems that you are using a TableLayoutPanel to host the ItemsLignBox. Here I try to create a project based on your description. The "BackgroundImageLayout" property of all buttons are set to "Stretch".

However, in my test, everything seems works fine. Here is the test result.

Here are some main codes.

button to add new ItemsLignBox:

private void buttonAdd_Click(object sender, EventArgs e)  
{  
    tableLayoutPanel1.RowCount += 1;  
    tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.AutoSize));  
    ItemsLignBox itemsLignBox = new ItemsLignBox();  
    itemsLignBox.Dock = DockStyle.Fill;  
    this.tableLayoutPanel1.Controls.Add(itemsLignBox);  
}  

button to remove ItemsLignBox:

private void buttonRemove_Click(object sender, EventArgs e)  
{  
    this.Parent.Controls.Remove(this);  
}  

I tested it on .NET Framework 4.7.2.