We Keep Coding

C# objectlistview undefined offset in cell editor

I use TreeListView component from ObjectListView library. I make cell values editable and when i double click on them TextBox will appear with odd offset.
I want to remove this offset, but how?
before start editing
after start editing
As you can see first row, second column ("My new device"), TextBox is appeared with offset.
P.S. Editing work as expected. Only offset is annoying me
P.P.S. As you can see the offset depends of first column offset. How i can change it to zero?

After long searches i found solution!
Source code of OLV, ObjectListView.cs
public virtual void StartCellEdit(OLVListItem item, int subItemIndex) {
OLVColumn column = this.GetColumn(subItemIndex);
Control c = this.GetCellEditor(item, subItemIndex);
Rectangle cellBounds = this.CalculateCellBounds(item, subItemIndex);
c.Bounds = this.CalculateCellEditorBounds(item, subItemIndex, c.PreferredSize);
// Try to align the control as the column is aligned. Not all controls support this property
Munger.PutProperty(c, "TextAlign", column.TextAlign);
// Give the control the value from the model
this.SetControlValue(c, column.GetValue(item.RowObject), column.GetStringValue(item.RowObject));
// Give the outside world the chance to munge with the process
this.CellEditEventArgs = new CellEditEventArgs(column, c, cellBounds, item, subItemIndex);
this.OnCellEditStarting(this.CellEditEventArgs);
if (this.CellEditEventArgs.Cancel)
return;
// The event handler may have completely changed the control, so we need to remember it
this.cellEditor = this.CellEditEventArgs.Control;
this.Invalidate();
this.Controls.Add(this.cellEditor);
this.ConfigureControl();
this.PauseAnimations(true);
}
I saw CellEditEventArgs contains Control, that drawed in area named Bounds.
This function in the source file append offset to control's bounds:
protected Rectangle CalculateCellEditorBoundsStandard(OLVListItem item, int subItemIndex, Rectangle cellBounds, Size preferredSize) {
if (this.View == View.Tile)
return cellBounds;
// Center the editor vertically
if (cellBounds.Height != preferredSize.Height)
cellBounds.Y += (cellBounds.Height - preferredSize.Height) / 2;
// Only Details view needs more processing
if (this.View != View.Details)
return cellBounds;
// Allow for image (if there is one).
int offset = 0;
object imageSelector = null;
if (subItemIndex == 0)
imageSelector = item.ImageSelector;
else {
// We only check for subitem images if we are owner drawn or showing subitem images
if (this.OwnerDraw || this.ShowImagesOnSubItems)
imageSelector = item.GetSubItem(subItemIndex).ImageSelector;
}
if (this.GetActualImageIndex(imageSelector) != -1) {
offset += this.SmallImageSize.Width + 2;
}
// Allow for checkbox
if (this.CheckBoxes && this.StateImageList != null && subItemIndex == 0) {
offset += this.StateImageList.ImageSize.Width + 2;
}
// Allow for indent (first column only)
if (subItemIndex == 0 && item.IndentCount > 0) {
offset += (this.SmallImageSize.Width * item.IndentCount);
}
// Do the adjustment
if (offset > 0) {
cellBounds.X += offset;
cellBounds.Width -= offset;
}
return cellBounds;
}
We can see, that offset appending to every cell (not only first). Also we can se, that CellEditEventArgs contains CellBounds.
So we can just reset Control.Bounds to CellBounds value:
//...
dataTreeView.CellEditStarting += DisableInputValueForCollections;
//...
private static void DisableInputValueForCollections(object sender, CellEditEventArgs e)
{
RemoveExtraOffsetForNotFirstColumnInputControl(e);
var node = e.RowObject as DataTreeNode;
if (node != null && e.Column.AspectName == "Value")
{
if (node.IsContainer()) e.Cancel = true;
}
}
//...
private static void RemoveExtraOffsetForNotFirstColumnInputControl(CellEditEventArgs e)
{
if (e.Column.AspectName != "Name")
{
e.Control.Bounds = e.CellBounds;
}
}
//...

