Placing a Label top-center of a Listview in winforms

Question

I am developing a software in winforms, I am stuck in a step where I have a label that is placed on the top of a ListView.

During the program run, the text of the Label is changed. The text could length logner or shorter.

like for example it could be "hello" one time and the next "hello, my name is ...".

My question is, would it be possible to place the label based on the location of the ListView in the form ?

I want the label always to be in the top center of the Listview.

Like as shown here:

                       Label
  [                   ListView                     ]

Text change:

                       Hello
  [                   ListView                     ]

Text change:

                 Hello My Name is Omar
  [                   ListView                     ]

I have tried to Set Label's AutoSize property to False, TextAlign property to MiddleCenter and Dock property to Fill. this doesn't work for me beacuse once I do this, I have some picturebowxes dissapearing from my Form once I run the software.

Set `AutoSize` to `false`, `TextAlign` to `MiddleCenter` and make the label as wide as the ListView, or set something like `Dock` to `Fill`. Is this sufficient? — Equalsk, Jun 18 '18 at 12:40
Possible duplicate of [How do I keep a label centered in WinForms?](https://stackoverflow.com/questions/4343730/how-do-i-keep-a-label-centered-in-winforms) — Equalsk, Jun 18 '18 at 12:40
@Equalsk, thank you for your answer. actually I have tried this but next to the ListView I have some pictureboxes. if I set the Dock to fill, the picture box is no longer visable. — Omar AlMadani, Jun 18 '18 at 12:42
You can try `Anchor` instead, or set the `PictureBox` to also have the appropriate `DockStyle`. — Equalsk, Jun 18 '18 at 12:42

Kaj · Answer 1 · 2018-06-18T14:04:13.600

1

That's an easy one. Just in the label TextChanged event, relocate the label position based on listView Location, Width and label Width and calculate the difference to divide it by 2 to get the center.

private void label1_TextChanged(object sender, EventArgs e)
        {
            label1.Location = new Point((listView1.Location.Y +listView1.Width - label1.Width) / 2, 
            label1.Location.Y);

        }

this will keep the label centered to listView when text in label changed so it'll be always centered.

Sure, you can change the Location.Y to whatever point you want, if you want to change the Y Location. Like an example : you can get listView Location y and then get the label Height to define the Y location.

Like :

    label1.Location = new Point((listView1.Location.Y + listView1.Width - label1.Width) / 2,
 listView1.Location.Y - label1.Height -10);

this will calculate listView location on Y axis and get the label Height then add a space by 10. This will keep the label location is in top +10 of the listView so if the label become two lines or n lines, it'll be always on the top of listView without covering each other

Here is the result :

edited Jun 18 '18 at 14:04

answered Jun 18 '18 at 12:43

Kaj

806
6
16

The code you have provided doesn't place the label on the top-center of the ListView, in fact it is on the top-left to my ListView. – Omar AlMadani Jun 18 '18 at 12:52
No, it's in the center because we are calculating the width of the two, then calculate the difference and **divide it by 2** this will keep the label in center ! I'll try to add a result as a Gif – Kaj Jun 18 '18 at 12:54
Well, you were right, I forgot to calculate the location. Updatd my answer, try it now – Kaj Jun 18 '18 at 13:19
Actually, when the label changes for the second time, it is not on the center anymore. – Omar AlMadani Jun 18 '18 at 13:49
yes, I have ! inside a private void label1_TextChanged(object sender, EventArgs e) – Omar AlMadani Jun 18 '18 at 14:03
and I have: this.label1.TextChanged += new System.EventHandler(this.label1_TextChanged); – Omar AlMadani Jun 18 '18 at 14:04
I've added a result in the answer, take a look ! – Kaj Jun 18 '18 at 14:04
I saw it, but sorry what I wanted is something to change the label entirely, not to add some text to the existing label. for example the first label could be " omar"and the second label could be " this is a label". it is not connected to the previous label. – Omar AlMadani Jun 18 '18 at 14:09
Well, you didn't say that before, you mentioned just the text changed ! Anyway : It's all based on the calculation method I've provided, all you have to do is when adding a label, is to calculate all labels in the same line and do the math in the same way ! Just calculate what you've added before to get the same result. I can't write something I don't know about. I mean I don't know how many labels you'll add, but follow the same concept to get the same result. Just calculate all labels you are adding nothing more. – Kaj Jun 18 '18 at 14:13
I am not adding any new labels. it is only one label that has the text changing everytime. – Omar AlMadani Jun 18 '18 at 14:16
Ohhh God. The example I added, is about locating the label in the top center, not about adding text to label, but I added some text to label in the Gif to show you it's locating itself when text changed. It's all about relocating the label nothing more. So whatever text you add to the label, it'll locate itself in the center. It's not about adding just hello to the label. Did you got it ? – Kaj Jun 18 '18 at 14:22
I get it, but the code you have there doesn't do what is expected. At the strat the label is in the top-center. After the text is changed, it is back to the top-left. – Omar AlMadani Jun 18 '18 at 14:41
As you see in the Gif, when the text changed, it relocated itself to center. I can't provide more without see your code ! – Kaj Jun 18 '18 at 14:43
I took two screen shots, this is at the Form load: https://pasteboard.co/HqtBg6T.png , this is after the first text change : https://pasteboard.co/HqtALEs.png – Omar AlMadani Jun 18 '18 at 14:52

Reza Aghaei · Accepted Answer · 2018-06-18T16:09:05.287

You can take advantages of Designer to satisfy the requirement without writing code at design time:

Using a Label having text aligned to center

Put the Label and ListView in the same container.
Set TextAlign property of the Label to MiddleCenter
Set AutoSize property of the Label to false
Set the Dock property of the Label to Top
Set the Dock property of the ListView to Fill

Using TabelLayoutPanel

Use a TableLayoutPanel with two rows:
Put the Label in the first row and set its Anchor to none.
Set AutoSize property of the Label to true which is set by default.
Put the ListView in the second row and set it's Anchor to top,left,bottom and right.

I have used a panel as a container, followed what you have suggested and it works perfectly! thanks. — Omar AlMadani, Jun 19 '18 at 07:37

Placing a Label top-center of a Listview in winforms

2 Answers2