How to add multiline Text to a ListBox item? - c#

I have a little problem and can't find a solution.
I would like to put a text at the end of a ListBox item and I have no idea how...
TagLib.File f = TagLib.File.Create(paths[i]);
listBox1.Items.Add("0" + i + ". " + f.Tag.Title +"\n" + string.Join(", ", f.Tag.Performers) + " - " + "\r" + f.Tag.Album + " " + f.Properties.Duration.TotalMinutes.ToString());
I've already tried it but unfortunately it doesn't work that way. Maybe someone knows how you can always put the text at the end, with a code?
I want the text of all items to match each other
And I can't find a solution how to put the text at the end and how the text can match each other

To add multiline text to a ListBox Control, you need to measure and draw the text yourself.
Set the ListBox.DrawMode to DrawMode.OwnerDrawVariable, then override OnMeasureItem and OnDrawItem.
→ OnMeasureItem is called before an Item is drawn, to allow to define the Item Size, setting the MeasureItemEventArgs e.ItemWidth and e.ItemHeight properties (you have to verify that the ListBox contains Items before trying to measure one).
→ When OnDrawItem is called, the e.Bounds property of its DrawItemEventArgs will be set to the measure specified in OnMeasureItem.
To measure the Text, you can use both the TextRenderer class MeasureText() method or Graphics.MeasureString. The former is preferred, since we're going to use the TextRenderer class to draw the Items' text: TextRenderer.DrawText is more predictable than Graphics.DrawString() in this context and it renders the text naturally (as the ListBox - or ListView - does).
The TextRenderer's TextFormatFlags are used to fine-tune the rendering behavior. I've added TextFormatFlags.ExpandTabs to the flags, so you can also add Tabs ("\t") to the Text when needed. See the visual example.
"\n" can be used to generate line feeds.
In the sample code, I'm adding 8 pixels to the measured height of the Items, since a line separator is also drawn to better define the limits of an Item (otherwise, when a Item spans more than one line, it may be difficult to understand where its text starts and ends).
▶ Important: the maximum Item.Height is 255 pixels. Beyond this measure, the Item's text may not be rendered or be rendered partially (but it usually just disappears). There's a Min/Max check on the item height in the sample code.
This is how it works:
I suggest to use a class object, if you haven't, to store your Items
and describe them. Then use a List<class> as the
ListBox.DataSource. This way, you can better define how each part
should be rendered. Some parts may use a Bold Font or a different
Color.
using System;
using System.Drawing;
using System.Windows.Forms;
public class ListBoxMultiline : ListBox
{
TextFormatFlags flags = TextFormatFlags.WordBreak |
TextFormatFlags.PreserveGraphicsClipping |
TextFormatFlags.LeftAndRightPadding |
TextFormatFlags.ExpandTabs |
TextFormatFlags.VerticalCenter;
public ListBoxMultiline() { this.DrawMode = DrawMode.OwnerDrawVariable; }
protected override void OnDrawItem(DrawItemEventArgs e)
{
if (Items.Count == 0) return;
if (e.State.HasFlag(DrawItemState.Focus) || e.State.HasFlag(DrawItemState.Selected)) {
using (var selectionBrush = new SolidBrush(Color.Orange)) {
e.Graphics.FillRectangle(selectionBrush, e.Bounds);
}
}
else {
e.DrawBackground();
}
TextRenderer.DrawText(e.Graphics, GetItemText(Items[e.Index]), Font, e.Bounds, ForeColor, flags);
if (e.Index != Items.Count - 1) {
Point lineOffsetStart = new Point(e.Bounds.X, e.Bounds.Bottom - 1);
Point lineOffsetEnd = new Point(e.Bounds.Right, e.Bounds.Bottom - 1);
e.Graphics.DrawLine(Pens.LightGray, lineOffsetStart, lineOffsetEnd);
}
base.OnDrawItem(e);
}
protected override void OnMeasureItem(MeasureItemEventArgs e)
{
if (Items.Count == 0) return;
var size = GetItemSize(e.Graphics, GetItemText(Items[e.Index]));
e.ItemWidth = size.Width;
e.ItemHeight = size.Height;
base.OnMeasureItem(e);
}
private Size GetItemSize(Graphics g, string itemText)
{
var size = TextRenderer.MeasureText(g, itemText, Font, ClientSize, flags);
size.Height = Math.Max(Math.Min(size.Height, 247), Font.Height + 8) + 8;
return size;
}
}