The issue still exists in OLV v2.9.1. I worked around it slightly different than muzagursiy did.
olv.CellEditStarting += (sender, args) =>
{
// Left align the edit control
args.Control.Location = args.CellBounds.Location;
// Readjust the size of the control to fill the whole cell if CellEditUseWholeCellEffective is enabled
if (args.Column.CellEditUseWholeCellEffective)
{
args.Control.Size = args.CellBounds.Size;
}
};

How to create a toggle button inside a column in C#?

I want to create this view. But I don't know how to make this kind of button, is it feasible with C#? If so, Please help me.

For a ListView you can get something that looks like your image by
splitting the data into the Text and the Tags of each Item/Subitem
owner-drawing the ListView
storing the two images (including headroom) in two Bitmaps.
Coding the MouseDown event to bring the 'buttons' to live
Here is the code for owner-drawing.
private void listView3_DrawItem(object sender, DrawListViewItemEventArgs e)
{
Rectangle textBounds = e.Bounds; textBounds.Height /= 2;
e.Graphics.DrawImage(e.Item.Text == "True" ? bmpOn : bmpOff, e.Bounds.Location);
TextRenderer.DrawText(e.Graphics, e.Item.Tag.ToString(),
Font, textBounds, Color.Black, TFFcenter);
}
private void listView3_DrawSubItem(object sender, DrawListViewSubItemEventArgs e)
{
Rectangle textBounds = e.Bounds; textBounds.Height /= 2;
e.Graphics.DrawImage(e.SubItem.Text == "True" ? bmpOn : bmpOff, e.Bounds.Location);
TextRenderer.DrawText(e.Graphics, e.SubItem.Tag.ToString(),
Font, textBounds, Color.Black, TFFcenter);
}
private void listView3_DrawColumnHeader(object sender, DrawListViewColumnHeaderEventArgs e)
{
e.DrawDefault = true;
}
The code to process clicking on a ListView is simple but not obvious:
private void listView3_MouseDown(object sender, MouseEventArgs e)
{
ListViewHitTestInfo HI = listView3.HitTest(e.Location);
if (HI.SubItem != null) HI.SubItem.Text = HI.SubItem.Text == "True" ? "False" : "True";
else if (HI.Item != null) HI.Item.Text = HI.Item.Text == "True" ? "False" : "True";
}
The DrawText call uses TextFormatFlags to center the text in the upper half:
TextFormatFlags TFFcenter =
TextFormatFlags.HorizontalCenter | TextFormatFlags.VerticalCenter;
The trick is in preparing the whole ListView.
For my test I used this routine:
ImageList il = new ImageList();
il.ImageSize = new Size(1, bmpOff.Height);
listView3.SmallImageList = il;
for (int c = 0; c < listView3.Columns.Count; c++)
listView3.Columns[c].Width = bmpOff.Width;
for (int i = 0; i < listView3.Columns.Count; i++)
{
ListViewItem lvi = new ListViewItem( (i % 2 == 0).ToString() );
for (int c = 0; c < 5; c++)
{
lvi.SubItems.Add( ( (c+i) % 2 == 0).ToString());
lvi.SubItems[c].Tag = "3/7";
}
lvi.Tag = "3/7";
listView3.Items.Add(lvi);
}
listView3.Width = listView3.Columns.Count * bmpOff.Width + 4;
Note how I use a dummy ImageList to enforce the Item heights..but while you're at it, it is probably a better idea to add the ImageList in the Designer and store the Bitmaps in it..
When you want to access/change the text displayed above the buttons you need to use the Tag of each Item/Subitem..!
It is also possible to use a DataGridView and get the same look by cell painting it.
Note that none of the solutions lends itself well to databinding as you have too many data to bind per item/cell!

In Windows Forms. (That it looks like what you are using.) You can drop a DataGridView on a form and change the ColumnType in the GridView designer to DataGridViewCheckBoxColumn. This will give you the Functionality that you are looking for.
In other words, if you dont mind the look, (But need the same functionality) you could use a Checkbox in your grid.
When you have the correct functionality : You can use the above answer from Gnqz, to get the Look of the button.

Make selected DataGridView Cell content larger

I have a datagridview which is coding in c#.net
My requirement is, if I select any DataGridView cell the cell content should be visible larger as a popup, or I want to view the datagridview cell larger or fitted one when move my cursor to particular cell.

