Distorted label text when resizing - c#

I have a dynamic window with labels on it. The window is a HUD and changes size depending on its parent window. However, one of the labels becomes distorted when resized.
The font of the labels are resized according to the screen size like so:
float fontSize = this.Width / 128 /getScalingFactor();
and the scaling factor is calculated as follows:
//Gets the scaling factor of the current dpi settings
protected float getScalingFactor()
{
Graphics g = Graphics.FromHwnd(IntPtr.Zero);
IntPtr desktop = g.GetHdc();
int LogicalScreenHeight = GetDeviceCaps(desktop, (int)DeviceCap.VERTRES);
int PhysicalScreenHeight = GetDeviceCaps(desktop, (int)DeviceCap.DESKTOPVERTRES);
int logpixelsy = GetDeviceCaps(desktop, (int)DeviceCap.LOGPIXELSY);
float screenScalingFactor = (float)PhysicalScreenHeight / (float)LogicalScreenHeight;
float dpiScalingFactor = (float)logpixelsy / (float)96;
return dpiScalingFactor; // 1.25 = 125%
//return screenScalingFactor;
}
And the designer code for the labels. There are labels that holds numbers as well and they are using identical settings. However, they don't get distorted but the username label does.
this.labelUsername.AutoSize = true;
this.tableLayoutPanel1.SetColumnSpan(this.labelUsername, 2);
this.labelUsername.Font = new System.Drawing.Font("Arial", 8.25F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));
this.labelUsername.ForeColor = System.Drawing.Color.White;
this.labelUsername.Location = new System.Drawing.Point(3, 0);
this.labelUsername.Name = "labelUsername";
this.labelUsername.Size = new System.Drawing.Size(56, 14);
this.labelUsername.TabIndex = 3;
this.labelUsername.Text = "Username";
this.labelUsername.TextAlign = System.Drawing.ContentAlignment.MiddleLeft;
I've tried changing some numbers of the font size and scaling factor. I've tried changing some of the settings in the designer code as well. Unfortunately no success so far.
Maybe someone recognize the issue and can point me to what causes this. I'm assuming there is some mis-match with the label and window DPI perhaps. But that doesn't explain why the numbers doesn't get the same problem.

First a clarification. I'm building on a open source project which I'm not 100% familiar with.
So after poking around some more I realized that there is another function which also controls the HUD colors. Unless I added a forecolor to my label there as well, I got that distorted looking text.
I'm assuming that this method is called everytime the window is resizing and when my label wasn't updated with a color there, it got a transparent color. However, because the forecolor had been set at startup it showed as a border around the transparent text because it wasn't resized.

Related

Fake multi-monitor fullscreen in monogame: form can't be big enough

I run a triple-monitor setup and I am working on a graphics demo in MonoGame that I decided (heck why not? let's give it the ability to maximize across all displays!) so I used this code:
graphics.IsFullScreen = false;
graphics.ApplyChanges();
//get dimensions of box that will cover all displays and set window to it.
int xPos = System.Windows.Forms.Screen.AllScreens.OrderBy(x => x.Bounds.X).Select(x => x.Bounds.X).First();
int yPos = System.Windows.Forms.Screen.AllScreens.OrderBy(y => y.Bounds.Y).Select(y => y.Bounds.Y).First();
form.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
form.Location = new System.Drawing.Point(xPos, yPos);
int xWidth = System.Windows.Forms.Screen.AllScreens.OrderByDescending(x => x.Bounds.X).Select(x => x.Bounds.X + x.Bounds.Width).First() - xPos;
int yHeight = System.Windows.Forms.Screen.AllScreens.OrderByDescending(y => y.Bounds.Y).Select(y => y.Bounds.Y + y.Bounds.Height).First() - yPos;
form.MaximumSize = new System.Drawing.Size(0, 0);
form.Width = xWidth;
form.Height = yHeight;
// graphics.PreferredBackBufferWidth = xWidth;
// graphics.PreferredBackBufferHeight = yHeight;
graphics.ApplyChanges();
Properties.Settings.Default.FakeFullScreen = true;
}
and of course a 2nd function to undo it.
This worked fine when I had one of my monitors set above the others for testing, but when I set windows layout to place them all side-by-side (giving a resolution of 5760x1080) I was throwing an invalid parameter error on the graphics.ApplyChanges(). So I commented out the graphics code and set the form width manually and discovered that evidently I am not allowed to have a form wider than 4096 pixels.
Is there a way around this? I am open to all suggestions, including having more than one window side-by-side to draw to, but I would need some code to show me how to target a 2nd form.
Please and thank you.
This is a DirectX 9/Windows Phone 7 limitation of texture sizes limited to 4096 x 4096 by the use of the "Reach Graphics Profile".
The final displayed image is a single texture of the composite of all spritebatches, the size cannot exceed the maximum texture size.
To correct the issue:
Make sure your video card supports larger textures: run dxdiag.exe (most modern video cards do, given enough memory).
Enable the "hidef" profile to allow full DX9, DX10, and DX11 modes.
To enable "Hidef", modify your Game1.cs constructor use this code:
public Game1()
{
graphics = new GraphicsDeviceManager(this);
Content.RootDirectory = "Content";
graphics.GraphicsProfile = GraphicsProfile.HiDef;
graphics.ApplyChanges();
// any additional code goes here
}
The alternative is to use OpenGL, which ignores the graphics profile and uses the optimal version for your video card.

