I try to draw an image from a image list in a ComboBox when the item is selected.
I am able to draw the image, but when the onSelctedIndexChanged event finish, I lost my image.
My ComboBox already have the DrawMode.OwnerDrawFixed.
I have a ListImage control named ImageList with 10 pictures.
For my short example I just need to draw in my ComboBox the image at position 1 of my ImageList, it's the reason why I get this.ImageList.Draw(g, 0, 0, **1**);
protected override void OnSelectedIndexChanged(EventArgs e)
{
base.OnSelectedIndexChanged(e);
if (this.SelectedIndex > -1)
{
var g = this.CreateGraphics();
this.ImageList.Draw(g, 0, 0, 1);
}
}
Probably I am not subscribing to the right event. Any suggestion?
See the picture below with a breakpoint in SelectedIndexChanged after the image is drawn. It works, but I lose my image after the event.
Change your ComboBox DrawMode to OwnerDrawVariable.
Use the DrawItem event to draw the images from your source (an ImageList, in this case) inside the ComboBox item Bounds.
If the ComboBox DropDownStyle is set to DropDownList, the image will be shown in the selection box; if it's set to DropDown, only the text will be drawn.
Here, the Focus rectangle is only drawn when the mouse point hovers the ListControl's items, while it's not used when an item is selected, which is determined by:
(e.State.HasFlag(DrawItemState.Focus) && !e.State.HasFlag(DrawItemState.ComboBoxEdit)).
private void comboBox1_DrawItem(object sender, DrawItemEventArgs e)
{
if (e.Index < 0) return;
var cbo = sender as ComboBox;
Color foreColor = e.ForeColor;
if (e.State.HasFlag(DrawItemState.Selected) && !(e.State.HasFlag(DrawItemState.ComboBoxEdit))) {
e.DrawBackground();
e.DrawFocusRectangle(); // <= could be removed for a cleaner rendering
}
else {
using (var brush = new SolidBrush(cbo.BackColor)) {
var rect = e.Bounds;
rect.Inflate(1, 1);
e.Graphics.FillRectangle(brush, rect);
}
foreColor = cbo.ForeColor;
}
TextRenderer.DrawText(e.Graphics, cbo.GetItemText(cbo.Items[e.Index]), e.Font,
new Point(e.Bounds.Height + 10, e.Bounds.Y), foreColor);
e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
e.Graphics.DrawImage(imageList1.Images[e.Index],
new Rectangle(e.Bounds.Location,
new Size(e.Bounds.Height - 2, e.Bounds.Height - 2)));
}
The Magic Numbers here (10, -2) are just offsets:
e.Bounds.Height + 10 => 10 pixels to the right of the image.
e.Bounds.Height -2 => 2 pixels less than the item.Bounds.Height.
Related
The code below works perfectly to draw text items in my listbox (articlesLB) to a certain color based on some conditions. But when the text is longer than the size of the listbox, the horizontal scrollbar fails to show. I've implemented the MeasureItemEventHandler and DrawItemEventHandler. Can any one see why this is not working?
articlesLB.DrawMode = DrawMode.OwnerDrawFixed;
articlesLB.MeasureItem += new MeasureItemEventHandler(articlesLB_MeasureItem);
articlesLB.DrawItem += new DrawItemEventHandler(articlesLB_SetColor);
private void articlesLB_MeasureItem(object sender, MeasureItemEventArgs e)
{
int textwidth = TextRenderer.MeasureText(articlesLB.Items[e.Index].ToString(), articlesLB.Font).Width;
articlesLB.HorizontalExtent = textwidth;
}
private void articlesLB_SetColor(object sender, DrawItemEventArgs e)
{
if (e.Index < 0) return;
//if the item state is selected them change the back color
if ((e.State & DrawItemState.Selected) == DrawItemState.Selected)
e = new DrawItemEventArgs(e.Graphics,
e.Font,
e.Bounds,
e.Index,
e.State ^ DrawItemState.Selected,
e.ForeColor,
Color.Yellow); //Choose the color
// Draw the background of the ListBox control for each item.
e.DrawBackground();
Brush myBrush = Brushes.Black;
// check some boolean flags to see if either is checked
if (EditAOSideRB.Checked == true || EditAPinSideRB.Checked == true)
{
string articleTitle = ((ListBox)sender).Items[e.Index].ToString();
if (articleTitle.Contains("* ") == true)
{
// set the brush to green
myBrush = Brushes.DarkGreen;
}
else
{
// set the brush to red
myBrush = Brushes.Red;
}
}
// Draw the current item text
e.Graphics.DrawString(articlesLB.Items[e.Index].ToString(), e.Font, myBrush, e.Bounds, StringFormat.GenericDefault);
// If the ListBox has focus, draw a focus rectangle around the selected item.
e.DrawFocusRectangle();
}
You should set DrawMode to OwnerDrawVariable.
According to MSDN for ListBox.DrawMode:
This event is used by an owner-drawn ListBox. The event is only raised
when the DrawMode property is set to DrawMode.OwnerDrawFixed or
DrawMode.OwnerDrawVariable. You can use this event to perform the
tasks needed to draw items in the ListBox. If you have a
variable-sized item (when the DrawMode property is set to
DrawMode.OwnerDrawVariable), before drawing an item, the MeasureItem
event is raised. You can create an event handler for the MeasureItem
event to specify the size for the item that you are going to draw in
your event handler for the DrawItem event.
I am begin to study in Wpf, I want to use slider but I want to custom the slider control like image below:
The value of slider will be some of column with height increase like chart, and default column background color is black. When User drag and move from left to right, the column background of left side will be green color and opposite, the color will be black again. Please let me know if my question is not clear.
I found the solution by myself. I have two image stack up together, green background image is at bottom and black background image is at top. I have two event: MouseMove and MouseDown on image will get the position of mouse and set the opacity mask of top image. Opacity mask will set a part of image to transparent background. Of course, the bottom image will be display. See code below .
private void imgMusicBlack_MouseDown(object sender, MouseButtonEventArgs e)
{
var img = sender as Image;
SetOpacityMask(img, e.GetPosition(img).X);
}
private void imgMusicBlack_PreviewMouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Pressed)
{
var img = sender as Image;
SetOpacityMask(img, e.GetPosition(img).X);
}
}
private void SetOpacityMask(Image img, double pointX, double offset = -1)
{
if (offset == -1)
offset = Math.Round(pointX / img.ActualWidth, 2);
LinearGradientBrush linear = new LinearGradientBrush();
linear.StartPoint = new Point(0, 0.5);
linear.EndPoint = new Point(1, 0.5);
linear.GradientStops = new GradientStopCollection();
linear.GradientStops.Add(new GradientStop(Colors.Transparent, offset));
linear.GradientStops.Add(new GradientStop(Colors.Black, offset));
img.OpacityMask = linear;
}
I am using a ComboBox in Text and DropDown mode (the default) and I want to have an ItemHeight of X (e.g. 40) but have the ComboBox's Height set to Y (e.g. 20).
The reason for this is that I am intending to use the ComboBox for a Quick Search feature in which the user keys in text and detailed results are rendered in the list items. Only one line of input is required.
Unfortunately, Winforms automatically locks the ComboBox's Height to the ItemHeight and I can see no way to change this.
How can I make the ComboBox's Height differ to the ItemHeight?
What you have to do is, first of all, change DrawMode from Normal to OwnerDrawVariable. Then you've got to handle 2 events: DrawItem and MeasureItem . They would be something like:
private void comboBox1_MeasureItem(object sender, MeasureItemEventArgs e)
{
e.ItemHeight = 40; //Change this to your desired item height
}
private void comboBox1_DrawItem(object sender, DrawItemEventArgs e)
{
ComboBox box = sender as ComboBox;
if (Object.ReferenceEquals(null, box))
return;
e.DrawBackground();
if (e.Index >= 0)
{
Graphics g = e.Graphics;
using (Brush brush = ((e.State & DrawItemState.Selected) == DrawItemState.Selected)
? new SolidBrush(SystemColors.Highlight)
: new SolidBrush(e.BackColor))
{
using (Brush textBrush = new SolidBrush(e.ForeColor))
{
g.FillRectangle(brush, e.Bounds);
g.DrawString(box.Items[e.Index].ToString(),
e.Font,
textBrush,
e.Bounds,
StringFormat.GenericDefault);
}
}
}
e.DrawFocusRectangle();
}
I am using MenuItem.DrawItem to change MenuItem's appearance based on the fact whether user either hovers or select it. Unfortunatelly the hitbox seems too small. Here's my drawing code.
private void DrawCustomMenuItem(object sender,
DrawItemEventArgs e)
{
MenuItem customItem = (MenuItem) sender;
System.Drawing.Brush aBrush = System.Drawing.Brushes.DarkMagenta;
Font aFont = new Font("Arial", 10,
FontStyle.Italic, GraphicsUnit.Point);
SizeF stringSize = e.Graphics.MeasureString(
customItem.Text, aFont);
Pen p = new Pen(Color.Aqua, 2);
if ((e.State & DrawItemState.HotLight) == DrawItemState.HotLight
|| (e.State & DrawItemState.Selected) == DrawItemState.Selected)
p = new Pen(Color.Black, 2);
e.Graphics.DrawString(customItem.Text, aFont,
aBrush, e.Bounds.X, e.Bounds.Y);
e.Graphics.DrawEllipse(p,
new Rectangle(e.Bounds.X, e.Bounds.Y,
(int) stringSize.Width,
(int) stringSize.Height));
}
It only changes color when mouse is nearby left edge of the item. It isn't surprising I guess. I have no code that changes hitbox's dimensions and it is using the default one and I am drawing outside of it. I really have no idea how to approach it. I thought I should use MenuItem.Size to achieve that. But this property doesn't exist.
EDIT:
Ok, I got it. It's all about MeasureItem event. But another problem came up. The MeasureItemEventArgs.Graphics.MeasureString() seems to return too big width for the text. Here are my current functions:
private void Mitem2OnMeasureItem(object sender, MeasureItemEventArgs e)
{
MenuItem item = sender as MenuItem;
if (item == null) return;
var size = e.Graphics.MeasureString(item.Text, f);
e.ItemHeight = (int) size.Height;
e.ItemWidth = (int) size.Width;
}
private void Mitem2OnDrawItem(object sender, DrawItemEventArgs e)
{
MenuItem item = sender as MenuItem;
if (item == null) return;
SizeF size = e.Graphics.MeasureString(item.Text, f);
e.Graphics.FillRectangle(
(e.State & DrawItemState.HotLight) == DrawItemState.HotLight ? Brushes.CornflowerBlue : Brushes.Aqua,
e.Bounds);
e.Graphics.DrawString(item.Text, f, Brushes.Black, e.Bounds.X, e.Bounds.Y);
e.DrawFocusRectangle();
}
This is how it looks like
To get a better measurement use the overload of MeasureString that takes StringFormat class:
e.Graphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;
var size = e.Graphics.MeasureString(
item.Text,
aFont,
new Point(1,1),
StringFormat.GenericTypographic
);
Notice the use of the TextRenderingHint with a value of AntiAlias that is set on the Graphics object.
You'll still have a slightly bigger bounding box but in my test the box is 5 pixels less wide with this code instead of your code.
I am making an owner drawn listview, in which I am drawing shapes inside of a listview.
I have done this using Listview_DrawItem event.
My problem is that when I run the application, I can't select the shapes drawn in the listview.
private void AddItem(ListView lvw, string Shape_name, Color Shape_color)
{
// Make the item.
ListViewItem item = new ListViewItem(Shape_name);
// Save the Shape object in the Tag property.
Shapes myShape = new Shapes(Shape_name,Shape_color);
item.Tag = myShape;
item.SubItems[0].Name ="ShapeName";
// Add subitems so they can draw.
item.SubItems.Add("ShapeColor");
// Add the item to the ListView.
lvw.Items.Add(item);
}
// Draw the item. In this case, the Shape_name's logo.
private void lvwServers_DrawItem(object sender, DrawListViewItemEventArgs e)
{
// Get the ListView item and the Shapes object.
ListViewItem item = e.Item;
Shapes myShape = item.Tag as Shapes;
// Clear.
e.DrawBackground();
// Smoothing mode for blur free drawing
e.Graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
Rectangle rect = new Rectangle(e.Bounds.Left + 10, e.Bounds.Top + 10, 41, 41);
using (SolidBrush br = new SolidBrush(myShape.ShapeColor))
{
e.Graphics.FillRectangle(br, rect);
}
e.Graphics.DrawRectangle(Pens.Black, rect);
e.Graphics.ResetTransform();
e.DrawFocusRectangle();
Also, I can't change values of e.bound property.
You can base the drawing code in your DrawItem event handler on the value of e.State which is available in the DrawListViewItemEventArgs parameter.
bool isSelected = e.State == ListViewItemStates.Selected;
That way you can decide which elements of the drawn item you wish to change when an item is selected.