Extending the width of a picturebox from the left side - c#

So I want to increase the width of a picturebox from the left side of the picturebox and have been unable to find a way to do this...
imgBeam1.Left += xChange;
imgBeam1.Width -= xChange; //I want this to move the width from the left side.
My plan is to move the picturebox to the right, while extending the width to the left.
Can anyone help?
Maybe there is a more creative way of doing this?
EDIT:
This was for a DBZ beam race / beam struggle game I was working on in my spare time, and in the beam struggle part of the game, the character of the right side of the form has a much nicer way of displaying the beam as I can move the width of the picturebox to the right, while moving the picturebox left. While with the character on the left side of the form, I can only extend the width to the right which just shows sections of the image at a time.
Because of how images are loaded in to a picturebox (from left to right with the leftside showing first) I'm not sure if I could get the same effect. And I cannot find a way to extend the left side of the pictureboxes width anyways.
But thankyou for your replys. I made this account today, and didn't think this would be too hard to explain, but it was. Maybe next time I will show images instead, as it's much easier to explain that way. Thanks!
EDIT 2:
-visual explanation

From what I understand your post is not really about changing the outer size of the PictureBox but about moving the Image inside it.
But this is not possible. All you can do is choose between the two SizeModes:
Normal will put the image to the top left.
Center will, yes, center it in the control.
So to make it look like it is moving or placed differently, e.g. aligned to the right you can use this workaround:
Add the PictureBox to a Panel.
Make the Panel as small as you had your PictureBox to make it act as a 'viewport'.
Make the Image larger, maybe even full sized, i.e. SizeMode Autosize.
Remove the Border from the PictureBox and add it to the Panel instead.
Keep the PictureBox Backcolor Transparent.
Now you can move the PictureBox inside the Panel and it will look as if only the Image is moving under the viewport..:
Here is the code to move it left and back right with the mouse :
Point mDown = Point.Empty;
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
mDown = e.Location;
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button.HasFlag(MouseButtons.Left))
pictureBox1.Left += e.X - mDown.X;
}
Note that the large PictureBox is nested inside the small Panel, not the other way around!
Of course animations or other layout changes are also possible..

Related

Difference between Canvas and Grid to Move, Resize, Rotate UIElements

I want to develop a editor that can add dynamically Controls and after to move, resize or rotate to build a window with this UIElements.
My question is who is better for a Container of this UIElements, a Grid or a Canvas?
Canvas are working in absolute position, maybe have better precision for transforming. But is less responsive when I will display the App in different screen resolutions? I doesn't know very well about the pros/cons from Grid or Canvas.
I made a example with a Canvas and Grid to move a UIElement with this code:
private void ui_MouseMove(object sender, MouseEventArgs e)
{
if (m_IsPressed)
{
UIElement ui = (UIElement)sender;
TranslateTransform transform = new TranslateTransform();
transform.X = Mouse.GetPosition(MyGridOrCanvas).X;
transform.Y = Mouse.GetPosition(MyGridOrCanvas).Y;
ui.RenderTransform = transform;
}
}
But with the Canvas or Grid, when I click the UIElement and without moving, the UIElement always moved x,y from my cursor. Maybe isn't the best way to do this. If you have also tutorials about how to build this features will help me too. I'm new with this stuff.
Thank you very much and greetings!
I'll just provide a short answer for this question as it is likely to be closed by the community here for being too subjective. I can see one close vote already.
So, in my opinion, the Canvas is a much better control to use for this purpose. For one reason, it does not have the considerable layout requirements of the Grid and so it is more efficient. The other main reason is that using the Canvas.Top and Canvas.Left properties to move the items is perfect... to move items in other Panels, you often have to make do with setting the Margin property instead, which is far from ideal.
As for your items moving when being clicked on... that's just a bug in your code doing that, it's not the normal behaviour - a control won't move on its own unless we tell it to.

Draw Border of Panel When it is being Active Scroll