Graphis.DrawString always uses the default font

I have a project in which I create an image with rotated text around an invisible circle.
The drawing in itself is working just fine. However, it seems that no matter the font I use, I always get the same result, which is I assume some low quality default font.
Here is the code :
Bitmap objBmpImage = new Bitmap(1000, 1000);
System.Drawing.Text.InstalledFontCollection installedFontCollection = new System.Drawing.Text.InstalledFontCollection();
FontFamily[] fontFamilies = installedFontCollection.Families;
System.Drawing.Font objFont = new System.Drawing.Font(fontFamilies.Where(x => x.Name == "Arial").FirstOrDefault(),10);
Graphics objGraphics = Graphics.FromImage(objBmpImage);
objGraphics.Clear(Color.Transparent);
float angle = (float)360.0 / (float)competences.Count();
objGraphics.TranslateTransform(500, 450);
objGraphics.RotateTransform(-90 - (angle / 3));
int nbComptetence = competences.Count();
int indexCompetence = 0;
foreach (T_Ref_Competence competence in competences)
{
byte r, g, b;
HexToInt(competence.T_Ref_CompetenceNiveau2.T_Ref_CompetenceNiveau1.Couleur, out r, out g, out b);
Brush brush = new System.Drawing.SolidBrush(Color.FromArgb(255,r,g,b));
if (indexCompetence * 2 < nbComptetence)
{
objGraphics.DrawString(competence.Nom, objFont, brush, 255, 0);
objGraphics.RotateTransform(angle);
}
else
{
objGraphics.RotateTransform(180);
objGraphics.RotateTransform(angle/2);
float textSize = objGraphics.MeasureString(competence.Nom, objFont).Width;
objGraphics.DrawString(competence.Nom, objFont, brush, -253 - textSize, 0);
objGraphics.RotateTransform(angle);
objGraphics.RotateTransform(-180);
objGraphics.RotateTransform(-angle / 2);
}
indexCompetence++;
}
I get the font using the installed families like this
System.Drawing.Text.InstalledFontCollection installedFontCollection = new System.Drawing.Text.InstalledFontCollection();
FontFamily[] fontFamilies = installedFontCollection.Families;
System.Drawing.Font objFont = new System.Drawing.Font(fontFamilies.Where(x => x.Name == "Arial").FirstOrDefault(),10);
I tried using other font but the result is always the same. Is there anything I am missing ? If not, what could be the reason ?
Thanks,
EDIT : To answer the question, what is it that I want exactly, consider this :
This image is a screenshot of a web site I am making. The chart in the middle was generated using charts.js, but its limitation force me to draw the text as a background image. It actually takes most of my screen so it can't really get much bigger than this. As you can see, the text font is pretty blurry and I would simply want it to be easier to read. I though the font was the problem, but I don't really know.
I am not really familiar with the whole image drawing part of C#, so if there are is better way to draw my text (which can change depending of many variables), I will gladly try other things.
Option 1: change text rendering
objGraphics.TextRenderingHint = TextRenderingHint.SingleBitPerPixel
Option 2: change the mode of anti aliasing
objGraphics.InterpolationMode=InterpolationMode.NearestNeighbor;
Option 3: change the DPI of the image
You'll get the best result if you scale the input image and then draw the text in higher DPI.
The default DPI for a Bitmap are 96. Probably the JS library exported with that setting.
If you want a smoother rendering of the font, you need to increase the DPI, e.g.
objBmpImage.SetResolution(1200,1200);
If you do so, you probably need to increase the number of pixels your Bitmap has.
If the "ugly" text just fitted the 1000x1000 picture, you now need 1000*1200/96=12500 pixels.
Before the change (using Arial 10 pt):
After the change (still using Arial 10 pt):
Note that the size in centimeters doesn't change. So it will still print well.

