How to show the whole picture within a tableLayoutControl - c#

I have just started learning C# and Visual Studio trying to work both on books and on sample code.
I am aware that tis is not a very brilliant question, but this is the problem that I am trying to solve. I have a windows form and I need to show an image in a Picture box contained in a tableLayoutPanel. The simple problem is that the images I have to load could have several sizes and a typical image is not completely shown within the allocated space: only the area that fits the container is shown, the rest of the image is cutted off. I have to show the image in its entirety, i do not have to resize it. I have already set the autosize property, but this does not seems to work.
Here some code in the form.cs
string imageName = openFileDialog1.FileName; // Get the image name
// Read the image
try
{
img = ( Bitmap) Image .FromFile(imageName);
}
catch
{
MessageBox.Show("oooops" , Text, MessageBoxButtons.OK, MessageBoxIcon .Hand);
}
pictureBox1.Image = img; // show the image
and then in the private void InitializeComponent() found in the form.designer.cs:
this.flowLayoutPanel1 = new System.Windows.Forms.FlowLayoutPanel();
...
this.pictureBox1 = new System.Windows.Forms.PictureBox();
...
this.tableLayoutPanel1.Controls.Add(this.pictureBox1, 1, 1);
...
this.tableLayoutPanel1.Controls.Add(this.pictureBox1, 1, 1);
...
this.tableLayoutPanel1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 9.034863F));
this.tableLayoutPanel1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 2.388038F));
this.tableLayoutPanel1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 88.5771F));
this.tableLayoutPanel1.Size = new System.Drawing.Size(784, 762);
...
this.pictureBox1.SizeMode = System.Windows.Forms.PictureBoxSizeMode.AutoSize;
Have you any hint about how to show the whole image?
Even using slidbars would be ok, but notwhithstanding the fact that the container has autoscroll = true, nothing happens and the image is still truncated.
Thanks for any help

The autoscroll property in the tableLayout control manage the scrolling of the whole table, including all the child controls. When the image is too big to fit within the picture control box, the autoscroll = yes property show slidebars allowing to slide all the content packed in the table layout control, not the individual image cell. Picture box does not have an autoscroll property, because autoscroll is, as far as I understand, a container's property; to slide the image in its own assigned space an intermediate container should be used, I guess.
My question was not a good question. It is rooted in my confusion about the containment hierarchy and relevant properties, more than in a genuine lack of knowledge or notions. Well, there is always room to improve ...

Related

Stacking different elements in a Windows.Forms.Button

I am developing a windows forms application in c#. I am creating a large amount of buttons in loops, and I wish for both an image (icon), and text to be displayed on a button. I have experimented with alignment, but I require the image to be on the very top of the Button, and the text to be below the image. My current code is:
button1.Image = im;
button1.ImageAlign = ContentAlignment.TopCenter;
button1.Text = "CS: GO";
button1.TextAlign = ContentAlignment.MiddleCenter;
This produces this image, which is clearly not what I want:
I cannot resize the Button, as the text is user defined, and subject to change in length.
Try the following:
button1.TextAlign = ContentAlignment.BottomCenter;
if this doesn't fit your needs there's another Property:
button1.TextImageRelation = TextImageRelation.ImageAboveText;
if I am right this will override some of your alignments.

TextBlock Rendered On WriteableBitmap on Windows Phone isn't as crisp

I'm working with Windows Phone 8/C# Silverlight and using code similar to this to render text:
TextBlock drawStringInstance = new TextBlock();
drawStringInstance.Text = str;
drawStringInstance.Opacity = 1;
drawStringInstance.Measure(new Size(1000000, 1000000));
WriteableBitmap wb = new WriteableBitmap((int)drawStringInstance.ActualWidth, height);
wb.Render(drawStringInstance, null);
wb.Invalidate();
Notice that I don't save the image and draw it directly so there shouldn't be any saving artifacts. If I just place the text block I get much crisper text with less aliasing as such (left is the "good" rendering):
Is there something I can do to improve this or is this an inherent issue with the approach of WriteableBitmap.Render()?
I think you're not supposed to render elements that are not in the visual tree. In fact , your code does not render anything on my emulator.
Just add the textblock somewhere on the page (perhaps set the margin to -1000 so that it does not show) , then render it.

