I'm trying to extend TextBox to add a Label to the left of it and treat it as one Control so I don't have to keep track of both of their sizes, locations, etc.
I've created a TextBoxWithLabel class that extends Control and has TextBox and Label fields, but I'm not really sure what to do for onPaint() - do I have to tell it to manually draw both items? If so, how? I'm guessing the default inherited behaviour doesn't go so far as 'check if I contain any child Controls and if I do, draw them'...
Is this even the best way to do it? I previously had my class extend TextBox and just added the Label field, but of course that didn't get added to the Panel containing the TextBoxWithLabel and so wasn't drawn.
Any suggestions or pokes in the right direction appreciated.
Thanks,
Alex
The typical approach here is a UserControl in which you put both the label and the text box. It is painful though, you have to add a lot of the properties and events of the text box to the user control so it at least resembles a text box. Ugly boilerplate code.
Another way to do it is to make a custom text box that sneaks in a label control on the parent. That completely behaves like a TextBox without having to do any work. Add a new class to your project and paste the code shown below. Compile. Drop the new control from the top of the toolbox onto your form. Set the Description property to the text you want to see appear in the label.
using System;
using System.Drawing;
using System.Windows.Forms;
class MyTextBox : TextBox {
private Label label;
public MyTextBox() {
label = new Label();
label.AutoSize = true;
label.Font = this.Font;
label.Location = this.Location;
label.Resize += new EventHandler(label_Resize);
}
protected override void OnParentChanged(EventArgs e) {
// Keeps label on the same parent as the text box
base.OnParentChanged(e);
label.Parent = this.Parent; // NOTE: no dispose necessary
}
private void moveLabel() {
// Keep label right-aligned to the left of the text box
label.Location = new Point(this.Left - label.Width - 10, this.Top);
}
private void label_Resize(object sender, EventArgs e) {
moveLabel();
}
protected override void OnLocationChanged(EventArgs e) {
base.OnLocationChanged(e);
moveLabel();
}
public string Description {
get { return label.Text; }
set { label.Text = value; }
}
public override Font Font {
get { return base.Font; }
set { base.Font = label.Font = value; }
}
}
Did you consider using a UserControl? The benefit of a usercontrol is that you can easily put your label and textbox with correct relative positioning.
Custom Control - An extension to an existing control
User Control - A composition of multiple existing controls
Choose your candidate.
Related
I'm trying to add a Label to a Windows Form by using another class programmatically. My Label does not appear inside the Form.
I don't know where I'm going wrong.
private void Form1_Load(object sender, EventArgs e)
{
Ticker ticker = new Ticker("ASDF");
ticker.display();
}
public class Ticker : Label
{
string labelText;
Label label = new Label();
public Ticker(string _labelText)
{
labelText = _labelText;
}
public void display()
{
label.Text = labelText;
Controls.Add(label);
}
}
You can make a few changes to your Ticker Custom Control:
You don't need to create a new Label inside your Custom Control: your Control is already a Label, use the this reference to set its properties (see also this keyword (C# Reference)).
The Text is the current Label's Text (this.Text). Store it if you need a copy of it for other reasons (custom painting, usually, so sometimes you need to clear the Text).
Controls is referring to the current class object: it's a Control, so it has a Controls property, which gets the ControlCollection of the child Controls of a Control.
You need to also specify a Point that defines the position of your Custom Control inside its Parent's ClientRectangle.
Even if it's not always required, add a parameter-less Constructor to your Custom Control: if/when it's actually needed, you'll have it already there.
If you don't want to set the Parent Control from the outside, as usual (e.g., var label = new Label(); this.Controls.Add(label);), you need to pass the reference of the Control which will become the Parent Control of your custom Label.
You can the use this reference - a Control type of reference - and add your Label to the Controls collection of the Control reference you receive:
// You want to store a reference to this Control if you need it later...
private Ticker ticker = null;
private void Form1_Load(object sender, EventArgs e)
{
//... or just declare it with: var ticker = new Ticker() if you don't
ticker = new Ticker("The Label's Text");
// [this] of course refers the current class object, Form1
ticker.Display(this, new Point(100, 100));
// Or, display the Label inside a Panel, child of Form1
// Note: if you don't comment the next line, the Label will be moved to panel1
ticker.Display(this.panel1, new Point(10, 50));
}
Here, I'm overloading the Display() method, so it accepts both a Parent reference and a Point value, used to position the Control inside its Parent's Client Area.
The Custom Label also calls BringToFront() on itself, to avoid showing up under some other, already existing, child Control of the new Parent.
public class Ticker : Label
{
public Ticker() : this("ticker") { }
public Ticker(string labelText) => this.Text = labelText;
public void Display(Control parent) => Display(parent, Point.Empty);
public void Display(Control parent, Point position)
{
this.Location = position;
parent.Controls.Add(this);
this.BringToFront();
}
}
I have design 1 winform to look like the picture. But I want the highlighted yellow part to be dockable with dockpanel suite reference. Is that do-able or any other suggestion of better design?
Right now the treeview is on the dockpanel and the red box part is a usercontrol placed in the same dockpanel. I tried to put the redbox as another form but I can't place it as it is in the picture. Also, this winform is need to be responsive so I put in the redbox part in a table layout panel.winform design and not familiar actually with the dockpanel suite reference. If there is a beginner tutorial that I can refer to, it would be much appreciated.
Current design:
There are two approach to your problem. First is dirty one and second elegant one. By dirty and elegant i mean way they display. Method they work are both same.
I will explain to you how to do it on empty form and you just implement that in your populated one.
First create new form.
Add 2 or more GroupBoxes to it
Add some items inside them (just to see if it works)
At the top of the each boxes add Button which will toggle visibility
Our form now looks like this and let's look of code behind it.
using System;
using System.Drawing;
using System.Windows.Forms;
namespace Test
{
public partial class TestForm : Form
{
// This is property
bool ShowFirstGroupBox
{
get
{
// We let user get our property from private variable
return _ShowFirstGroupBox;
}
set
{
// When user change this property we do something based on that
switch(value)
{
case true:
groupBox1.Size = new Size(groupBox1.Width, FirstGroupBoxDefaultHeight);
break;
case false:
groupBox1.Size = new Size(groupBox1.Width, 55);
break;
}
_ShowFirstGroupBox = value;
}
}
bool ShowSecondGroupBox
{
get
{
return _ShowSecondGroupBox;
}
set
{
switch (value)
{
case true:
groupBox2.Size = new Size(groupBox1.Width, FirstGroupBoxDefaultHeight);
break;
case false:
groupBox2.Size = new Size(groupBox1.Width, 55);
break;
}
_ShowSecondGroupBox = value;
}
}
// We store our boxes current state ( TRUE = shown, FALSE = HIDDEN )
bool _ShowFirstGroupBox = true;
bool _ShowSecondGroupBox = true;
// We store our default height for groupboxes
int FirstGroupBoxDefaultHeight;
int SecondGroupBoxDefaultHeight;
public TestForm()
{
InitializeComponent();
// Assigning default height of our groupboxes
FirstGroupBoxDefaultHeight = groupBox1.Height;
SecondGroupBoxDefaultHeight = groupBox2.Height;
}
private void button1_Click_1(object sender, EventArgs e)
{
ShowFirstGroupBox = !(_ShowFirstGroupBox); // This sets our property value to opposite of this boolean
}
private void button1_Click_1(object sender, EventArgs e)
{
ShowSecondGroupBox = !(_ShowSecondGroupBox); // This sets our property value to opposite of this boolean
}
}
}
Now when we have code like this and press button it will collapse groupbox.
NOTE: Controls under groupbox are still on place but just hidden since they are child of groupbox and everything outside of bounds is not visible to user.
This is dirty way since i would like to display it much prettier with MINUS sign on the right side of the groupbox title so i do not have button inside it. To do this you would need to create custom control which inherits groupbox, add button to it and position it in title bar and create event for it. It is easy if you have ever tried creating custom controls but if you haven't and you think dirty approach is okay with you then do not try it.
I made a custom TextBox so that I can have it bordered, that works fine...
The problem is that I want to set PasswordChar to *, and that doesn't workHere is my code:
public class TextBoxEx : TextBox
{
// The TextBox
private TextBox textBox = new TextBox();
// Border color of the textbox
private Color borderColor = Color.Gray;
// Ctor
public TextBoxEx()
{
this.PasswordChar ='*';
this.Paint += new PaintEventHandler(TextBoxEx_Paint);
this.Resize += new EventHandler(TextBoxEx_Resize);
textBox.Multiline = true;
textBox.BorderStyle = BorderStyle.None;
this.Controls.Add(textBox);
this.UseSystemPasswordChar = true;
InvalidateSize();
}
// Exposed properties of the textbox
public override string Text
{
get { return textBox.Text; }
set { textBox.Text = value; }
}
// ... Expose other properties you need...
// The border color property
public Color BorderColor
{
get { return borderColor; }
set { borderColor = value; Invalidate(); }
}
// Expose the Click event for the texbox
public event EventHandler TextBoxClick
{
add { textBox.Click += value; }
remove { textBox.Click -= value; }
}
// ... Expose other events you need...
private void TextBoxEx_Resize(object sender, EventArgs e)
{
InvalidateSize();
}
private void TextBoxEx_Paint(object sender, PaintEventArgs e)
{
ControlPaint.DrawBorder(e.Graphics, this.ClientRectangle, borderColor, ButtonBorderStyle.Solid);
}
private void InvalidateSize()
{
textBox.Size = new Size(this.Width - 2, this.Height - 2);
textBox.Location = new Point(1, 1);
}
}
Generally when I try to set the properties of custom control by default it doesn't work, for example if I set
this.ReadOnly=true;
This won't work either. So the problem isn't in PasswordChar itself.
Anybody know the solution?
Since the class is itself inheriting the TextBox class, you don't need to create an inner textbox.
With that in mind, you can take out your declaration of private TextBox textBox, and replace references to this member with this, since this is a TextBox descendant.
In the constructor, you will also remove this.Controls.Add(textBox); since there is no longer an inner control to add.
The overridden Text property can also be removed, as it doesn't add functionality to the TextBox definition.
The InvalidateSize method will need to be reworked, since adjusting the Size member triggers the TextBoxEx_Resize handler method, which calls the InvalidateSize method again, eventually causing a StackOverflowException.
One last thing, and an important one. According to MSDN...
If the Multiline property is set to true, setting the PasswordChar property has no visual effect. When the PasswordChar property is set to true, cut, copy, and paste actions in the control using the keyboard cannot be performed, regardless of whether the Multiline property is set to true or false.
Meaning the textbox PasswordCharacter will not display if the textbox is Multiline
Im going to take a stab at this,
private TextBox textBox = new TextBox();
...
this.Controls.Add(textBox);
The above seems to be the problem,
It seems your shadow textbox is actually whats displaying,
If you need shadow properties in the back ground (and without really knowing your goal), probably just best creating the properties you need.
I wonder if it's possible to customize my C# application (winforms) to get a better design, I made a PSD (photoshop document) so I can generate png jpeg... pictures if I need them.
Example of a form like the one I want :
Indeed as it was pointed out in the comments, it is easy to use WPF (indows Presentation Foundation) to achieve that result, but if you really need that it must be made in windows forms I can help you with that...
ControlBox and Border
It seens that your form does not have a control box (minimize, maximize and close buttons)
to achieve that you can set
form.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None
I'm not sure if that galaxy behind your form is part of the application so i'll be considering that it is not
To achieve that irregular shape of the form we have to do a workaround here
Irregular Shape of the Form
we are going to set a Color to TransparentKey, so everything in the form in that specific color will be transparent, like it does not exists (if you click in that part it will go into de desktop or whatever application you have behind in your form)
So let's use a specific color which we will probably dont use in the form
form.TransparencyKey = Color.FromArgb(111, 111, 111); //You can do it by the editor
So in order to make that white part we are going to use an Panel and a PictureBox outsite of the Panel trying to copy the shape of your image
Stylized Inputs
To make it easier and reusable I'm going to make a userControl in this one
the usercontrol will have
a Panel called HighLightPanel, its dock property will be set to Fill
a Panel called BackColorPanel, it will be inside the HighLightPanel
a PictureBox called InputPicture, its dock property will be set to Left, it will be inside BackColorPanel and its acessor will be public
a TextBox called TextBox, its dock property wil be set to fill, it will be inside BackColorPanel, the BorderStyle Property set to None, you should set the size and font you most desize in this one, I'm going to use Segoe UI; 15,75pt and its acessor will be public
Now we have to make some properties in our UserControl to make it work without work in other controls
First in the SizeChanged event of the HighLightPanel we will make the BackColorPanel be exacly two points smaller in every direction and its position to 1;1 so we can see the HighLightPanel
private void HighlightPanel_SizeChanged(object sender, EventArgs e)
{
this.BackColorPanel.Size = new Size(
HighlightPanel.Width - 2,
HighlightPanel.Height - 2);
}
Now we will create two propertys to handle the Highlight Color
public Color HighlightBorderColor { get; set; }
public Color NonHighlightBorderColor { get; set; }
And in the Enter and Leave Property of our TextBox we are going to change the HighlightPanel
private void TextBox_Enter(object sender, EventArgs e)
{
HighlightPanel.BackColor = HighlightBorderColor;
}
private void TextBox_Leave(object sender, EventArgs e)
{
HighlightPanel.BackColor = NonHighlightBorderColor;
}
So now every time the user enter the Input it will appear that the Input has an Border in the specified Color
Now to enhance its usability to developers we will make some wrappers in its controls to be easier change property of child controls in the editor
public Image InputImage
{
get { return InputPicture.Image; }
set { InputPicture.Image = value; }
}
public PictureBoxSizeMode InputImageLayout
{
get { return InputPicture.SizeMode; }
set { InputPicture.SizeMode = value; }
}
public char PasswordCharacter
{
get { return TextBox.PasswordChar; }
set { TextBox.PasswordChar = value; }
}
public bool ShowInputImage
{
get { return InputPicture.Visible; }
set { InputPicture.Visible = value; }
}
In the InputImage set the picture you want for the User and the Key
Insert the two controls in the position you like
Position of the Form
if you want your form to be moveable without the border you will have to use this snippet, it is more easy in WPF
#region MoveForm
Point LastPoint;
bool ShouldMove;
private void form_MouseDown(object sender, MouseEventArgs e)
{
LastPoint = e.Location;
ShouldMove = true;
this.TransparencyKey = Color.FromArgb(111, 111, 111);
}
private void form_MouseUp(object sender, MouseEventArgs e)
{
ShouldMove = false;
}
private void form_MouseMove(object sender, MouseEventArgs e)
{
if (ShouldMove)
{
this.Location = new Point(
this.Location.X - LastPoint.X + e.X,
this.Location.Y - LastPoint.Y + e.Y);
}
}
#endregion
If you need a lot of special graphics effects learning WPF will indeed be a sound investement.
If all you want is that login screen, it is trivial in Winforms and doesn't take any horrible hacks as you've been told..
this.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
this.BackColor = System.Drawing.Color.LavenderBlush;
this.TransparencyKey = System.Drawing.Color.LavenderBlush;
this.ControlBox = false;
this.MaximizeBox = false;
this.MinimizeBox = false;
this.Text= "";
These seven lines are all it takes for a form to be transparent. I copied them from the Designer code; you can simply set the 7 Properties in the property grid.
Now add a panel, dock it to the bottom and give it the right color; add a picturebox and your other controls and you are set.
To create the two input groups you also need just a few regular controls and only a few simple lines of code:
You place one Panel, BorderStyle = FixedSingle; and add a Label and a TextBox to it. The Label has AutoSize = False; and both ImageAlign and TextAlign are set to MiddleLeft. You assign an image to the Label's Image and prefix the Text with enough blanks to not overlap. Obviously you should define a PasswordChar for the 2nd TextBox. Now all you need is to script the Enter and Leave events to change the BackColor of the respective Panels between, say SystemColors.Control and SystemColors.MenuHighlight. Size the Labels to almost fill the Panels and you are done. Less code than the WPF version, I'd bet.
If you need such input an controls again and again, simply create Usercontrols for each type you need!
Here is an example of the limits you will hit: Wouldn't it be nice to add a dropshadow effect to the image? It is doable in Winforms. But it would involve painting that effect; this would take at least 15 or 20 lines of involved code instead of simply turning the effect on with (estimated) 1-3 simple lines.
Do you need any nice hover effects? Not easy, to say the least..
These limits will be all over the place, so it really depends on how fancy your requirements will get.
Maybe you should use this example as a starter to compare the two techniques and to warm you up to WPF?
If this is a dumb question, forgive me. I have a small amount of experience with C#, but not to this degree yet.
I have a series of images that I want to put into a grid with space around each image, also text beneath them and I want them to be clickable, so when they're clicked they hilite, and double click runs an event. The best example I have for this is the user interface of the program ACDSee. I've googled this for hours, and haven't come up with anything applicable. Is this difficult or simple? Can anyone give me an example, or point me in the right direction?
Cheers.
It doesn't seem to be very difficult. I would suggest the following steps:
Add a new "User Control" to your project for image thumbnails. It can contain a docked PictureBox and a Label or LinkLabel at its bottom.
For the space around each thumbnail simply play with the Padding property of the user control.
For the so called grid that is going to hold the thumbnails, use a FlowLayoutPanel, and simply add instances of the above mentioned user-control to this panel.
For visual representation of being selected, change the background color of the user-control instance to blue (for example), and back to control-face when deselected. It is recommended to implement an IsSelected property for the user-control as well.
To emulate thumbnail selection, handle the Click event of the user-control and assign the events for all thumbnail instances to a single event-handler method. Store a global reference to the already selected thumbnail, name it e.g., SelectedThumbnail initialized with null. In the event-handler body compare the sender with the global SelectedThumbnail, and update it if required. If the user-control associated with the sender is not selected (i.e., its background is not blue, or IsSelected is false) make it selected, or change its background. Otherwise change the background to its default color (e.g., control-face).
The Click event handler body looks something like this:
MyThumbnailControl ctrl = sender as MyThumbnailControl;
if(ctrl == null) return;
if(ctrl == SelectedThumbnail) return; // selected again
if(ctrl != SelectedThumbnail)
{
ctrl.IsSelected = true;
ctrl.BackColor = Color.Blue;
// it's better to set the back-color in the IsSelected property setter, not here
SelectedThumbnail.IsSelected = false;
SelectedThumbnail.BackColor = Color.Control;
SelectedThumbnail = ctrl; // important part
}
It's also recommended that all thumbnail instances that are going to be added to the so-called grid, be referenced in a separate array too. Therefore changing selection with arrow-keys would be possible with simple index calculations.
Further Notes: I assumed that the user-control that is to be created is named MyThumbnailControl, just a random name to refer to that control. When you create a new user-control, the wizard generates a class for you with your desired name (e.g., MyThumbnailControl), you can define a property inside it named IsSelected and implement its getter and setter. See this for a tutorial. After defining the user-control you can instantiate instances from its corresponding class. Also by global reference, I meant a variable at the form (or any parent control) level. To keep it simple we can add a reference of the selected thumbnail in the form that is going to hold the grid and thumbnails: MyThumbnailControl selectedThumb = null; or something like this in the body of the form.
Here is something, I just fixed you.
Create a C# project name CreateImageList and in the Form1 add the following 5 controls with their default name i.e. Panel1, PictureBox1, Label1, Button1, Button2:
How it works:
When the page load it create an imageList objects and load all .jpg images from a folder you provide
ImageList Images are set into the PictureBox control and when user clicks "Button1" the picturebox shows next image in ImageList and when user clicks "Button2" the PictureBox shows previous image from ImageList.
The Label1 shows the currentImage counter from the ImageList Arrage. If you want to write something specific, you can create an array of text and sync with your image counter.
When user click on PictureBox the a border is create to show Picture highlighted
When user Double Click on PictureBox a MessageBox appears shows DoubleClick event.
Now, you can use the following code:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.IO;
namespace CreateImageList
{
public partial class Form1 : Form
{
private int currentImage = 0;
protected Graphics myGraphics;
ImageList iPicList = new ImageList();
public Form1()
{
InitializeComponent();
DirectoryInfo dirImages = new DirectoryInfo("C:\\2012");
iPicList.ImageSize = new Size(255, 255);
iPicList.TransparentColor = Color.White;
myGraphics = Graphics.FromHwnd(panel1.Handle);
foreach (FileInfo file in dirImages.GetFiles())
{
if (file.Extension == ".jpg")
{
Image myImage = Image.FromFile(file.FullName);
iPicList.Images.Add(myImage);
}
}
if (iPicList.Images.Empty != true)
{
panel1.Refresh();
currentImage = 0;
// Draw the image in the panel.
iPicList.Draw(myGraphics, 1, 1, currentImage);
// Show the image in the PictureBox.
pictureBox1.Image = iPicList.Images[currentImage];
label1.Text = "Image #" + currentImage;
}
}
private void showImage(int imgIndex)
{
// Draw the image in the panel.
iPicList.Draw(myGraphics, 1, 1, currentImage);
// Show the image in the PictureBox.
pictureBox1.Image = iPicList.Images[currentImage];
label1.Text = "image #" + currentImage;
panel1.Refresh();
}
private void button1_Click(object sender, EventArgs e)
{
if (iPicList.Images.Count - 1 > currentImage)
{
currentImage++;
}
else
{
currentImage = 0;
}
showImage(currentImage);
}
private void button2_Click(object sender, EventArgs e)
{
if (iPicList.Images.Count - 1 >= currentImage)
{
if (currentImage == 0)
currentImage = iPicList.Images.Count-1;
else
currentImage--;
}
else
{
currentImage = iPicList.Images.Count;
}
showImage(currentImage);
}
private void pictureBox1_DoubleClick(object sender, EventArgs e)
{
MessageBox.Show("Picture Box Double clicked");
}
private void pictureBox1_Click(object sender, EventArgs e)
{
panel1.Refresh();
myGraphics.DrawRectangle(Pens.Black, 0, 0, iPicList.Images[currentImage].Width + 1, iPicList.Images[currentImage].Height + 1);
pictureBox1.Image = iPicList.Images[currentImage];
}
}
}
The changes you need are:
Change the Following folder to a place where you have lots of jpg:
DirectoryInfo dirImages = new DirectoryInfo("C:\\2012");
Also if you are dealing with other kind of images, make change here:
if (file.Extension == ".jpg") // Change it to your image type.
If you don't want to use the the buttons to go up and down, you have several other options to host PictureBox control in scrollable Panel or list or something else.