Related

Panel size limitation - workaround

I have a little application made in Java and I want to build it in C# too. But I encounter a panel size limitation.
I add some custom Panel as records in a holder panel on a Form, by reading a file and for each line in that file I instantiate a new object in my holder Panel.
In Java you can add as many objects you want in a JPanel, as it resize and view all the objects inside it, using a JScrollPane. Anyway, I have a file with 1554 records inside and my Java application it will show all the objects, but in C# it shows me only 738 records, because of size limitation.
I have tried to add a panel "b" to that holder panel, and to add all the records (custom panel) in that panel b, and setting its height as Int32.MaxValue.
I have set the BorderStyle to FixedSingle to be able to view the size of panel b. It allows me to scroll more than Int16.MaxValue, but my objects are shown only till that Int16.MaxValue value.
The only solution is by paging all records?
It's not difficult to setup a ListView as the Control you showed.
You just need to paint some parts of its Items yourself.
Set:
1. ListView.OwnerDraw= true
2. ListView.View= View.Details
3. Add one Column, the size of the ListView minus the size of the ScrollBar (SystemInformation.VerticalScrollBarWidth)
4. ListView.HeaderStyle= none if you don't want to show the header.
5. Subscribe to the ListView.DrawSubItem event
6. Add an ImageList, set its ImageSize.Height to the height of the Items of your ListView and select it as the ListView.StateImageList (so it won't be necessary to create a Custom Control to define the Items' height).
Here I've added an utility that selects the Text formatting style based on the current alignment of the Items' Text. It won't be necessary if you align the Text to the left only.
In case you have a very long list of Items to add to the ListView, a VirtualMode is available.
It's not that different from the one you've shown, right?.
Color lvPanelsItemCurrentBackColor = Color.FromArgb(58, 188, 58);
Color lvPanelsItemSelectedBackColor = Color.FromArgb(48, 48, 48);
Color lvPanelsItemBackColor = Color.FromArgb(28,28,28);
Color lvPanelsItemForeColor = Color.White;
private void lvPanels_DrawSubItem(object sender, DrawListViewSubItemEventArgs e)
{
var lView = sender as ListView;
TextFormatFlags flags = GetTextAlignment(lView, e.ColumnIndex);
Color itemBackColor = lvPanelsItemBackColor;
Rectangle itemRect = e.Bounds;
itemRect.Inflate(-2, -2);
if (e.Item.Selected || e.Item.Focused) {
itemBackColor = e.Item.Focused ? lvPanelsItemCurrentBackColor : lvPanelsItemSelectedBackColor;
}
using (SolidBrush bkgrBrush = new SolidBrush(itemBackColor)) {
e.Graphics.FillRectangle(bkgrBrush, itemRect);
}
TextRenderer.DrawText(e.Graphics, e.SubItem.Text, e.SubItem.Font, e.Bounds, lvPanelsItemForeColor, flags);
}
private TextFormatFlags GetTextAlignment(ListView lstView, int colIndex)
{
TextFormatFlags flags = (lstView.View == View.Tile)
? (colIndex == 0) ? TextFormatFlags.Default : TextFormatFlags.Bottom
: TextFormatFlags.VerticalCenter;
flags |= TextFormatFlags.LeftAndRightPadding | TextFormatFlags.NoPrefix;
switch (lstView.Columns[colIndex].TextAlign)
{
case HorizontalAlignment.Left:
flags |= TextFormatFlags.Left;
break;
case HorizontalAlignment.Right:
flags |= TextFormatFlags.Right;
break;
case HorizontalAlignment.Center:
flags |= TextFormatFlags.HorizontalCenter;
break;
}
return flags;
}

Emulate System style on custom .NET Combobox