Resize PictureBox as resizing the form

I'm loading multiple images into a Panel (multiple PictureBoxes inside a Panel) and would like to resize the images as the windows form is resized.
Here is my code:
foreach (string filename in ofdmulti.FileNames){
picbox[i] = new PictureBox();
picbox[i].Size = new System.Drawing.Size(256, 256);
picbox[i].SizeMode = PictureBoxSizeMode.Zoom;
picbox[i].Dock = DockStyle.Fill;
i++;
}
But then I don't see the multiple images, just one and stretched fully, what may be wrong?
You have multiple issues with your code. First off, this line of code will ensure that you only see one PictureBox...likely the last one you added:
picbox[i].Dock = DockStyle.Fill;
Second, I don't see that you are setting the PictureBox Location, so they are all going to Point(0, 0), meaning they would overlap to some extent even regardless of the Dock setting.
If you are trying to get a nice arrangement, such as Tiled, then you could use a TableLayoutPanel. That would allow you to describe a grid pattern with the Rows and Columns and then add your PictureBox controls to the grid.
There are other options, of course, depending upon your goal.
Replace picturebox.Image with Your resized Image, and use sizemode.AutoSize!

WPF Dynamically place image within the content flow (image renders in middle of window)

I'm trying to dynamically place content with one of the items being an image. I can get the image to load to the grid, but while the labels all align nicely, the image appears in the middle of the screen. I don't believe I'm doing this right, I'm wondering if I should be using a list? But, I'm open for suggestions. Currently I'm writing the labels with enough left margin space to separate them, but when the image renders it appears in the middle of the window.
...
Uri imguri = new Uri("/MyName;Component/Resources/myimage.png", UriKind.RelativeOrAbsolute);
BitmapImage ni = new BitmapImage(imguri);
gridEvents.Children.Add(new Label { Content = "Travel:", Margin = new Thickness(300, 0, 0, 0), FontSize = 18 });
gridEvents.Children.Add(new Image() { Source = ni, Height = 15, Width = 15 });
...
I believe the problem is similar to how I'm forcing the labels position with a hard coded margin. I'm new to wpf, so if you know of a better way - I'm ready to learn.
Image appears in the middle of the grid because you didn't set any positioning properties, like margin or align. Position in the center of the grid is just default behavior.
Actually you'd better use ItemsControl or ListView. To better understand ItemsControl read this series of articles.

How do I make a form transparent while keeping the controls fully visible?

I would like to have a form in which the controls on the form are fully visible but the form itself is invisible. If I change the form's Opacity, this makes both the form and the controls on it semi-transparent, so this doesn't work.
I can't do this by setting the form's TransparencyKey, since I have a PictureBox on the form. If the image in the PictureBox happens to contain pixels that match the TransparencyKey, they appear as openings in the form, which I don't want.
TransparencyKey is the only way to get this. Pick the right color. Color.Fuchsia has a long tradition of being the color of choice, going back to the early days of Win32 development. Assault your eye with it to see its merits.
With the caveat that I've never used it, just ran across it once, thought "neat!" and moved on...
Look into System.Drawing.Drawing2D.GraphicsPath and setting the form's Region property. I added two buttons to the basic Windows forms application:
public Form1()
{
InitializeComponent();
Rectangle r1 = new Rectangle(button1.Location, button1.Size);
Rectangle r2 = new Rectangle(button2.Location, button2.Size);
GraphicsPath gp = new GraphicsPath();
gp.AddRectangle(r1);
gp.AddRectangle(r2);
this.Region = new Region(gp);
}
I've approximated the shape of the button with a rectangle; with this code, you can see the form background color at the buttons' corners. You'll need to work out the enclosing path for each of your controls and add them to the path individually. You'll need to take into account any offset introduced by the form title bar or border style.
Update: I did some investigation and have a couple of possible approaches for the problem:
Using the GraphicsPath method, set pictureBox.Visible to False if there is no image loaded.
When you load an image into the picture box, analyze the image to get a list of all the colors in it, then randomly generate one that isn't. Set the form's BackColor and TransparencyKey properties to match this new color, Hans Passant's answer.

Categories