For text and numerics this may do what you need:
private void dataGridView1_CellPainting(object sender,
DataGridViewCellPaintingEventArgs e)
{
if (e.RowIndex < 0 | e.ColumnIndex < 0) return;
if (dataGridView1.Rows[e.RowIndex].Cells[e.ColumnIndex].Selected)
{
e.Graphics.FillRectangle(SystemBrushes.Highlight, e.CellBounds);
e.Graphics.DrawString(e.Value.ToString(), new Font(e.CellStyle.Font.FontFamily,
e.CellStyle.Font.Size * 1.5f), SystemBrushes.HighlightText, e.CellBounds.Location);
e.Handled = true;
}
}
You may need to use e.FormattedValue instead of e.Value if you are using formats
You may also need to insert a test of the cell value's type..
This code this will enlarge the font by 50% while not in edit mode.
For images a different solution would be necessary - probably a popup Label or Panel; but that really depends on just what you want and what kind of images they are.. Icons I would leave alone, photos of users would profit from the enlarged display.
Of course, if the enlarged content doesn't actually fit in the Cell the popup solution would also be called for..
Upadate
Here is an extension which tests the Column Value/FormattedValue and for a Bitmap displays the Image in a popup Label:
Label imageLabel;
bool labelHide = false; //*** new
void showImageLabel(DataGridViewCellPaintingEventArgs e)
{
if (labelHide) return; //*** new
if (imageLabel == null) imageLabel = new Label();
imageLabel.Click += (sender, evt) =>
{ ((Label)sender).Hide(); labelHide = true; }; //*** new
imageLabel.Text = "";
imageLabel.Parent = dataGridView1;
imageLabel.Location = e.CellBounds.Location;
if (imageLabel.Image != null) imageLabel.Image.Dispose();
//Size size = ((Bitmap)e.Value).Size; //*** old
Size size = ((Bitmap)e.FormattedValue).Size; //*** new
Size newSize = new Size( (int)(size.Width * 1.5f), (int)(size.Height * 1.5f));
//Bitmap bmp = new Bitmap((Bitmap)e.Value, newSize); //*** old
Bitmap bmp = new Bitmap((Bitmap)e.FormattedValue, newSize); //*** new
imageLabel.Size = newSize;
imageLabel.Image = bmp;
imageLabel.Show();
}
private void dataGridView1_CellPainting(object sender,
DataGridViewCellPaintingEventArgs e)
{
if (e.RowIndex < 0 | e.ColumnIndex < 0) return;
if (e.Value == null) { if (imageLabel != null) imageLabel.Hide(); return; }
if (dataGridView1.Rows[e.RowIndex].Cells[e.ColumnIndex].Selected)
{
//if (e.Value.GetType() == typeof(Bitmap)) //*** old
if (e.FormattedValue.GetType() == typeof(Bitmap)) //*** new
{
showImageLabel(e);
e.Handled = true; //*** old
if (labelHide) labelHide = false; else e.Handled = true; //*** new
return;
}
else if (imageLabel != null) imageLabel.Hide();
e.Graphics.FillRectangle(SystemBrushes.Highlight, e.CellBounds);
e.Graphics.DrawString(e.FormattedValue.ToString(),
new Font(e.CellStyle.Font.FontFamily, e.CellStyle.Font.Size * 1.5f),
SystemBrushes.HighlightText, e.CellBounds.Location);
e.Handled = true;
}
}
private void dataGridView1_RowLeave(object sender, DataGridViewCellEventArgs e)
{
if (imageLabel != null) imageLabel.Hide();
}
You may want to adapt the Location to be e.g. centered..
Update 2
I have now adapted the code to the case of retrieving Images directly as byte[] from a Database. In this case the Type of the Value Property is not Image. Instead one simlpy needs to check the FormattedValue.
If the displayed, resized Image is too large, it may cover the whole Cell and the Cell_Painting event won't get triggered. Therefore I have also added an one-liner for the RowLeave event to prevent that.
I have also added a few lines to allow the image to be clicked away.
Please change the lines I marked with //*** , add the event and check if it now works for you!
Here are two Screenshots:

problems updating picture box control