WinForms Button: Autosize Maximumsize

I want to add Buttons to a FlowLayoutPanel. The Buttons might contain longer texts with spaces between the words. The Buttons are Autosize=true and AutoSizeMode = AutoSizeMode.GrowAndShrink. Further more I set the MaximumSize property to (maxwidth,0). maxwidth is the width of the panel. So the button does not grow too wide.
What I see is, that the widht of the Button is limited by the MaximumSize property, but when text wrapping occurs, the Button's height doesn't autosize to the height of the wrapped text. Is there a solution to that problem?
I also tried this manually sizing the button like this:
using (Graphics cg = this.CreateGraphics()) {
SizeF size = cg.MeasureString(button.Text, button.Font, 200);
button.Width = (int)size.Width+20;
button.Height = (int)size.Height+20;
button.Text = someLongTextWithSpaces;
}
But please note that I added 20 to the calculated size. It's working, but is there a proper way to determin this additional size? Maybe 2x Padding + ?????
A few hours later...
I came to this version which seems to work quite fine.
using (Graphics cg = this.CreateGraphics()) {
var fmt = TextFormatFlags.HorizontalCenter | TextFormatFlags.VerticalCenter | TextFormatFlags.WordBreak;
var prop = new Size(tableLayoutPanel1.Width - 20, 0);
var size = TextRenderer.MeasureText(button.Text, button.Font, prop, fmt);
int border = button.Height - button.Font.Height;
button.Width = (int)size.Width + border;
button.Height = (int)size.Height + border;
button.Text = someLongTextWithSpaces;
}
It seems that the initial button height is borders + the height the font. So I calculated the border subtracting button.Height-button.font.Height.
According to Hans, I now use the TextRenderer.MeasureText. I tested it without enabling VisualStyles and it worked fine. Any comments on that?
There is a proper way, but it isn't exactly very subtle. Reverse-engineering it from the ButtonRenderer class source code, the Winforms class that draws the button text, you must use the TextRenderer class to measure the text. And you must use the VisualStyleRenderer.GetBackgroundContentRectangle() method to obtain the effective drawing bounds. Note that it is smaller than the button's Size because of the border and a margin that depends on the selected visual style.
Non-trivial problems are mapping a calculated content rectangle back to the outer button size and dealing with old machines that don't have visual styles enabled. Sample code that appeared to arrive at the correct size:
private static void SetButtonSize(Graphics gr, Button button) {
VisualStyleElement ButtonElement = VisualStyleElement.Button.PushButton.Normal;
var visualStyleRenderer = new VisualStyleRenderer(ButtonElement.ClassName, ButtonElement.Part, 0);
var bounds = visualStyleRenderer.GetBackgroundContentRectangle(gr, button.Bounds);
var margin = button.Height - bounds.Height;
var fmt = TextFormatFlags.HorizontalCenter | TextFormatFlags.VerticalCenter | TextFormatFlags.WordBreak;
var prop = new Size(bounds.Width, 0);
var size = TextRenderer.MeasureText(button.Text, button.Font, prop, fmt);
button.ClientSize = new Size(button.ClientSize.Width, size.Height - margin);
}
protected override void OnLoad(EventArgs e) {
using (var gr = this.CreateGraphics()) {
SetButtonSize(gr, this.button1);
}
base.OnLoad(e);
}
Not extensively tested for corner cases, can't say I recommend this.
It seems that the initial button height is borders + the height the font. So I calculated the border subtracting button.Height-button.font.Height. (See the last block of my original post)
This also works with VisualStyles enabled/disabled.
You should control the line breaks by adding newline characters in the text. Automatic text wrapping won't work with spaces alone:
button1.Text = "123232131232\r\nfgfdgfdgdfgdfgdf\r\nASDSADSDASD";
Or :
button1.Text = "123232131232" + Environment.NewLine +
"fgfdgfdgdfgdfgdf" + Environment.NewLine + "ASDSADSDASD";
If you'd rather get the automatic wrapping you could try to use TextMeasure to determine the height needed for the text and then set the button's height accordingly but that may need some extra attention..
But I suggest to consider using Labels instead. For a Label the wrapping works out of the box.. Huge Buttons with varying sizes are non-standard UI elements.