I just got problem when i'm trying to make a panel border, firstly i have set my properties panel to be: "AutoScroll = true;"
then i put the border drawing codes in Panel event:
ControlPaint.DrawBorder(e.Graphics,
ClientRectangle,
Color.Black, 5,
ButtonBorderStyle.Solid,
Color.Black, 5, ButtonBorderStyle.Solid,
Color.Black, 5, ButtonBorderStyle.Solid,
Color.Black, 5, ButtonBorderStyle.Solid);
actually i still got a second problem and i will explain it all here.. I hope you don't mind.
well, the panel border will get some crash when the panel scroll is being active. take a look at the picture:
even i put
`e.Graphics.TranslateTransform(this.AutoScrollPosition.X, this.AutoScrollPosition.Y);`
it doesn't looks like a border panel because it just draw a rectangle inside panel when the scroll is being active. that's not what i expected, but i need a Border
i bet, the problem is the source code, that is not because it is not possible, take a look at System.Windows.Forms.Panel i think it is perfect panel although it simple.
please help me to solve this problem. this has made me confused
This is not going to work well, you are fighting a Windows system option named "Show window contents while dragging". It is turned on in all recent Windows versions and you cannot reasonably turn it off. What the option does is scroll the window content in an optimized way when you operate the scrollbar. It copies the window pixels by the scroll amount and asks for a repaint for the part of the window that got revealed by the scroll.
Trouble is, that also moved your painted border. So you'll see the black line in the bottom getting moved up as well. But it doesn't get erased because Windows asked only for a repaint of the part of the window that got revealed by the scroll. So it "smears". The top line just disappears, getting scroll off. To get this fixed, you need to repaint the entire window. Easy to do by implementing the Scroll event for the panel control:
private void panel1_Scroll(object sender, ScrollEventArgs e) {
panel1.Invalidate();
}
That fixes the problem, but you may still notice an artifact on slower machines. That black line is still getting moved up, to be quickly overpainted again by your Paint event handler. The "quickly" is the issue, if it is not that quickly then you'll still see that line move. The artifact is, erm, interesting, you'll see the line doing the pogo, jumping up and down. The human eye is very sensitive to motion like that, it was an evolutionary advantage to be able to be good at detecting the lion in the tall savanna grass.
Trying to keep objects stationary in scrolling window just doesn't work that well. You can monkey with the panel control and implement a message handler for WM_NCCALCSIZE to give the panel a non-client area but that's all rather painful.
The simple solution is to just have the Form draw a rectangle around the panel:
protected override void OnPaint(PaintEventArgs e) {
var rc = panel1.Bounds;
rc.Inflate(1, 1);
e.Graphics.DrawRectangle(Pens.Black, rc);
base.OnPaint(e);
}
Or easier yet, set the panel's BorderStyle.

c# drawing on the panel and scrolling the result

