I already made a rounded button and now im trying to create a rounded textbox. I searched some questions but all is in VB and I don't know that language. And converters are weird. So I tried creating a rounded textbox. So I set the UserPaint to true so I can use OnPaint. It works beautifully on my buttons but it glitches out on my textboxes. It has 2 issues:
The font size is always the same size no matter what I set it to.
And when onpaint is called but the text doesn't change it deletes it. That is mostly when I hover my mouse over it.
Code:
class RoundedTextBox : TextBox
{
public Color color = Color.White;
public int borderRadius = 25;
public RoundedTextBox()
{
SetStyle(ControlStyles.UserPaint, true);
}
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
e.Graphics.SmoothingMode = SmoothingMode.HighQuality;
e.Graphics.TextRenderingHint = TextRenderingHint.AntiAlias;
RectangleF Rect = new RectangleF(0, 0, this.Width, this.Height);
SolidBrush brush = new SolidBrush(color);
GraphicsPath GraphPath = Functions.FillRoundedRectangle(e.Graphics, brush, Rect, borderRadius);
this.Region = new Region(GraphPath);
}
}
How I add my textbox:
RoundedTextBox usernameTextbox = new RoundedTextBox();
usernameTextbox.Location = new Point(14, 217);
usernameTextbox.Font = new Font(usernameTextbox.Font.FontFamily, 20);
usernameTextbox.Size = new Size(282, this.Height);
usernameTextbox.color = Color.White;
usernameTextbox.Name = "usernameTextbox";
usernameTextbox.Text = "test";
textboxes.Add(usernameTextbox);
usernameTextbox.BackColor = Color.White;
usernameTextbox.borderRadius = 20;
this.Controls.Add(usernameTextbox);
Gif of the problem
Related
I need to add WedgeRectCallout callout on picturebox using C#.
Is there a way to do it?
please refer image using below link to know about the callout.
In word document, I can do the same using Spire.Doc library and writing below code:
ShapeObject Shape1 = para1.AppendShape(30, 50, ShapeType.WedgeRectCallout);
Here is a minimal example. It creates a Panel subclass with a nested TextBox.
Note that you can't add controls to a PictureBox in the designer. Instead you can put it on top and use the Nest function to embed it in the PBox..
(I use a trick to simplify the drawing of the border: since shrinking a GraphicsPath is hard and I am too lazy to write out two of them, I draw the border twice and add a little offset. The effect is a shadow effect, which looks rather nice for a cheat..)
Here is the class in action:
And here is the class code:
class WedgeCallout : Panel
{
public WedgeCallout()
{
tb = new TextBox();
Controls.Add(tb);
}
TextBox tb = null;
GraphicsPath gp = new GraphicsPath();
protected override void OnLayout(LayoutEventArgs levent)
{
tb.Size = new Size(Width - 10, (int)(Height * 0.66));
tb.Location = new Point(5, 5);
tb.BackColor = BackColor;
tb.ForeColor = ForeColor ;
tb.BorderStyle = BorderStyle.None;
tb.Text = "Hiho";
tb.Multiline = true;
tb.TextAlign = HorizontalAlignment.Center;
tb.Font = Font;
SetRegion();
base.OnLayout(levent);
}
protected override void OnBackColorChanged(EventArgs e)
{
base.OnBackColorChanged(e);
if (BackColor != Color.Transparent)
tb.BackColor = BackColor;
}
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
if (Tag == null) return;
e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
using(SolidBrush brush = new SolidBrush(tb.BackColor))
e.Graphics.FillPath(brush, (GraphicsPath)Tag);
using (Pen pen = new Pen(Color.DarkGray, 2f))
e.Graphics.DrawPath(pen, (GraphicsPath)Tag);
e.Graphics.TranslateTransform(-1, -1);
using (Pen pen = new Pen(ForeColor, 2f))
e.Graphics.DrawPath(pen, (GraphicsPath)Tag);
}
void SetRegion()
{
Rectangle r = ClientRectangle;
int h = (int)(r.Height * 0.75f);
if (gp != null) gp.Dispose();
gp = new GraphicsPath();
gp.AddPolygon(new PointF[]{ new Point(0,0),
new Point(r.Width-1, 0), new Point(r.Width-1, h),
new PointF(50, h) , new Point(0, r.Height-1),
new PointF(20, h), new PointF(0, h)});
Region = new Region(gp);
Tag = gp;
}
}
You can set the colors and the Font in the designer..
And the Nest function:
void Nest(Control child, Control parent)
{
Point p0 = parent.PointToScreen(Point.Empty);
Point p1 = child.PointToScreen(Point.Empty);
child.Location = new Point(p1.X - p0.X, p1.Y - p0.Y);
child.Parent = parent;
}
It is called from the Form where the controls sit: Nest(wedgeCallout1, pictureBox1);
Note that to save to callout with the pbox in one image you need to
Nest the callout in the PBox
Use pbox.DrawToBitmap
Temporarily set the backcolor to transparent
Example:
private void saveBtn_Click(object sender, EventArgs e)
{
Size sz = pictureBox1.ClientSize;
using (Bitmap bmp = new Bitmap(sz.Width, sz.Height))
{
Color old = wedgeCallout1.BackColor;
wedgeCallout1.BackColor = Color.Transparent;
pictureBox1.DrawToBitmap(bmp, pictureBox1.ClientRectangle);
bmp.Save(filename, ImageFormat.Png);
wedgeCallout1.BackColor = old;
}
}
I want to override default look of CheckedListBox as below:
Please Note the increased size of checkbox and colored tick mark.
For this you need to create own custom control by inheriting CheckedListbox and need to override OnDrawItem(DrawItemEventArgs e) event
Below is the Code :
class BigCheckedListBox : CheckedListBox
{
public BigCheckedListBox()
{
ForeColor = Color.Turquoise;
Font = new Font("Segoe UI", 12f);
}
protected override void OnDrawItem(DrawItemEventArgs e)
{
e.DrawBackground();
var b = e.Bounds;
var state = GetItemChecked(e.Index) ? CheckBoxState.CheckedNormal : CheckBoxState.UncheckedNormal;
Size glyphSize = CheckBoxRenderer.GetGlyphSize(e.Graphics, state);
int checkPad = (b.Height - glyphSize.Height) / 2;
var pt = new Point(b.X + checkPad, b.Y + checkPad);
Rectangle rect = new Rectangle(pt, new Size(20, 20));
e.Graphics.DrawRectangle(Pens.Green, rect);//This is for Checkbox rectangle
//This is for drawing string text
using (SolidBrush brush = new SolidBrush(ForeColor))
e.Graphics.DrawString(this.Items[e.Index].ToString(), Font, brush, pt.X + 27f, pt.Y);
if (state == CheckBoxState.CheckedNormal)
{
using (SolidBrush brush = new SolidBrush(ForeColor))
using (Font wing = new Font("Wingdings", 17f, FontStyle.Bold))
e.Graphics.DrawString("ü", wing, brush, pt.X-4, pt.Y-1); //This is For tick mark
}
}
}
Hope this will serve the purpose.
This question already has answers here:
how to change the check image on a checkbox
(5 answers)
Closed 2 years ago.
I want to change the border color and the background of the square and the color of the check mark, but not the text. To better understand, what I want to accomplish is the following example:
checkBox1.Checked = false
checkBox1.Checked = true
Thanks so much to everyone of you responds exactly to this request!
You can simply draw the checkmark in the Paint event:
private void checkBox1_Paint(object sender, PaintEventArgs e)
{
Point pt = new Point(e.ClipRectangle.Left + 2, e.ClipRectangle.Top + 4);
Rectangle rect = new Rectangle(pt, new Size(22, 22));
if (checkBox1.Checked)
{
using (Font wing = new Font("Wingdings", 14f))
e.Graphics.DrawString("ü", wing, Brushes.DarkOrange,rect);
}
e.Graphics.DrawRectangle(Pens.DarkSlateBlue, rect);
}
for this to work you need to:
set Apperance = Appearance.Button
set FlatStyle = FlatStyle.Flat
set TextAlign = ContentAlignment.MiddleRight
set FlatAppearance.BorderSize = 0
set AutoSize = false
If you want to re-use this it will be best to subclass the checkbox and override the OnPaint event there. Here is an example:
public ColorCheckBox()
{
Appearance = System.Windows.Forms.Appearance.Button;
FlatStyle = System.Windows.Forms.FlatStyle.Flat;
TextAlign = ContentAlignment.MiddleRight;
FlatAppearance.BorderSize = 0;
AutoSize = false;
Height = 16;
}
protected override void OnPaint(PaintEventArgs pevent)
{
//base.OnPaint(pevent);
pevent.Graphics.Clear(BackColor);
using (SolidBrush brush = new SolidBrush(ForeColor))
pevent.Graphics.DrawString(Text, Font, brush, 27, 4);
Point pt = new Point( 4 , 4);
Rectangle rect = new Rectangle(pt, new Size(16, 16));
pevent.Graphics.FillRectangle(Brushes.Beige, rect);
if (Checked)
{
using (SolidBrush brush = new SolidBrush(ccol))
using (Font wing = new Font("Wingdings", 12f))
pevent.Graphics.DrawString("ü", wing, brush, 1,2);
}
pevent.Graphics.DrawRectangle(Pens.DarkSlateBlue, rect);
Rectangle fRect = ClientRectangle;
if (Focused)
{
fRect.Inflate(-1, -1);
using (Pen pen = new Pen(Brushes.Gray) { DashStyle = DashStyle.Dot })
pevent.Graphics.DrawRectangle(pen, fRect);
}
}
You may need to tweek the sizes of the control and the font.. And if you want to you expand the code to honor the TextAlign and the CheckAlign properties.
And if you need a three-state control you can adapt the code to display a third state appearance, especially if you think of one that looks better than the original..
You have to write your own checkbox. By making a custom control in which there's a blue square(possibly inherits from Button) that toggles between checked and not checked images by an OnClick event and place a label next to it.
I have a ToolStripContainer on a winform. I want to set the BackColor of its ContentPanel to custom gradient color.
How can I set it?
You can create a simple class that inherits from ToolStripContainer and set up BackgroundImage (or anything else) in the its constructor. For example:
class MyToolStripContainer : System.Windows.Forms.ToolStripContainer
{
public MyToolStripContainer()
{
var rect = new Rectangle(0, 0, 300, 300);
using (Bitmap bitmap = new Bitmap(rect.Height, rect.Width))
using (Graphics graphics = Graphics.FromImage(bitmap))
using (LinearGradientBrush brush = new LinearGradientBrush(
rect,
Color.Blue,
Color.Red,
LinearGradientMode.ForwardDiagonal))
{
brush.SetSigmaBellShape(0.5f);
graphics.FillRectangle(brush, rect);
ContentPanel.BackgroundImage = Image.FromHbitmap(bitmap.GetHbitmap());
}
ContentPanel.BackgroundImageLayout = System.Windows.Forms.ImageLayout.Stretch;
}
}
Not only ToolStripContentPanel, no winform controls supports "Gradient colors" out of the box, but they provide a way to custom painting. That's how we can accomplish the gradient look and feel in winforms.
toolStripContainer1.ContentPanel.Paint += ContentPanel_Paint;//Triggering up the paint event
public void ContentPanel_Paint(object sender, PaintEventArgs e)
{
ToolStripContentPanel panel = (ToolStripContentPanel)sender;
using (var brush = new LinearGradientBrush(panel.ClientRectangle, Color.Gray, Color.Red, 90))
{
e.Graphics.FillRectangle(brush, panel.ClientRectangle);
}
}
I applied the solution provided by an user to solve the problem, but it's happening another problem. Previously I owned an icon along with the text, but after I used the code described here, my icon no longer appears. What can it be?
And how can I use the icon while using a different color other than the default on tab header?
The solution I used is:
private void tabControl1_DrawItem(object sender, System.Windows.Forms.DrawItemEventArgs e)
{
TabPage CurrentTab = tabControl1.TabPages[e.Index];
Rectangle ItemRect = tabControl1.GetTabRect(e.Index);
SolidBrush FillBrush = new SolidBrush(Color.Red);
SolidBrush TextBrush = new SolidBrush(Color.White);
StringFormat sf = new StringFormat();
sf.Alignment = StringAlignment.Center;
sf.LineAlignment = StringAlignment.Center;
//If we are currently painting the Selected TabItem we'll
//change the brush colors and inflate the rectangle.
if (System.Convert.ToBoolean(e.State & DrawItemState.Selected))
{
FillBrush.Color = Color.White;
TextBrush.Color = Color.Red;
ItemRect.Inflate(2, 2);
}
//Set up rotation for left and right aligned tabs
if (tabControl1.Alignment == TabAlignment.Left || tabControl1.Alignment == TabAlignment.Right)
{
float RotateAngle = 90;
if (tabControl1.Alignment == TabAlignment.Left)
RotateAngle = 270;
PointF cp = new PointF(ItemRect.Left + (ItemRect.Width / 2), ItemRect.Top + (ItemRect.Height / 2));
e.Graphics.TranslateTransform(cp.X, cp.Y);
e.Graphics.RotateTransform(RotateAngle);
ItemRect = new Rectangle(-(ItemRect.Height / 2), -(ItemRect.Width / 2), ItemRect.Height, ItemRect.Width);
}
//Next we'll paint the TabItem with our Fill Brush
e.Graphics.FillRectangle(FillBrush, ItemRect);
//Now draw the text.
e.Graphics.DrawString(CurrentTab.Text, e.Font, TextBrush, (RectangleF)ItemRect, sf);
//Reset any Graphics rotation
e.Graphics.ResetTransform();
//Finally, we should Dispose of our brushes.
FillBrush.Dispose();
TextBrush.Dispose();
}
You need to paint the Icon yourself also. An example would be to add something like the following after the painting of the tabs Background in you code (i assume that an image list was used here)
int imageLeftOffset = 4;
Point imagePos = new Point(imageLeftOffset, ItemRect.Top + (ItemRect.Height - tabControl1.ImageList.ImageSize.Height + 1) / 2);
tabControl1.ImageList.Draw(e.Graphics, imagePos, CurrentTab.ImageIndex);
You may need to reajust the drawing of the Text so that text and image aren't overlapping.