Make a transparent circle button with an opaque border and text / font awesome icon
There's no background-opacity
. May be you are looking for this:
.round-button-circle {
width: 100%;
height: 0;
padding-bottom: 100%;
border-radius: 50%;
border: 10px solid #98a1a4;
overflow: hidden;
background: transparent; /* Change it to transparent */
/* remove background-opacity */
box-shadow: 0 0 3px gray;
}
Fiddle: http://jsfiddle.net/xppow236/
Transparent Overlapping Circular Progress Bars (Custom Control)
I'm going to give you just a couple of suggestions on how to proceed.
Start off with this bare-bones transparent control (TransparentPanel
).
This class is derived from Panel
. That's the first choice to make: is Panel
the right control to inherit from/extend for this task? Maybe it is, maybe not.
For example, a Panel
is a container. Do you need the features of a container, here? Container means a lot. It inherits ScrollableControl and has ContainerControl among its Window styles. It comes with a baggage already.
You could opt for a Label
instead, it's light-weight. Or build a UserControl.
I don't think there's an absolute best choice. It depends of what this custom control is used for. You need to try it out.
Note:
To create the rotation effect with the code shown here, you need the TransparentPanel
Control shown below, it won't work the same way drawing on the surface of a standard Control.
This Control generates sort of a persistence in the drawn shapes, which won't exist using another type of Control as canvas (not without tweaking it heavily, that is).
class TransparentPanel : Panel
{
internal const int WS_EX_TRANSPARENT = 0x00000020;
public TransparentPanel() => InitializeComponent();
protected void InitializeComponent()
{
this.SetStyle(ControlStyles.AllPaintingInWmPaint |
ControlStyles.Opaque |
ControlStyles.ResizeRedraw |
ControlStyles.SupportsTransparentBackColor |
ControlStyles.UserPaint, true);
this.SetStyle(ControlStyles.OptimizedDoubleBuffer, false);
}
protected override CreateParams CreateParams
{
get {
CreateParams parameters = base.CreateParams;
parameters.ExStyle |= WS_EX_TRANSPARENT;
return parameters;
}
}
}
Other notes:
Here, ControlStyles.SupportsTransparentBackColor is set explicitly. The Panel
class already supports this. It's specified anyway because it gives the idea of what this custom control is for just reading at its constructor.
Also, ControlStyles.OptimizedDoubleBuffer
is set to false.
This prevents the System to interfere in any way with the painting of the control. There's no caching, the Custom Control is painted new when it's Invalidated. The container Form should preferably have its DoubleBuffer
property set to true
, but you might want test it without, to see if there's a difference.
This Custom Control (not to be confused with a UserControl
) is completely transparent. It doesn't draw its background. But you can paint anything on its surface.
Take the links posted before:
- This Translucent Label (no BackGround painting, disabled
DoubleDuffering
) - Reza Aghaei's transparent Panel (using
Opacity
in a different way) - TaW's Grid Panel (
Color.Transparent
andDoubleBuffer
) - These notes: Reasons for why a WinForms label does not want to be transparent?
4 different ways to get to the same result. Which one to choose depends on the context/destination.
A design-time advice: when you are testing a custom control functionalities, remember to always rebuild the project. It can happen that a CustomControl
, droppen on a Form
from the Toolbox
, is not updated with the new changes when the project is run.
Also, if you add or remove properties, you need to delete the control, rebuild and drop a new one on the Form.
If you don't, there's a really good chance that your modification/addition are completely ignored and you keep on testing features that never get into play.
An example, using 2 overlapping custom controls.
(using the bare-bones custom TransparentPanel
)
This is the test code used to generate these drawings:
- Create a new Custom Control using the
TransparentPanel
class shown before: - Drop two
TransparentPanel
objects on a test Form - Assign to
TransparentPanel1
andTransparentPanel2
thetransparentPanel1_Paint
andtransparentPanel2_Paint
event handlers. - Overlap the two transparent Panels, making sure you don't nest them by mistake.
- Adapt the rest of the code (you need just a Button, here named
btnRotate
, assign thebtnRotate_Click
handler)
private System.Windows.Forms.Timer RotateTimer = null;
private float RotationAngle1 = 90F;
private float RotationAngle2 = 0F;
public bool RotateFigures = false;
public form1()
{
InitializeComponent();
RotateTimer = new Timer();
RotateTimer.Interval = 50;
RotateTimer.Enabled = false;
RotateTimer.Tick += new EventHandler(this.RotateTick);
}
protected void RotateTick(object sender, EventArgs e)
{
RotationAngle1 += 10F;
RotationAngle2 += 10F;
transparentPanel1.Invalidate();
transparentPanel2.Invalidate();
}
private void btnRotate_Click(object sender, EventArgs e)
{
RotateTimer.Enabled = !RotateTimer.Enabled;
if (RotateTimer.Enabled == false)
{
RotateFigures = false;
RotationAngle1 = 90F;
RotationAngle2 = 0F;
}
else
{
RotateFigures = true;
}
}
private void transparentPanel1_Paint(object sender, PaintEventArgs e)
{
if (!RotateFigures) return;
e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
e.Graphics.CompositingQuality = CompositingQuality.HighQuality;
e.Graphics.CompositingMode = CompositingMode.SourceOver;
Rectangle rect = transparentPanel1.ClientRectangle;
Rectangle rectInner = rect;
using (Pen transpPen = new Pen(transparentPanel1.Parent.BackColor, 10))
using (Pen penOuter = new Pen(Color.SteelBlue, 8))
using (Pen penInner = new Pen(Color.Teal, 8))
using (Matrix m1 = new Matrix())
using (Matrix m2 = new Matrix())
{
m1.RotateAt(-RotationAngle1, new PointF(rect.Width / 2, rect.Height / 2));
m2.RotateAt(RotationAngle1, new PointF(rect.Width / 2, rect.Height / 2));
rect.Inflate(-(int)penOuter.Width, -(int)penOuter.Width);
rectInner.Inflate(-(int)penOuter.Width * 3, -(int)penOuter.Width * 3);
e.Graphics.Transform = m1;
e.Graphics.DrawArc(transpPen, rect, -4, 94);
e.Graphics.DrawArc(penOuter, rect, -90, 90);
e.Graphics.ResetTransform();
e.Graphics.Transform = m2;
e.Graphics.DrawArc(transpPen, rectInner, 190, 100);
e.Graphics.DrawArc(penInner, rectInner, 180, 90);
}
}
private void transparentPanel2_Paint(object sender, PaintEventArgs e)
{
if (!RotateFigures) return;
e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
e.Graphics.CompositingQuality = CompositingQuality.HighQuality;
e.Graphics.CompositingMode = CompositingMode.SourceOver;
Rectangle rect = transparentPanel2.ClientRectangle;
Rectangle rectInner = rect;
using (Pen transpPen = new Pen(transparentPanel2.Parent.BackColor, 10))
using (Pen penOuter = new Pen(Color.Orange, 8))
using (Pen penInner = new Pen(Color.DarkRed, 8))
using (Matrix m1 = new Matrix())
using (Matrix m2 = new Matrix())
{
m1.RotateAt(RotationAngle2, new PointF(rect.Width / 2, rect.Height / 2));
m2.RotateAt(-RotationAngle2, new PointF(rect.Width / 2, rect.Height / 2));
rect.Inflate(-(int)penOuter.Width, -(int)penOuter.Width);
rectInner.Inflate(-(int)penOuter.Width * 3, -(int)penOuter.Width * 3);
e.Graphics.Transform = m1;
e.Graphics.DrawArc(transpPen, rect, -4, 94);
e.Graphics.DrawArc(penOuter, rect, 0, 90);
e.Graphics.ResetTransform();
e.Graphics.Transform = m2;
e.Graphics.DrawArc(transpPen, rectInner, 190, 100);
e.Graphics.DrawArc(penInner, rectInner, 180, 90);
}
}
WinForms picturebox not transparent
It is quite easy all you have to do is make the canvas PictureBox of the same size and set its location also the same as your first picture box. Then set canvas PictureBox back colour to transparent. Now set your first PictureBox as the parent of canvas PictureBox.
You can write the below code on the form load event.
pictureBoxCanvas.Size = pictureBox1.Size;
pictureBoxCanvas.Location = pictureBox1.Location;
pictureBoxCanvas.BackColor = Color.Transparent;
pictureBoxCanvas.BringToFront();
pictureBoxCanvas.Parent = this.pictureBox1;
Related Topics
How to Exclude Property from Json Serialization
Difference Between Null and System.Dbnull.Value
Dynamically Replace the Contents of a C# Method
Integer Summing Blues, Short += Short Problem
Dynamic Where Clause (Or) in Linq to Entities
Contains()' Workaround Using Linq to Entities
How to Get the List of Open File Handles by Process in C#
Deserialize Json to C# Classes
How to Wait For a Thread to Finish With .Net
When Should I Use Double Instead of Decimal
Why Is There No Foreach Extension Method on Ienumerable
Find a Private Field With Reflection
How to Prevent And/Or Handle a Stackoverflowexception
Double to String Conversion Without Scientific Notation
Difference Between a Regular String and a Verbatim String
What Is the Purpose of a Question Mark After a Value Type (For Example: Int? Myvariable)