I want to create a listView that shows users nicknames for a chat program. For that I created a new class that inherits from listViewItem.
What i want to do is, depending on the length of the nickname scale my font size.
I have read lots of articles about scaling but ALL of them depend on a graphics object and i have no clue how i get one of those ??? i tried it with a label and there it would be from the paint event but listView doesnt have such an event? so how do i scale this font ?
Q:
How do I get the right fontsize that the Nickname will fit into a specified rectangle ?
EDIT: Forgot to say I'm completly new to anything with grafic stuff i only used the Designer and set some properties.
You should set OwnerDraw property of the ListView to true, add draw item event handler like this:
listView1.DrawItem += listView1_DrawItem;
And here is a simple implementation of what you want so you can play with and tune it up:
void listView1_DrawItem(object sender, DrawListViewItemEventArgs e)
{
float emSize = e.Item.Font.Size;
Font font = new Font(e.Item.Font.FontFamily, emSize);
while(e.Graphics.MeasureString(e.Item.Text, e.Item.Font).Width>e.Item.Bounds.Width)
{
emSize--;
font = new Font(e.Item.Font.FontFamily, emSize);
e.Item.Font = font;
}
e.DrawText();
}
You see that you need to change the font size and measure the string you want to display so it fits in the cell completely. Presuming that if your current font size doesn't fit, you want to make it smaller.
I marked #Nikola answer right because it explained a lot but in my case i needed something way simpler and thanks to #TaW i also got the problem with the Graphics solved here my code snippet
public static Font getNewFont(Font origFont, string text, float maxWidth, Graphics g)
{
float emSize = origFont.Size;
Font font = origFont;
while (g.MeasureString(text, font).Width > maxWidth)
{
emSize--;
font = new Font(origFont.FontFamily, emSize);
}
return font;
}
Related
In my C# WinForms application, I have a control in which I display some text to the user on screen. For time being, assume it is a TextBox.
My requirement is if the text does not fully fit within the displayed width of the control, I want to keep reducing the font size or compress the text in some other way to fit the displayed width of the control.
I understand in extreme situations, the text may not be readable at all. But that's fine.
Can I get a code example how to achieve this?
To measure the width of the font you'll have to determine it using TextRenderer. The following code illustrates how to achieve this, and to resize the font in the textbox.
var text = "Some unnecessarily long, long, long string.";
var size = default(SizeF);
// SizeF size; // Use this if you're on an older version of C# without default
do
{
using (var font = new Font(textBox1.Font.Name, textBox1.Font.SizeInPoints))
{
size = TextRenderer.MeasureText(text, font);
if (size.Width <= textBox1.Width)
textBox1.Text = text;
else
{
textBox1.Text = "Won't fit";
textBox1.Font = new Font(font.Name, font.SizeInPoints - 1f);
}
}
} while (size.Width > textBox1.Width);
You may want to adjust the by how much the font size decreases if it ends up too small for your liking.
I want to display a picture in another scaling mode in an UltraGridCell. The mode should scale the image to the cell height and clip the rest of the image from the right to fit into the cell. This is easy if I could just draw it myself as the EmbeddableImageRenderer does not allow me to set its scaling behaviour (I am not talking about MaintainAspectRatio as I still want to maintain the aspect ratio).
I tried it with the tutorial to embed any control in a cell. And it is working fine with the given example of a TrackBar (and in my tiny testing project also with a ProgressBar as RendererControl). But it appears not to work with columns that are displaying images.
As a DataSource I have a list of my own class with an Image property which is displayed in the grid. As Editor-/RendererControl I set two regular PictureBoxes.
Any suggestions to solve the main problem of scaling the image or to set any control to the picture column (that would then deal with the scaling)?
I can't see any reason why the UltraControlContainerEditor shouldn't work with an image column, provided that the control you are using has a property that takes an Image and that you specify the correct PropertyName on the editor. But that's probably not the most efficient approach, anyway.
A better approach would be to use a DrawFilter to draw the image yourself.
public class ImageScalingDrawFilter : IUIElementDrawFilter
{
bool IUIElementDrawFilter.DrawElement(DrawPhase drawPhase, ref UIElementDrawParams drawParams)
{
switch (drawPhase)
{
case DrawPhase.BeforeDrawImage:
ImageUIElement imageElement = (ImageUIElement)drawParams.Element;
Image image = imageElement.Image;
int availableHeight = drawParams.Element.RectInsideBorders.Height;
float ratio = (float)availableHeight / (float)image.Height;
float newHeight = image.Height * ratio;
float newWidth = image.Width * ratio;
Rectangle rect = new Rectangle(
imageElement.Rect.X,
imageElement.Rect.Y,
(int)(newWidth),
(int)(newHeight)
);
// Draw the scaled image.
drawParams.Graphics.DrawImage(image, rect);
// This tells the grid not to draw the image (since we've already drawn it).
return true;
}
return false;
}
DrawPhase IUIElementDrawFilter.GetPhasesToFilter(ref UIElementDrawParams drawParams)
{
UIElement element = drawParams.Element;
// Look for an ImageUIElement
if (element is ImageUIElement)
{
// Presumably, we only want to this images in cells
// and not every image in the entire grid, so make sure it's in a cell.
CellUIElement cellElement = element.GetAncestor(typeof(CellUIElement)) as CellUIElement;
if (null != cellElement)
{
// We could also limit this to a particular column or columns.
switch (cellElement.Cell.Column.Key)
{
case "Image":
return DrawPhase.BeforeDrawImage;
}
}
}
return DrawPhase.None;
}
}
You assign the DrawFilter to the grid like so:
private void Form1_Load(object sender, EventArgs e)
{
this.ultraGrid1.DrawFilter = new ImageScalingDrawFilter();
}
Is there a way I can set Font Height in Steema Teechart Graphics 3D?
The Closest I could find was tchart.graphics3d.fontheight , but it gets the font height , does not set it,
so is there a way I can set the font height?
Thank you so much
You cannot change only the FontHeight, because you are only allowed get the FontHeight or FontWidth to consult their values. Therefore, if you want change the size (height and width) of font you must assign a value to font size as do in next lines of code:
public Form1()
{
InitializeComponent();
InitializeChart();
}
private void InitializeChart()
{
tChart1.AfterDraw += new PaintChartEventHandler(tChart1_AfterDraw);
}
void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g)
{
g.Font.Size = 25;
g.TextOut(100, 150, "TeeChartFor.Net");
}
I hope will helps.
Thanks,
The Chart of TeeChart to default have a gradient in its background. If you want change the color, previously you must disable the gradient of backround. You can do something as next lines of code:
private void InitializeChart()
{
tChart1.Panel.Gradient.Visible = false;
tChart1.Panel.Color = Color.Aqua;
}
I hope will helps.
Thanks,
I want to report status of an operation in a WinForm application written in C#.
To make it more user-friendly, I want to show an icon on the left depending on the status.
Animated GIF during the process
Ok or Error icon depending on the result.
I wanted to use the native WinForms Label control which works well with animated GIFs and looks as standard as it can get.
My problem however is that text comes is written over the picture.
There does not seem to be any property to set a margin for the text.
I tried the most obvious thing, which is to prefix it with spaces, which works, except when the text wraps to the next line, as shown below.
I would prefer not spend too much time writing/testing/debugging derived control for this if possible...
I could put a quick and dirty user-control, with a picturebox on the left of a label, but it doesn't feel very clean.
Is there any trick to get around this quickly and elegantly, or can someone point me to a Label derived class supporting this that is relatively lightweight? (I had a look at CodeProject but couldn't find much).
Thank you.
A simple alternative is to use a Button instead of a Label, as shown below:
By using the following properties, you can style the Button to look just like a Label, whilst also having the option to keep the image and text aligned next to eachother:
FlatAppearance ↴
BorderSize = 0
MouseDownBackColor = Control
MouseOverBackColor = Control
FlatStyle = Flat
Image = [Your image]
ImageAlign = MiddleLeft
Text = [Your text]
TextAlign = MiddleLeft
TextImageRelation = ImageBeforeText
A simple way to achieve the desired effect; no user controls!
The quick-and-dirty usercontrol with an image and a separate label is your best option. Just add a public string property to set the label's text and you're pretty much done.
Here's a different solution that I find less hacky than the "styled button" approach. It also allows you to set the distance (spacing) between the image and the text.
class ImageLabel : Label
{
public ImageLabel()
{
ImageAlign = ContentAlignment.MiddleLeft;
}
private Image _image;
public new Image Image
{
get { return _image; }
set
{
const int spacing = 4;
if (_image != null)
Padding = new Padding(Padding.Left - spacing - _image.Width, Padding.Top, Padding.Right, Padding.Bottom);
if (value != null)
Padding = new Padding(Padding.Left + spacing + value.Width, Padding.Top, Padding.Right, Padding.Bottom);
_image = value;
}
}
protected override void OnPaint(PaintEventArgs e)
{
if (Image != null)
{
Rectangle r = CalcImageRenderBounds(Image, ClientRectangle, ImageAlign);
e.Graphics.DrawImage(Image, r);
}
base.OnPaint(e); // Paint text
}
}
One alternative to a UserControl would be to use a TableLayoutPanel with two columns and one row, placing the image control in one cell and the text control in the other.
Its an old question, but maybe someone will look here just like I got here...
You can use the Align on the Image and on the text:
label.TextAlign = ContentAlignment.MiddleRight;
label.ImageAlign = ContentAlignment.MiddleLeft;
nameoftextlabel.hidden=1
That should work.
This is a C# desktop application. The DrawStyle property of my ListBox is set to OwnerDrawFixed.
The problem: I override DrawItem to draw text in different fonts, and it works. But when I start resizing the form at the runtime, the selected item is drawn correctly, but the rest of them are not redrawn, causing text looking corrupt for unselected items.
Here's my code:
private void listDevices_DrawItem(object sender, DrawItemEventArgs e)
{
e.DrawBackground();
string textDevice = ((ListBox)sender).Items[e.Index].ToString();
e.Graphics.DrawString(textDevice,
new Font("Ariel", 15, FontStyle.Bold), new SolidBrush(Color.Black),
e.Bounds, StringFormat.GenericDefault);
// Figure out where to draw IP
StringFormat copy = new StringFormat(
StringFormatFlags.NoWrap |
StringFormatFlags.MeasureTrailingSpaces
);
copy.SetMeasurableCharacterRanges(new CharacterRange[] {new CharacterRange(0, textDevice.Length)});
Region[] regions = e.Graphics.MeasureCharacterRanges(
textDevice, new Font("Ariel", 15, FontStyle.Bold), e.Bounds, copy);
int width = (int)(regions[0].GetBounds(e.Graphics).Width);
Rectangle rect = e.Bounds;
rect.X += width;
rect.Width -= width;
// draw IP
e.Graphics.DrawString(" 255.255.255.255",
new Font("Courier New", 10), new SolidBrush(Color.DarkBlue),
rect, copy);
e.DrawFocusRectangle();
}
listDevices.Items.Add("Device001");
listDevices.Items.Add("Device002");
Also, the item that is drawn correctly (the selected one) is flickering on form resizing. No biggie, but if anyone know why.... tnx
Put the following code in the Resize event:
private void listDevices_Resize(object sender, EventArgs e) {
listDevices.Invalidate();
}
This should cause everything to be redrawn.
To stop the flickering, you need double buffering.
To do this, make a new class, derived from ListBox, and put the following in the constructor:
this.SetStyle(ControlStyles.OptimizedDoubleBuffer, true);
Or just paste this into a code file:
using System.Windows.Forms;
namespace Whatever {
public class DBListBox : ListBox {
public DBListBox(): base() {
this.DoubleBuffered = true;
// OR
// this.SetStyle(ControlStyles.OptimizedDoubleBuffer, true);
}
}
}
Replace "Whatever" with the namespace your project uses, or make it something more useful. AFter compiling, you should be able to add a DBListBox in the form designer.
I repro the problem. There are several mistakes in the code, the font name is "Arial", you should not adjust rect.Width, you forget to call Dispose() on the fonts, brushes and regions. But they don't explain the behavior. There's something wrong with the clipping area that prevents the text from being properly updated. I don't see where that occurs, the Graphics object state is okay.
Graphics.DrawString() is a very troubled method, you should really avoid it. All Windows Forms controls, including ListBox, use TextRenderer.DrawText(). That solves the problem when I use it. I know measuring is more difficult, you could work around that by displaying the IP address at a fixed offset. Looks better too, they'll line up in a column that way.
It flickers because you use e.DrawBackground(). That erases the existing text, you draw the text right back on it. I don't think double-buffering is going to fix that, you'd have to draw the entire item so you don't have to draw the background. Tricky if you can't get the exact size of the text with the large font, a workaround is to draw into a bitmap first.