We Keep Coding

C# WinForms TabStrip control: no accelerator

I am using a tab strip control on a WinForms form. I make use of keyboard accelerators as much as possible. When I set the Text property of a TabPage to e.g. &Documents, the text on the tab is literally &Documents instead of the letter D being underlined.
The help about TabStrip and TabPage doesn't cover this topic. The property ShowKeyboardCues is read-only. Google is helpless.
Can anyone give me a hint how to show accelerators?

How can I set up keyboard shortcuts for a Windows Forms TabControl? gives tips on setting up keyboard shortcuts for it.. In terms of showing an accelerator though, you'll have to draw them yourself
Set the tabControl's DrawMode to OwnerDrawFixed then do some code to draw the tabs, for example (I had to try hard to make it this ugly)
private void tabControl1_DrawItem(object sender, DrawItemEventArgs e)
{
//Change appearance of tabcontrol
Brush backBrush = Brushes.Red;
Brush foreBrush = Brushes.Blue;
e.Graphics.FillRectangle(backBrush, e.Bounds);
Rectangle r = e.Bounds;
r = new Rectangle(r.X, r.Y + 3, r.Width, r.Height - 3);
e.Graphics.DrawString("my label", e.Font, foreBrush, r);
var sz = e.Graphics.MeasureString("my ", e.Font);
e.Graphics.DrawString("_", Font, foreBrush, r.X + sz.Width - 2, r.Y + 2);
}
Joking aside, setting up some ugly colors does help you see where the bounds of the drawing area are etc. I'm sure you'll tart it up..

Neither of these controls supports that functionality. It is possible to simulate it, but it is a long and complicated task that I would not recommend because it is non-standard functionality. As a result it is unlikely that anyone would expect it to occur. On the other hand, changing tabs using Ctrl+Tab is standard behaviour so is already automatically supported.
If you did want to do this, you would need to:
Subclass the Control
Override the painting and draw the text on the tab yourself
Get a preview of the keydown event and use that to determine if the key combination you wanted was pressed
Select the correct tab programmatically based on the keypress that you have intercepted
As I say, I would not recommend this because it is not normal behaviour for that control and because the complexity means that it is likely to be buggy. But it is possible...

Refresh child controls in flowlayoutpanel when scrolling

In .NET 3.5 with winforms I'm making an image thumbnail viewer control.
The main control is derived from a FlowLayoutPanel which takes a list of images and displays them. The images which are displayed are made from a CustomControl on which I paint the and the accompanying label as well as the border of the control.
Images can be selected through clicking and yada yada as you would expect for that kind of control.
Here's a screenshote to illustrate:
That part works fine. The problem is then when I scroll the FlowLayoutPanel derived control the border doesn't redraw properly and there are lines remaining as shown in this screenshot:
I have set both the FlowLayoutPanel and the Images to double buffered. And the images and labels do not have the problem, so I suspect it is something else, but can't figure out what it is.
I think the method used to paint the border of the images might be at fault. Here's the code I use:
protected override void OnPaint(PaintEventArgs e)
{
Rectangle captionContainer;
captionContainer = new Rectangle();
if (!string.IsNullOrEmpty(this.Caption))
captionContainer = this.DrawCaption(e.Graphics);
if (this.Image != null)
this.DrawImage(e.Graphics, captionContainer);
this.Size = new Size(this.Padding.Horizontal + this.ImageSize.Width, this.Padding.Vertical + this.ImageSize.Height + captionContainer.Height);
ControlPaint.DrawBorder(e.Graphics, e.ClipRectangle, this.currentBorderColor, ButtonBorderStyle.Solid);
base.OnPaint(e);
}
I'll post more code if needed, but it is pretty lengthy, so I do not want to put too much code unless it actually is necessary.
Can anybody see where this is going wrong?

I have solved by also drawing the border using the Graphics object. Replacing
ControlPaint.DrawBorder(e.Graphics, e.ClipRectangle, this.currentBorderColor, ButtonBorderStyle.Solid);
with
e.Graphics.DrawRectangle(new Pen(this.currentBorderColor, 1F), new Rectangle(Point.Empty, new Size(this.Width - 1, this.Height - 1)));
does the trick. No idea why one works and not the other though...