I've derived the ComboBox Class in order to have a custom layout of the list items. This is a DropDown list style Combobox, which has a nice appearance, while the custom one looks like an old-style one.
Is there any way to emulate or force the control to draw the "windows default-style" layout while still having a custom design? This is, having a style similar to the right one on the picture above, with the gradient background (or whatever it takes depending on the version of windows).
This what I've done so far:
public ComboBoxRGB()
{
this.DropDownStyle = System.Windows.Forms.ComboBoxStyle.DropDownList;
this.DrawMode = System.Windows.Forms.DrawMode.OwnerDrawFixed;
}
protected override void OnDrawItem(System.Windows.Forms.DrawItemEventArgs e)
{
base.OnDrawItem(e);
if (Items.Count > 0)
{
if (e.Index > -1)
{
if (Items[e.Index] == null) return;
int BarWidth = 16;
int BarSpacing = 1;
int Spacing_Top = 2;
int Spacing_Left = 3;
int Spacing_Right = 4;
ComboBoxRGBItem item;
try
{
item = (ComboBoxRGBItem)Items[e.Index];
}
catch { return; }
e.DrawBackground();
e.DrawFocusRectangle();
//Draw color indicator
System.Drawing.SolidBrush bColor = new System.Drawing.SolidBrush(System.Drawing.Color.FromArgb(item.Red, item.Green, item.Blue));
e.Graphics.FillRectangle(bColor, Spacing_Left + e.Bounds.Left, e.Bounds.Top + Spacing_Top, 12, 12);
//Draw text
System.Drawing.SolidBrush sbText = (e.State == System.Windows.Forms.DrawItemState.Selected) ? new System.Drawing.SolidBrush(System.Drawing.Color.White) : new System.Drawing.SolidBrush(System.Drawing.Color.Black);
e.Graphics.DrawString(item.Text, e.Font, sbText, Spacing_Left + e.Bounds.Left + BarWidth + Spacing_Right, e.Bounds.Top);
} //IF_Index
} //IF_Items_Count
}
I would be very pleased if anyone has any idea on how to do this. I would like to try to emulate the appearance manually, since this changes from windows version to version.
I was not able to find information about this on internet, so I suppose is not possible to auto-draw the backgound using system-default-style.
For the moment, the solution used is to draw it completely manually, through the override of Paint method, but this requires to take into account what is the version of Windows being executed and use different designs for drawing the control.
In case anyone has a different solution or any suggestion, please, let me know it.

WinForms: Changing ForeColor of Selected item in ListView