I have two controls on the same form. Both controls contain an ObjectListView control. The one listview was created with the graphical editor in visual studio. This one is not causing any issues. The other listview is created programmatically at run-time. I have defined an event handler for each control that gets called when the hot item changes and they are both firing when they should. Both event handlers call the same code to update a picturebox control. The problem is that the picturebox does not get updated when the programmatically defined listview is asking it to. I am positive the event handler is getting called because my code writes to a text file as well as updating the picture box. The text file gets updated but the picture box does not. I have tried updating, invalidating, and refreshing the PicutureBox as well as the parent form, but I just can not get it to update.
I am not sure if this is an ObjectListView issue or a standard WinForms problem. I realize my question is very vague but I am not sure how to clarify it without posting all my code. Any advice would be appreciated.
Here is the code that the event handler calls:
public void ShowBitmap(object sender, HotItemChangedEventArgs e, ObjectListView lv, string type)
{
ObjectListView olv = sender as ObjectListView;
if (sender == null)
{
return;
}
switch (e.HotCellHitLocation)
{
case HitTestLocation.Nothing:
break;
case HitTestLocation.Group:
break;
case HitTestLocation.GroupExpander:
break;
default:
if (e.HotColumnIndex == 0)
{
pictureBox1.Hide();
pictureBox1.BorderStyle = BorderStyle.FixedSingle;
int rowIndex = e.HotRowIndex;
string text = "";
if (type == "Main Parts")
{
TypedObjectListView<MainRadanProjectPartsPart> tlist = new TypedObjectListView<MainRadanProjectPartsPart>(lv);
text = tlist.Objects[rowIndex].Symbol;
}
else if (type == "Parts")
{
TypedObjectListView<RadanProjectPartsPart> tlist = new TypedObjectListView<RadanProjectPartsPart>(lv);
text = tlist.Objects[rowIndex].Symbol;
}
else if (type == "Nests")
{
TypedObjectListView<MainRadanProjectNestsNest> tlist = new TypedObjectListView<MainRadanProjectNestsNest>(lv);
text = tlist.Objects[rowIndex].FileName;
}
if (text != null)
{
Point screenCoords = Cursor.Position;
Point controlRelatedCoords = lv.PointToClient(screenCoords);
if (controlRelatedCoords.Y < oldCursorPosition.Y)
{
pictureBox1.Location = controlRelatedCoords;
int xPos = controlRelatedCoords.X;
int yPos = controlRelatedCoords.Y + 60;
pictureBox1.Location = new Point(xPos, yPos);
}
else if (controlRelatedCoords.Y > oldCursorPosition.Y)
{
pictureBox1.Location = controlRelatedCoords;
int xPos = controlRelatedCoords.X;
//int yPos = controlRelatedCoords.Y - pictureBox1.Height;
int yPos = controlRelatedCoords.Y - pictureBox1.Height + 30;
pictureBox1.Location = new Point(xPos, yPos);
}
pictureBox1.Show();
pictureBox1.BringToFront();
olvTreeViewMainParts.Focus();
lv.Focus();
pictureBox1.Visible = true;
DrawSymbol(text);
oldCursorPosition = controlRelatedCoords; // save the cursor position to track cursor direction between calls
}
else
{
DrawSymbol("");
}
}
else
{
pictureBox1.Hide();
}
break;
}
}
Here is the event handler for the programmaticaly defined listview:
// track the cursor as it moves over the items in the listview
private void olvPartsListView_HotItemChanged(object sender, HotItemChangedEventArgs e)
{
ShowBitmap(sender, e, olvPartsListView, "Parts");
}

Vertical text in datagridview

I want to show the text in the header cells in vertical orientation. How can I do it?
Thanks