How can I add transparency to a c# form while keeping controls visible?

UPDATE: I took a break from messing with the transparency stuff for a few days. I started messing with it again tonight. I got a new result using Hans Passant's solution:
http://img3.imageshack.us/img3/4265/icontransp.jpg
Passant's solution does solve the issue of the transparent background gradient. However, I'm still running into the problem with the transparent colors in my icon blending with the form's BackColor. You can see the fuchsia around various parts of the icon in the above image.
ORIGINAL CONTENT:
I've been going at this for several hours now, and I haven't had much luck. I've messed with Control.Region, Form.TransparencyKey, Form.Opacity, and a couple other random things with some funky effects.
Lately I've been trying to customize my desktop and decided to mess with Application Docks. After seeing what the Mac dock and a few third-party Windows implementations had to offer, I decided I wanted to build my own.
Eventually I want to move on to using the Win32 API. For now I just want to get something working using as much C# and .Net framework capabilities as possible.
There are a few things I want to be able to do in this application:
Display a form/menu with a gradient background.
Allow the form/menu to have transparency while keeping icons opaque.
Display icons that contain transparent backgrounds.
The Menu and Icons should be able to receive mouse-related events (hover, leave, click, dragover, dragdrop, and a few others).
This is the effect I'm shooting for:
http://img207.imageshack.us/img207/5716/desired.jpg
This image shows the visual effects I'm trying to achieve. This was a skin I made for a program called Rainmeter. The image shows Notepad++ behind the skin with a few of the skin's files open in the editor. The menu is transparent, but the icons remain opaque.
My Approach:
Using a Form to act as the menu seemed like a logical first choice to me. I have a basic understanding of events. I'm not quite sure how to create my own click events, so a form would make working with events a tad easier. I considered a few options for the icons. I decided I'd use PictureBoxes for the icons, since they can hold images and receive events.
Once I finished the code for all the structural logic of my menu, I started playing around with it to try to get the visual effect I wanted. Form.Opacity affected the transparency of everything on the form. Since I want the icons to be fully opaque, I left this property alone. I tried setting the BackColor to Color.Transparent, but that gives an error. I played around with a few combinations...
http://img204.imageshack.us/img204/757/effectsi.jpg
I drew the gradient with a Drawing2D.LinearGradientBrush into a Bitmap. This Bitmap was then placed as the Form.BackgroundImage or as a PictureBox.Image. If used, the PictureBox was sized to cover the entire Form and sent to the back.
I noticed that some of the Form.BackgroundColor would be mixed in with the outlines of my icons. The icons have transparency along the edges for a smoother appearance. Since the icons are picking up the Form's BackgroundColor, this makes me think that the PictureBoxes are creating new images when the icons are loaded into the form. The semi-transparent portions of the image are then merged with the Form's BackgroundColor when they should merge with whatever colors are behind the form.
http://img838.imageshack.us/img838/8299/whitedesktop.jpg
In this image you can see the Fuchsia existing in the icons even though the Form's Fuchsia color is now completely transparent. I forgot to point out that the same green to yellow gradient with an Alpha value of 150 was used in every case. In the images where the gradient doesn't look green, it's because the transparent colors are blending with the Fuchsia background.
I'm not really sure what to do from here. I feel like I could get what I want if I could somehow make the Form alone completely transparent. I was also thinking I may have better luck just drawing the icons instead of using PictureBoxes. The problem then would be setting up the icons to receive mouse events. (I've never made my own events, and I think it would involved some Win32 API calls.)
Is there something else I can do with the PictureBoxes to get the effect I want? Whichever the case, I'm open to any ideas or suggestions for the overall effect I'm trying to achieve.