I am setting the ForeColor of all items in my ListView to a different color, but this get's overrided when the item is selected (changes to Black again; changes back to custom color on deselection).
I want my items to retain my custom color, even in selection.
I'm basically asking the same question that was asked here 7 years ago, and doesn't seem to have any satisfactory answer.
I tried searching in SO and elsewhere, and no luck. The only solution provided so far is to draw the whole thing (the DrawItem method), which I gave a try but is ridiculously complicated for such a petty requirement...
Is this the only way? Say it ain't so.
Enable your ListView OwnerDraw mode, then subscribe its DrawItem and DrawColumnHeader events.
If your design requires it, also subcribe the DrawSubitem event.
At this point, you can draw anything in the related areas of your ListView.
In the example, I've painted a little symbol in the Header area.
The Header text needs to be painted too.
If the Background color doesn't change (same as in design mode), you just need to use the DrawListViewItemEventArgs e parameter function e.DrawBackground();
If not, use e.Graphics.FillRectangle() to color the Item area, defined by e.Bounds.
The Item Text is drawn using e.Graphics.DrawString().
The item Text is e.Item.Text, the text area is defined by e.Bounds again.
If you don't need any specific details/settings for the item's text, you can simply use e.DrawText();, which uses the default properties (defined at design-time).
Here, the item color complex logic is that the color is specified inside the item text. Could be anything else. The item tag, its Index position, a List<Parameters>, you name it.
This is how it might look like:
(I added e.Graphics.TextRenderingHint = [] to show how you can control the quality of the rendered text. e.Graphics.TextContrast can be also used to enhance the contrast).
Note: this code sample only draws a generic image, if the ListView has an ImageList. You should also verify whether the SmallIcon/LargeIcon ImageLists are defined and draw the related Image in the specified size. It's the same procedure, though.
protected void listView1_DrawItem(object sender, DrawListViewItemEventArgs e)
{
e.Item.UseItemStyleForSubItems = true;
int imageOffset = 0;
Rectangle rect = e.Item.Bounds;
bool drawImage = !(e.Item.ImageList is null);
Color itemColor = Color.FromName(e.Item.Text.Substring(e.Item.Text.LastIndexOf(" ") + 1));
using (var format = new StringFormat(StringFormatFlags.FitBlackBox)) {
format.LineAlignment = StringAlignment.Center;
if (drawImage) {
imageOffset = e.Item.ImageList.ImageSize.Width + 1;
rect.Location = new Point(e.Bounds.X + imageOffset, e.Item.Bounds.Y);
rect.Size = new Size(e.Bounds.Width - imageOffset, e.Item.Bounds.Height);
e.Graphics.DrawImage(e.Item.ImageList.Images[e.Item.ImageIndex], e.Bounds.Location);
}
if (e.Item.Selected) {
using (var bkgrBrush = new SolidBrush(itemColor))
using (var foreBrush = new SolidBrush(e.Item.BackColor)) {
e.Graphics.FillRectangle(bkgrBrush, rect);
e.Graphics.DrawString(e.Item.Text, e.Item.Font, foreBrush, rect, format);
}
e.DrawFocusRectangle();
}
else {
//e.DrawDefault = true;
using (var foreBrush = new SolidBrush(itemColor)) {
e.Graphics.DrawString(e.Item.Text, e.Item.Font, foreBrush, rect, format);
}
}
}
}
// Draws small symbol in the Header beside the normal Text
protected void listView1_DrawColumnHeader(object sender, DrawListViewColumnHeaderEventArgs e)
{
e.DrawBackground();
string extra = (e.ColumnIndex == 1) ? (char)32 + "\u2660" + (char)32 : (char)32 + "\u2663" + (char)32;
using (var brush = new SolidBrush(e.ForeColor)) {
e.Graphics.DrawString(extra + e.Header.Text, e.Font, brush, e.Bounds, StringFormat.GenericTypographic);
}
}

Set Text to the lowest right edge of a label?

Easy example, lets say I'm creating a Label like that:
Label label = new Label();
label.Text = "Hello" + "20.50";
label.Width = 250;
label.Height = 100;
panel1.Controls.Add(label);
How could I say that the "20.50" should appear in the lowest right edge of the label?
For clarity I made a little example in word:
How could I achieve this? Any help appreciated!
There's no built-in support for this with a Label control. You'll need to inherit from Label to create a custom control, and then write the painting code yourself.
Of course, you'll also need some way to differentiate between the two strings. The + sign, when applied to two strings, is concatenation. The two strings are joined together by the compiler, so all you get is this: Hello20.50. You will either need to use two separate properties, each with their own strings, or insert some sort of delimiter in between the two strings that you can use to split them apart later. Since you're already creating a custom control class, I'd go with the separate properties—much cleaner code, and harder to get wrong.
public class CornerLabel : Label
{
public string Text2 { get; set; }
public CornerLabel()
{
// This label doesn't support autosizing because the default autosize logic
// only knows about the primary caption, not the secondary one.
//
// You will either have to set its size manually, or override the
// GetPreferredSize function and write your own logic. That would not be
// hard to do: use TextRenderer.MeasureText to determine the space
// required for both of your strings.
this.AutoSize = false;
}
protected override void OnPaint(PaintEventArgs e)
{
// Call the base class to paint the regular caption in the top-left.
base.OnPaint(e);
// Paint the secondary caption in the bottom-right.
TextRenderer.DrawText(e.Graphics,
this.Text2,
this.Font,
this.ClientRectangle,
this.ForeColor,
TextFormatFlags.Bottom | TextFormatFlags.Right);
}
}
Add this class to a new file, build your project, and then drop this control onto your form. Make sure to set both the Text and Text2 properties, and then resize the control in the designer and watch what happens!
Here is what you need, a custom label:
public class CustomLabel : Label
{
public CustomLabel()
{
TopLeftText = BottomRightText = "";
AutoSize = false;
}
public string TopLeftText {get;set;}
public string BottomRightText {get;set;}
protected override void OnPaint(PaintEventArgs e)
{
using (StringFormat sf = new StringFormat() { LineAlignment = StringAlignment.Near})
{
using(SolidBrush brush = new SolidBrush(ForeColor)){
e.Graphics.DrawString(TopLeftText, Font, brush, ClientRectangle, sf);
sf.LineAlignment = StringAlignment.Far;
sf.Alignment = StringAlignment.Far;
e.Graphics.DrawString(BottomRightText, Font, brush, ClientRectangle, sf);
}
}
}
}
//use it:
//first, set its size to what you want.
customLabel1.TopLeftText = house.Name;
customLabel2.BottomRightText = house.Number;