I have problem with showing a diagram which is too big to see on one panel.
I have to scrollbars which should change the point of view on the diagram, but when i want to scroll the picture, the shapes are moving on the different position, everything getting crushed.
it looks like this here link
when i show it,and like this here link when i try to look on the bottom of the graph
it looks like application drawing the shapes every time when i scroll the panel, and when i go on the bottom of picture the point on the top left corner still is (0,0) not (0,500)
I have algorithm, which giving value of location on the panel and nr id of object to the array, then i have the loop which drawing it, getting info from dictionary about the object and his position from array.
How this problem can be solved ?
Thx for any advice's
Edited
I dont want to draw it again i want to draw one big graph, something like this(link in the comment), but i know that user can make for example 50 objects(shapes) and that kind of big graph cant be seen on the small panel so we have to have a chance to scroll and see the bottom of grapf, left side or this side which he want.
I'll try to give more details about application.
When you lunch it, you see the control panel(form1), where you adding events/functions/xor/or every of this option have their own shape on the graph.
So user adds for example event with text, pressing the button add which creates the object and adding it to the collection. He can adds events/functions,xor/or as many as he wants.
Ok, when he adds everything what he wanted, and now he would like to see graph so he pressing the button "generate the diagram", now the application is showing the next windwow with panel and scrollbars. You can see the window in links.
In the second form after this line
private void panel1_Paint(object sender, PaintEventArgs e){
I have algorithm which is putting the coordinate values to table, then forech loop is taking from dictionary ( collection):
text which should be shown on diagram in the middle of shape,
value which determine a type of shape on the panel.
from arrays loop taking the coordinate values.
This how its work, I can also put a code in here when its needed.
The standard mistake is forgetting to offset your drawing by the scroll position. Use the panel's AutoScrollPosition property, like this:
void panel1_Paint(object sender, PaintEventArgs e) {
e.Graphics.TranslateTransform(panel1.AutoScrollPosition.X, panel1.AutoScrollPosition.Y);
e.Graphics.DrawLine(Pens.Black, 0, 0, 300, 2000);
}
The Panel control is in general pretty cranky about painting, it was designed to be a container control. You typically also want it double-buffered and to force a repaint when it is being resized. Setting the DoubleBuffered and ResizeRedraw properties requires deriving your own control from Panel.
It looks like application drawing the shapes every time when i scroll the panel
Why don't you erase the drawing area and draw the shapes again?
Maybe you can post a code snippet?

C# Image over another image

I have a picturebox with a fixed sized image (256x256) generated by the program. I have another smaller image as a resource. What I want to do is when my cursor is over the image and I hold down the mouse button, the smaller image "anchors" with the mouse pointer so it moves around with it. If I let go of the mouse button, the smaller image will stay in that position on top of the bigger image. The smaller image is basically a marker, something like an X or O.
I was thinking of having a second picturebox on top of the first picturebox but I can't make it transparent. Or redrawing the image with the smaller image on top of it and reloading the image into the picturebox, but I'm not sure how to do that and I think it's going to be pretty slow redrawing it each time I move the mouse.
So how can I have a marker image move around on top of a bigger image and have it stay there?
Create your control for this instead of using PictureBox. PictureBox should be used ONLY for fixed images on the form, nothing else.
Instead, derive your control from UserControl. Turn on double buffering for it. In OnPaint method, first draw your background picture, then your marker picture after it. Don't worry, it WON'T be slow and it WILL work as it should.
When you release the mouse, update background picture by drawing your marker picture on it.
Since every sentence here is a little discovery by itself, hope you'll have a good time coding your little game :)

Removing Windows' ugly Selection marker thing from Splitter in SpitContainer Control

I have a SplitContainer control, and the Splitter in the middle is very ugly. By setting the BackColor of the SplitContainer to (insert color here), then setting the BackColor of Panel1 and Panel2 to white, I can have my splitter looking nice. But by default, Windows puts the selection mark over the Splitter, even before it's selected.
How can I make sure that the selection mark never shows on the Splitter?
I think by "Selection Marker Crap", you mean the fuzzy line that indicates the control is selected. If you don't want this showing up, set some other control to be selected at startup. Something like:
Textbox1.Selected = true;
This should solve your issue if it is just one of it not being selected. However, this will come back if you select the item to resize something. In that case, you could put something in the mouse_up event to move the selection off of the control. That way, the user moves the splitter bar and then when they let go, the selection gets cleared off of the splitter.
Another way would be to make the splitter bar narrow enough that the gray fuzzy line doesn't show up. To do this, you could do the following (tested):
splitContainer1.BorderStyle = BorderStyle.FixedSingle;
splitContainer1.SplitterWidth = 1;
I experienced the same problem, and fixed it by setting TabStop to False in the Properties window for SplitContainer1.
This could annoy people who depend or insist on using the keyboard to operate every aspect of your form, but other than that it will work. Controls inside the SplitContainer will remain tab-able, just not the SplitContainer itself.
This code will move the focus from the splitContainer to TreeView shortly after moved.
private void splitContainer1_SplitterMoved(object sender, SplitterEventArgs e) {
if(this.splitContainer1.CanFocus) {
this.splitContainer1.ActiveControl = this.treeView1;
}
}
You could add an event handler to steal the focus from the container on MouseUp's... It's a little messy but it works. :)
I tried a lot to remove splitter but nothing work. I did some different why we need to use splitter for that we can use picture box control make it width (or) height depend upon your project set 5 or 3 .... after picture box mouse move event write code like...
picturebox property-cursor change the cursor type Hsplit its look like splitter
private void picturebox1_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)//this for mouse left click its work
{
//write you code here if you use panel set panel height or width it reaches...
Cursor.Position = new Point(e.X, e.Y); // this for mouse cursor position according your //project do some fine tune you will get its work...
}
its work because i tried lot for this and i itself found this method...
I set the TabStop to false and it went away.
Most simple solution i found/made - create a button, select it, and hide it.
All via code. there is not side effects or problems with this, place it in the forms load event.
Button DeSelectButton = new Button();
this.Controls.Add(DeSelectButton);
DeSelectButton.Select();
DeSelectButton.Visible = false;

Categories

Resources