You can achieve the result you want using custom cell painting for the header.
In answer to your comment asking for a way to align the text with the bottom of the cell, I've added comments to my code. They are hopefully clear.
You need the following code (say in the Form_Load after initializing components)
dataGridView1.ColumnHeadersHeightSizeMode = DataGridViewColumnHeadersHeightSizeMode.EnableResizing;
dataGridView1.ColumnHeadersHeight = 50;
dataGridView1.AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.AllCellsExceptHeader;
// Here we attach an event handler to the cell painting event
dataGridView1.CellPainting += new DataGridViewCellPaintingEventHandler(dataGridView1_CellPainting);
Next you need something like the following code:
void dataGridView1_CellPainting(object sender, DataGridViewCellPaintingEventArgs e)
{
// check that we are in a header cell!
if (e.RowIndex == -1 && e.ColumnIndex >= 0)
{
e.PaintBackground(e.ClipBounds, true);
Rectangle rect = this.dataGridView1.GetColumnDisplayRectangle(e.ColumnIndex, true);
Size titleSize = TextRenderer.MeasureText(e.Value.ToString(), e.CellStyle.Font);
if (this.dataGridView1.ColumnHeadersHeight < titleSize.Width)
{
this.dataGridView1.ColumnHeadersHeight = titleSize.Width;
}
e.Graphics.TranslateTransform(0, titleSize.Width);
e.Graphics.RotateTransform(-90.0F);
// This is the key line for bottom alignment - we adjust the PointF based on the
// ColumnHeadersHeight minus the current text width. ColumnHeadersHeight is the
// maximum of all the columns since we paint cells twice - though this fact
// may not be true in all usages!
e.Graphics.DrawString(e.Value.ToString(), this.Font, Brushes.Black, new PointF(rect.Y - (dataGridView1.ColumnHeadersHeight - titleSize.Width) , rect.X));
// The old line for comparison
//e.Graphics.DrawString(e.Value.ToString(), this.Font, Brushes.Black, new PointF(rect.Y, rect.X));
e.Graphics.RotateTransform(90.0F);
e.Graphics.TranslateTransform(0, -titleSize.Width);
e.Handled = true;
}
}

A simpler and more effective renderer
Attach event either through designer, or with this line of code
dataGridView1.CellPainting += new DataGridView1_CellPainting(dataGridView1_CellPainting);
Event handler to draw rotated text
private void DataGridView1_CellPainting(object sender, DataGridViewCellPaintingEventArgs e) {
// Vertical text from column 0, or adjust below, if first column(s) to be skipped
if (e.RowIndex == -1 && e.ColumnIndex >= 0) {
e.PaintBackground(e.CellBounds, true);
e.Graphics.TranslateTransform(e.CellBounds.Left , e.CellBounds.Bottom);
e.Graphics.RotateTransform(270);
e.Graphics.DrawString(e.FormattedValue.ToString(),e.CellStyle.Font,Brushes.Black,5,5);
e.Graphics.ResetTransform();
e.Handled = true;
}
}

DataGrid d = new DataGrid();
d.Columns[0].HeaderStyle.VerticalAlign = VerticalAlign.Bottom;
If you are looking for gridview then you case like this :-
GridView gv = new GridView ();
gv.Columns[0].ItemStyle.VerticalAlign = VerticalAlign.Bottom;
If you are looking for datagridview then you case like this :-
Create an object of datagridview.
gv.Columns["ColumnName"].HeaderCell.Style.Alignment = DataGridViewContentAlignment.BottomCenter;

void dataGridView1_CellPainting(object sender, DataGridViewCellPaintingEventArgs e)
{
if (e.RowIndex == -1 && e.ColumnIndex >= 0)
{
e.PaintBackground(e.ClipBounds, true);
Rectangle rect =
this.dataGridView1.GetColumnDisplayRectangle(e.ColumnIndex, true);
Size titleSize =
TextRenderer.MeasureText(e.Value.ToString(), e.CellStyle.Font);
if (this.dataGridView1.ColumnHeadersHeight <
titleSize.Width)
this.dataGridView1.ColumnHeadersHeight =
titleSize.Width;
e.Graphics.TranslateTransform(0, titleSize.Width);
e.Graphics.RotateTransform(-90.0F);
e.Graphics.DrawString(e.Value.ToString(), this.Font,
Brushes.Orange, new PointF(rect.Y, rect.X));
e.Graphics.RotateTransform(90.0F);
e.Graphics.TranslateTransform(0, -titleSize.Width);
e.Handled = true;
}
}
In addition, you could set the AutoSizeColumnsMode property of the
DataGridView to AllCellsExceptHeader in order to make the DataGridView
compact.