c# winform screen resolution

I have a C# WinForms application and when I give the executable to different users the application displays in different sizes (based on their screen resolution). Some of the parts of the application can't be seen.
how can I set absolute 1280X800 for my forms and make sure that the form size will not be changed whatever resolution is!
You can use Control.ScaleControl and Control.Scale
private void MainForm_Load( object sender, EventArgs e )
{
float width_ratio = (Screen.PrimaryScreen.Bounds.Width / 1280);
float heigh_ratio = (Screen.PrimaryScreen.Bounds.Height / 800f);
SizeF scale = new SizeF(width_ratio, heigh_ratio);
this.Scale(scale);
//And for font size
foreach (Control control in this.Controls)
{
control.Font = new Font("Microsoft Sans Serif", c.Font.SizeInPoints * heigh_ratio * width_ratio);
}
}
Hope this helps.
Use the MaximumSize property of the form.
form.MaximumSize = new Size(1280, 800);
You can also set a MinimumSize if you don't want the user to make it smaller than a desired size.
You can instead design the GUI so it scrolls up and down more easily.You can make use of the following
Layout Managers
Docking
Anchors
The property
Screen.PrimaryScreen.WorkingArea
is very useful for form sizing and positioning. For example this code:
this.Width = Screen.PrimaryScreen.WorkingArea.Width/2;
this.Height = Screen.PrimaryScreen.WorkingArea.Height/2;
this.Top = (Screen.PrimaryScreen.WorkingArea.Top + Screen.PrimaryScreen.WorkingArea.Height)/4;
this.Left = (Screen.PrimaryScreen.WorkingArea.Left + Screen.PrimaryScreen.WorkingArea.Width)/4;
will place the form in which it is executed in the middle of the screen and size it to half the screen.
The WorkingArea var is used to exclude stuff like the task bar and other docked items on the desktop when calculating the size of the screen.
Hope this helps.

Get drawing area from PictureBox

I've got an issue with a PictureBox being different sizes between different resolutions.
I have an image which I need to fit into that PictureBox, but I need to know the drawing size of it since I need to do the resize myself (otherwise the system was just way too slow, and I decided to do the resizing manually, which works fine if I know the resolution needed).
I tried PictureBox.Height / Width, and PictureBox.ClientRectangle.Height / Width, but that values are the same for all resolutions. How do I manage to get the actual drawing size?
The initialization code:
//
// PicboxRed
//
this.PicboxRed.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom)
| System.Windows.Forms.AnchorStyles.Left)
| System.Windows.Forms.AnchorStyles.Right)));
this.PicboxRed.BackColor = System.Drawing.Color.DimGray;
this.PicboxRed.BackgroundImageLayout = System.Windows.Forms.ImageLayout.Center;
this.PicboxRed.BorderStyle = System.Windows.Forms.BorderStyle.Fixed3D;
this.PicboxRed.Location = new System.Drawing.Point(19, 92);
this.PicboxRed.Margin = new System.Windows.Forms.Padding(4, 4, 4, 4);
this.PicboxRed.Name = "PicboxRed";
this.PicboxRed.Size = new System.Drawing.Size(852, 840);
this.PicboxRed.SizeMode = System.Windows.Forms.PictureBoxSizeMode.Normal;
this.PicboxRed.TabIndex = 9;
this.PicboxRed.TabStop = false;
this.PicboxRed.Click += new System.EventHandler(this.PicboxRed_Click);
this.PicboxRed.Paint += new System.Windows.Forms.PaintEventHandler(this.Picbox_Paint);
I understand that this has to do with the Anchors being set, but this allows the PictureBox being well seen with different resolutions. How do I grab that real drawing area?
The ClientSize property tells you how large it is. The ClientSizeChanged event tells you when it changes for any reason, including automatic scaling due to the form's AutoScaleMode property.
I tried PictureBox.Height / Width, and PictureBox.ClientRectangle.Height / Width, but that values are the same for all resolutions.
I think you are looking for dpi settings:
int currentDPI = 0;
using (Graphics g = this.CreateGraphics())
{
currentDPI = (int)g.DpiX;
}
This value should change on computers with different resolution and dpi settings.
Or maybe you are interesting in getting the current screen resolution. They might help:
Rectangle resolution = Screen.PrimaryScreen.Bounds;

Categories