The task is a simple concept, just not sure about a simple method to do what I'm asking.
Goal
Have a textbox, label, custom User Control, or some other type of control show multiline text and fade it out half way down (as seen in image below). I would like to have it be transparent (as seen in the image) and be editable of course. I was thinking of something like a custom UserControl : label or something similar. Maybe override the label's OnPaint and draw the form contents (everything behind the control) to emulate transparency. Then draw the text but somehow maybe apply some type of gradient filter to it? I honestly have no clue how I would do it but hoping someone else does.
Thanks!
I worked out a solution and it looks perfect, I'll need to spend more time on it later adding support for text align etc. But for now I ended up coming up with this...
Note: Create a new User Control and add this in the code area. Also
keep in mind to make sure the designer of that new control uses the
same namespace "InfinityLabel". And one last thing, don't forget to set your
new label (InfinityLabel) to BackColor=Transparent.
using System.Drawing;
using System.Windows.Forms;
using System.Drawing.Drawing2D;
namespace InfinityLabel
{
public partial class InfinityLabel : Label
{
public InfinityLabel()
{
InitializeComponent();
}
protected override void OnPaint(PaintEventArgs e)
{
Rectangle rect = new Rectangle(0, 0, Width, Height);
LinearGradientBrush brush =
new LinearGradientBrush(
rect,
Color.FromArgb(255, ForeColor),
Color.FromArgb(60, ForeColor),
90f);
e.Graphics.DrawString(Text, Font, brush, rect);
}
}
}
I am using Visual Studio 2013 to write a Windows Forms C# application. I want to draw game board on Form1_Load and draw pawns on button click. I have written two methods: InitDraw() and Draw(). When both method are in Form1_Load() or button1_Click() it's OK, but if InitDraw() is in Form1_Load() and Draw() is in button1_Click() - it draws only if I press Alt or move windows out of screen and move back to screen. I added Invalidate() but this does not help.
using System;
using System.Drawing;
using System.Windows.Forms;
namespace WindowsFormsApplication1
{
public partial class Form1 : Form
{
Bitmap drawBitmap;
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
InitDraw();
}
private void button1_Click(object sender, EventArgs e)
{
Draw();
}
private void InitDraw()
{
drawBitmap = new Bitmap(500, 500);
pictureBox1.Image = drawBitmap;
}
private void Draw()
{
Graphics g = Graphics.FromImage(pictureBox1.Image);
Pen myPen = new Pen(Color.Black);
g.DrawLine(myPen, 0, 0, 100, 100);
myPen.Dispose();
g.Dispose();
Invalidate();
}
}
}
Nobody's stopping you from drawing wherever you want, the thing to remember is to do it on a bitmap image instead of trying to force it to screen. By this I mean you need to create your own Bitmap object, and any draw functions you call you call them on this.
To actually get this to show on screen, call the Invalidate function on the host control -- not a PictureBox by the way. Something lightweight like a panel will do. And in that control's Paint event simply draw your image.
You were sort of close, but you calling Invalidate on the form, besides the fact that it's horribly inefficient to redraw everything when you know exactly what needs to be redrawn, simply won't do anything. You don't rely on the Paint event, but on the intrinsic binding a PictureBox has with a Bitmap -- Bitmap who's handle you never change. As far as the PictureBox is concerned, everything is the same so it won't actually paint itself again. When you actually force it to paint itself by dragging the window outside the screen bounds and then back in it will read the bitmap and draw what you expect.
You must draw in the Paint event of the picture box. Windows might trigger the Paint event at any moment, e.g. if a window in front of it is removed or the form containing the picturebox is moved.
What you draw on the screen is volatile; therefore, let Windows decide when to (re-)draw. You can also trigger redrawing with
picturebox1.Invalidate();
or
picturebox1.Refresh();
Difference: Invalidate waits until the window is idle. Refresh draws immediately.
If you only draw in Form_Load or Button_Click, your drawing might get lost, when windows triggers a paint on its own. Try calling picturebox1.Invalidate in these events instead.
I'm attempting to draw a think underline underneith my header about 10-15 px thick. I've tried adding a picture box and then drawing to that, but it's not being drawn to the screen. Is there a better way to do this, or a way to make my method work?
Thanks!
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace WindowsFormsApplication1
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
Graphics g = pictureBox1.CreateGraphics();
Pen selPen = new Pen(Color.Black);
g.DrawRectangle(selPen, 0, 0, 700, 15);
g.Dispose();
}
}
}
The reason your code doesn't work is because you cannon draw in from 1 load event. Place your code into another event or in a button and it will work fine.
Don't use CreateGraphics() as it is a temporary surface that gets erased when the form refreshes.
Instead, handle the Paint() event of your Form/Control and use the supplied e.Graphics to draw with.
A common trick for having thick lines in WinForms is to create a Label with BorderStyle set to FixedSingle (you can experiment with other borders) and Height = 1 (Width as appropriate). You can draw all this in the designer, or try to use some other "degenerate" controls - Panel with appropriate visual settings.
Other options are of course using a custrom UserControl or handling/overriding the OnPaint event and drawing on the graphics provided by the Control.CreateGraphics method (no need to put PictureBox on the form).
I am trying to integrate Winforms with a SharpDX project, in order to use Winforms (and eventually WPF via HostElement) in my 3D app.
I need to create or configure a Control or Form such that I can:
a. Render it to a texture (that I can display as a sprite*)
b. Filter its input to remove mouse/keyboard events when the control is not active.
I have tried subclassing Control and Form, to override the OnPaint and OnPaintBackground but these have no effect on the child controls - or for that matter the forms borders (and even if they did they are not sufficient on their own as I am still left with a white square where I presume the 'parent' has been drawn).
How can I stop a Control or Form painting to the screen and instead draw only to a bitmap? (Is there some way I can override Graphics before the tree is painted, for example?)
*It needs to be done this way (as opposed to letting the control render to the screen) as Winforms doesn't support true transparency, so I need to clip colour coded pixels in my pixel shader.
(To confirm, I don't mean a DirectX texture specifically - I am happy with (in fact would prefer) a simple System.Drawing Bitmap)
Here is one way to start going about it:
Create a derived control class so that we can expose InvokePaint which is protected
Call our custom method to get the Control's image
Test form needs a picture box and an instance of Mybutton
using System;
using System.Drawing;
using System.Windows.Forms;
namespace WindowsFormsApplication1
{
public partial class Form1 : Form
{
public Form1() { InitializeComponent(); }
private void Form1_Load(object sender, EventArgs e)
{
// create image to which we will draw
var img = new Bitmap(100, 100);
// get a Graphics object via which we will draw to the image
var g = Graphics.FromImage(img);
// create event args with the graphics object
var pea = new PaintEventArgs(g, new Rectangle(new Point(0,0), new Size(100,100)));
// call DoPaint method of our inherited object
btnTarget.DoPaint(pea);
// modify the image with algorithms of your choice...
// display the result in a picture box for testing and proof
pictureBox.BackgroundImage = img;
}
}
public class MyButton : Button
{
// wrapping InvokePaint via a public method
public void DoPaint(PaintEventArgs pea)
{
InvokePaint(this, pea);
}
}
}
I have a couple of buttons of which I modified how they look. I have set them as flat buttons with a background and a custom border so they look all pretty and nothing like normal buttons anymore (actually, they look like Office 2003 buttons now ;-). The buttons have a border of one pixel.
However when the button gets selected (gets the focus through either a click or a keyboard action like pressing the tab key) the button suddenly gets and extra border around it of the same colour, so making it a two pixel border. Moreover when I disable the one pixel border, the button does not get a one pixel border on focus.
On the net this question is asked a lot like 'How can I disable focus on a Button', but that's not what I want: the focus should still exist, just not display in the way it does now.
Any suggestions? :-)
Is this the effect you are looking for?
public class NoFocusCueButton : Button
{
protected override bool ShowFocusCues
{
get
{
return false;
}
}
}
You can use this custom button class just like a regular button, but it won't give you an extra rectangle on focus.
I had the same issue with the annoying double border, and stumbled across this thread looking for an answer...
The way I solved this was to set the BorderSize to 0 then draw my own border in OnPaint
Note: Not the entire button, just the border
A simple example would be:
public class CustomButton : Button
{
public CustomButton()
: base()
{
// Prevent the button from drawing its own border
FlatAppearance.BorderSize = 0;
FlatStyle = System.Windows.Forms.FlatStyle.Flat;
}
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
// Draw Border using color specified in Flat Appearance
Pen pen = new Pen(FlatAppearance.BorderColor, 1);
Rectangle rectangle = new Rectangle(0, 0, Size.Width - 1, Size.Height - 1);
e.Graphics.DrawRectangle(pen, rectangle);
pen.Dispose();
}
}
In my case, this is how I made a button that mimics a ToolStripButton, where the border is only visible when you hover over the button:
public class ToolButton : Button
{
private bool ShowBorder { get; set; }
public ToolButton()
: base()
{
// Prevent the button from drawing its own border
FlatAppearance.BorderSize = 0;
// Set up a blue border and back colors for the button
FlatAppearance.BorderColor = Color.FromArgb(51, 153, 255);
FlatAppearance.CheckedBackColor = Color.FromArgb(153, 204, 255);
FlatAppearance.MouseDownBackColor = Color.FromArgb(153, 204, 255);
FlatAppearance.MouseOverBackColor = Color.FromArgb(194, 224, 255);
FlatStyle = System.Windows.Forms.FlatStyle.Flat;
// Set the size for the button to be the same as a ToolStripButton
Size = new System.Drawing.Size(23, 22);
}
protected override void OnMouseEnter(EventArgs e)
{
base.OnMouseEnter(e);
// Show the border when you hover over the button
ShowBorder = true;
}
protected override void OnMouseLeave(EventArgs e)
{
base.OnMouseLeave(e);
// Hide the border when you leave the button
ShowBorder = false;
}
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
// The DesignMode check here causes the border to always draw in the Designer
// This makes it easier to place your button
if (DesignMode || ShowBorder)
{
Pen pen = new Pen(FlatAppearance.BorderColor, 1);
Rectangle rectangle = new Rectangle(0, 0, Size.Width - 1, Size.Height - 1);
e.Graphics.DrawRectangle(pen, rectangle);
pen.Dispose();
}
}
// Prevent Text from being set on the button (since it will be an icon)
[Browsable(false)]
public override string Text { get { return ""; } set { base.Text = ""; } }
[Browsable(false)]
public override ContentAlignment TextAlign { get { return base.TextAlign; } set { base.TextAlign = value; } }
}
Make a custom button:
public partial class CustomButton: Button
{
public ButtonPageButton()
{
InitializeComponent();
this.SetStyle(ControlStyles.Selectable, false);
}
}
That'll get rid of that annoying border! ;-)
Another option (although a bit hacktastic) is to attach an event-handler to the button's GotFocus event. In that event-handler, pass a value of False to the button's NotifyDefault() method. So, for instance:
void myButton_GotFocus(object sender, EventArgs e)
{
myButton.NotifyDefault(false);
}
I'm assuming this will work every time, but I haven't tested it extensively. It's working for me for now, so I'm satisfied with that.
There is another way which works well for flat styled buttons. Don't use buttons but labels. As you are completely replacing the UI for the button it does not matter whether your use a button control or a label. Just handle the click in the same way.
This worked for me, although not great practice it is a good hack and as long as you name the button obviously (and comment the source) other coders will pick up the idea.
Ryan
The second border which gets added is the Windows standard "default button" border. You may have noticed that if you tab through most dialog boxes with multiple buttons (such as any Control Panel properties window), the original "double-bordered" button becomes "normal," and the in-focus button becomes "double-bordered."
This isn't necessarily focus at work, but rather a visual indication of the action undertaken by hitting the Enter key.
It sounds, to me, like you don't really care about that internal working. You want the display to not have two borders -- totally understandable. The internal working is to explain why you're seeing this behavior. Now ... To try and fix it.
The first thing I'd try -- and bear in mind, I haven't validated this -- is a hack. When a button receives focus (thereby getting the double-border), turn off your single border. You might get the effect you want, and it's pretty simple. (Hook into the Focus event. Even better, subclass Button and override OnFocus, then use that subclass for your future buttons.)
However, that might introduce new, awkward visual side effects. In that vein -- and because hacks are rarely the best answer -- I have to "officially" recommend what others have said: Custom paint the button. Although the code here may be overkill, this link at CodeProject discusses how to do that (VB link; you'll need translate). You should, in a full-on custom mode, be able to get rid of that second border completely.
Certainly you can draw the button yourself. One of the state flags is focused.
So on the draw event if the flag is focused go ahead and draw the button how you like, otherwise just pass it on to the base method.
Consider implementing your own drawing code for the button. That way you have full control. In the past, I've implemented my own Control derivative that custom paints my button and implements all the button characteristics for my purposes, but you should be able to override the button's painting and do it yourself, thereby controlling how it draws in every state, including when focused.
Set the FocusVisualStyle dependency property to null in your style, and the dotted border will be gone.
From MSDN: Styling for Focus in Controls, and FocusVisualStyle
Windows Presentation Foundation (WPF)
provides two parallel mechanisms for
changing the visual appearance of a
control when it receives keyboard
focus. The first mechanism is to use
property setters for properties such
as IsKeyboardFocused within the style
or template that is applied to the
control. The second mechanism is to
provide a separate style as the value
of the FocusVisualStyle property; the
"focus visual style" creates a
separate visual tree for an adorner
that draws on top of the control,
rather than changing the visual tree
of the control or other UI element by
replacing it. This topic discusses the
scenarios where each of these
mechanisms is appropriate.
The extra border you see is defined by the FocusVisualStyle and not in the control template, so you need to remove or override the style to remove the border.
If you have a textbox and a button
then on textchange event of textbox
write button1.focus();
It will work.
You can also create an invisible button and make it active whenever you press another button.
I've had good luck merely setting the Focusable property of the button to be false:
<Button HorizontalAlignment="Left" Margin="0,2"
Command="{Binding OpenSuspendedJobCommand, Mode=OneWay}"
Focusable="False"
Style="{StaticResource ActionButton}" Content="Open Job..." />