Can I display links in a ListView's detail mode?

I'm displaying a set of search results in a ListView. The first column holds the search term, and the second shows the number of matches.
There are tens of thousands of rows, so the ListView is in virtual mode.
I'd like to change this so that the second column shows the matches as hyperlinks, in the same way as a LinkLabel shows links; when the user clicks on the link, I'd like to receive an event that will let me open up the match elsewhere in our application.
Is this possible, and if so, how?
EDIT: I don't think I've been sufficiently clear - I want multiple hyperlinks in a single column, just as it is possible to have multiple hyperlinks in a single LinkLabel.
You can easily fake it. Ensure that the list view items you add have UseItemStyleForSubItems = false so that you can set the sub-item's ForeColor to blue. Implement the MouseMove event so you can underline the "link" and change the cursor. For example:
ListViewItem.ListViewSubItem mSelected;
private void listView1_MouseMove(object sender, MouseEventArgs e) {
var info = listView1.HitTest(e.Location);
if (info.SubItem == mSelected) return;
if (mSelected != null) mSelected.Font = listView1.Font;
mSelected = null;
listView1.Cursor = Cursors.Default;
if (info.SubItem != null && info.Item.SubItems[1] == info.SubItem) {
info.SubItem.Font = new Font(info.SubItem.Font, FontStyle.Underline);
listView1.Cursor = Cursors.Hand;
mSelected = info.SubItem;
}
}
Note that this snippet checks if the 2nd column is hovered, tweak as needed.
Use ObjectListView -- an open source wrapper around a standard ListView. It supports links directly:
This recipe documents the (very simple) process and how you can customise it.
The other answers here are great, but if you don't want to have to hack some code together, look at the DataGridView control which has support for LinkLabel equivalent columns.
Using this control, you get all the functionality of the details view in a ListView, but with more customisation per row.
You can by inheriting the ListView control override the method OnDrawSubItem.
Here is a VERY simple example of how you might do:
public class MyListView : ListView
{
private Brush m_brush;
private Pen m_pen;
public MyListView()
{
this.OwnerDraw = true;
m_brush = new SolidBrush(Color.Blue);
m_pen = new Pen(m_brush)
}
protected override void OnDrawColumnHeader(DrawListViewColumnHeaderEventArgs e)
{
e.DrawDefault = true;
}
protected override void OnDrawSubItem(DrawListViewSubItemEventArgs e)
{
if (e.ColumnIndex != 1) {
e.DrawDefault = true;
return;
}
// Draw the item's background.
e.DrawBackground();
var textSize = e.Graphics.MeasureString(e.SubItem.Text, e.SubItem.Font);
var textY = e.Bounds.Y + ((e.Bounds.Height - textSize.Height) / 2);
int textX = e.SubItem.Bounds.Location.X;
var lineY = textY + textSize.Height;
// Do the drawing of the underlined text.
e.Graphics.DrawString(e.SubItem.Text, e.SubItem.Font, m_brush, textX, textY);
e.Graphics.DrawLine(m_pen, textX, lineY, textX + textSize.Width, lineY);
}
}
You can set HotTracking to true so that when the user hovers mouse over the item it appears as link.

Categories