This is pretty easy to do in Winforms. What you need is a sandwich of two forms. The bottom one should provide the transparent gradient background, the top one should draw the icons and handle mouse clicks. Some sample code:
public partial class Form1 : Form {
public Form1() {
InitializeComponent();
this.TopMost = true;
this.FormBorderStyle = FormBorderStyle.None;
this.TransparencyKey = this.BackColor = Color.Fuchsia;
this.Opacity = 0.3;
var overlay = new Form();
overlay.FormBorderStyle = FormBorderStyle.None;
overlay.TransparencyKey = overlay.BackColor = Color.Fuchsia;
overlay.StartPosition = FormStartPosition.Manual;
overlay.Location = this.Location;
overlay.MouseDown += HandleIconClick;
this.Resize += delegate { overlay.Size = this.Size; };
this.LocationChanged += delegate { overlay.Location = this.Location; };
overlay.Paint += PaintIcons;
this.Paint += PaintBackground;
this.Load += delegate { overlay.Show(this); };
}
private void PaintBackground(object sender, PaintEventArgs e) {
var rc = new Rectangle(0, 0, this.ClientSize.Width, this.ClientSize.Height);
using (var br = new LinearGradientBrush(rc, Color.Gainsboro, Color.Yellow, 0f)) {
e.Graphics.FillRectangle(br, rc);
}
}
private void PaintIcons(object sender, PaintEventArgs e) {
e.Graphics.DrawIcon(Properties.Resources.ExampleIcon1, 50, 30);
// etc...
}
void HandleIconClick(object sender, MouseEventArgs e) {
// TODO
}
}
Which looks like this with the somewhat random colors and icon I selected:

OK, I got a bit lost in all that, but from the description in the original paragraph, I would make sure the background rectangle is NOT the visual parent of the pictureboxes. Make them overlapping siblings, with the pictureboxes in front using Panel.Zindex.
Then you can just change the opacity of the rectangle, without affecting the icons. Also make sure the icon source image files have a transparent background.
Should work I think.

Is there a way to color tabs of a tabpage in winforms?

I am struggling to find a way to color the tab headers of a tabpage in WinForms. There are solutions to color the current indexed tab using the OnDrawItem event, but is it possible to color all the tabs with different colors to make them more intuitive for users for certain behavior?
Thanks in advance.

An improved version of Ash's answer:
private void tabControl_DrawItem(object sender, DrawItemEventArgs e)
{
TabPage page = tabControl.TabPages[e.Index];
e.Graphics.FillRectangle(new SolidBrush(page.BackColor), e.Bounds);
Rectangle paddedBounds = e.Bounds;
int yOffset = (e.State == DrawItemState.Selected) ? -2 : 1;
paddedBounds.Offset(1, yOffset);
TextRenderer.DrawText(e.Graphics, page.Text, e.Font, paddedBounds, page.ForeColor);
}
This code uses the TextRenderer class to draw its text (as .NET does), fixes problems with font clipping/wrapping by not negatively inflating the bounds, and takes tab selection into account.
Thanks to Ash for the original code.

Yes, there is no need for any win32 code. You just need to set the tab controls DrawMode property to 'OwnerDrawFixed' and then handle the tab control's DrawItem event.
The following code shows how:
private void tabControl1_DrawItem(object sender, DrawItemEventArgs e)
{
// This event is called once for each tab button in your tab control
// First paint the background with a color based on the current tab
// e.Index is the index of the tab in the TabPages collection.
switch (e.Index )
{
case 0:
e.Graphics.FillRectangle(new SolidBrush(Color.Red), e.Bounds);
break;
case 1:
e.Graphics.FillRectangle(new SolidBrush(Color.Blue), e.Bounds);
break;
default:
break;
}
// Then draw the current tab button text
Rectangle paddedBounds=e.Bounds;
paddedBounds.Inflate(-2,-2);
e.Graphics.DrawString(tabControl1.TabPages[e.Index].Text, this.Font, SystemBrushes.HighlightText, paddedBounds);
}
Setting the DrawMode to 'OwnerDrawnFixed' means each tab button has to be the same size (ie Fixed).
However if you want to change the size of all tab buttons, you can set the tab control's SizeMode property to 'Fixed' and then change the ItemSize property.

Using the current tab control, if it is possible you'd need to hook a lot of win-32 events (there may be a pre-wrapped implementation out there). Another alternative would be a 3rd-party tabbed control replacement; I'm sure plenty of vendors will sell you one.
IMO, you might find it less pain to look at WPF; it is a big change, but has more control over things like this. You can host WPF inside winforms if needed (if you can't justify a full make-over, which is a pretty common reality).

How to set/change/remove focus style on a Button in C#?

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..." />