I'm working on an application where I have a grid of buttons (can be various number of them). Atm I'm using a 4x4 Grid to place them and stretch them to size. The issue is that these buttons can be dragged around, and they should be hovering over the rest of the buttons while they are dragged. They can be also clicked, in which case they slowly hover over to another point on the screen.
The problem arises from the fact that Grid doesn't handle zIndex, and putting a canvas under the Grid wouldn't help. I'm not sure if having a canvas with absolute coordinates would work on different sized screens, and the buttons are also supposed to hover over other elements outside the grid as well (and the grid is in a pivot - the button has to hover over whatever is outside the pivot as well).
The question is if there is any way other than a canvas with zIndex, and if not, how can I achieve a proper Grid-like layout with a canvas.
UPDATE:
I'm using the following code to move the button:
private TranslateTransform dragTranslation = new TranslateTransform();
private void Button_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
if (dragTranslation.X + dragTranslation.Y > 100)
{
//ClickLock to avoid the tap event from firing
clickLock = true;
}
draggedButton.RenderTransform = dragTranslation;
dragTranslation.X += e.DeltaManipulation.Translation.X;
dragTranslation.Y += e.DeltaManipulation.Translation.Y;
}
Note that I've skipped parts such as reassigning dragTranslation in the ManipulationStarted event.
Related
I have a two Panel both the Panel are in different ScrollViewer, I need to process the synchronous scrolling without animation, if I scrolled the second Panel the first Panelalso need to scroll with same HorizontalOffset without animation.
I have used the ViewChaning event of 2nd ScrollViewer and update the view of 1st ScrollViewer with the same HorizontalOffset, without animation.
Its works perfectly when I scrolled using mouse, if I scroll using touch(panning) the animation is occurs.
Please refer the code below,
private void ScrollViewer2_ViewChanging(object sender, ScrollViewerViewChangingEventArgs e)
{
this.scrollViewer1.ChangeView(e.NextView.HorizontalOffset, e.NextView.VerticalOffset, null, true);
}
How can I resole this issue, any one suggest on this?
In the UserControl I made it is possible to add Rectangles by clicking. Those rectangles are saved in a List. Now I want to make it possible for the User to move those Rectangles that are drawn.
First I tried to add the MouseDown, MouseMove and MouseUp event to the Rectangle but that doesn't work because Drawing Rectangle is a Struct and not a control. I already did a Testproject and accomplished to move a button I put in in the UserControl by Designer. I tried with the code I got from Drag and Drop Function with Drawing Rectangle C# .net - Forms but this example isn't about Rectangles. It is about Controls and I don't know how to use this idea for Rectangles because
rectangle.MouseDown += delegate(object sender, MouseEventArgs e)
{
//do something
}
doesn't work. Any Ideas how to drag and drop Rectangles that are added dynamically?
You should add the MouseDown event to the UserControl. Then loop through the list and make a method to see if the coordinates are inside of a Rectangle. If it is, then hook and move it.
So you should add a bool value to, which is set to true inside the MouseDown event and set to false inside the MouseUp event. Then in the MouseMove event, check if the mouseDown value is true. If it is and a Rectangle was found, move it's position.
How do I implement scrolling for my Custom Control? My control is fully custom drawn and its height is variable, and a part of the control contains a menu so if there are many items in the control, I'll need to be able to put scroll bars there. I've not really been able to find any clues on how to do this. I did see something about ScrollableControl, but I'm still not sure if that's what I need.
Also, how will my control know when it needs to show the scroll bars? Because my control is fully custom drawn so there's no real "controls" in there it's just a bunch of pixels that are drawn onto it so it's not like I can just set AutoScroll to true and I can't do that anyway because it's not the main part of the control that needs scrolling, it's a particular location on the control that will need to have the scrollbars.
If your custom control inherits from the Panel control, you just set the size of the content yourself in the custom control by this setting:
this.AutoScrollMinSize = New Size(yourWidth, yourHeight);
If your control's ClientSize.Height is greater than yourHeight, you won't get any scrollbars. If it's less, then you get a scrollbar.
In your paint method, add this to the beginning:
protected override void OnPaint(PaintEventArgs e) {
e.Graphics.TranslateTransform(this.AutoScrollPosition.X,
this.AutoScrollPosition.Y);
Now everything you paint gets automatically transformed to the scrolling coordinates.
You have two options.
The good new is that it is possible and both are not really hard.
The bad new is that for one option you will have to adapt all your drawing code:
First make your Control, I use a Panel, to have Autoscroll=true;
Then you need to add one dummy control, I use another Panel, maybe like this, far enough to the right and bottom to force the ScrollBars to show:
public Form1()
{
InitializeComponent();
Panel panelDummy = new Panel();
panelDummy.Size = new Size(1,1);
panelDummy.Location = new Point(yourMaxX,yourMaxY);
panel1.Controls.Add(panelDummy);
}
And then you need to adapt your drawing code. Here is how:
private void panel1_Paint(object sender, PaintEventArgs e)
{
int xx = panel1.HorizontalScroll.Value;
int yy = panel1.VerticalScroll.Value;
e.Graphics.FillRectangle(Brushes.Wheat, new Rectangle(11 - xx, 22 - yy, 22, 311));
e.Graphics.FillRectangle(Brushes.RosyBrown, new Rectangle(11 - xx, 280 - yy, 22, 3));
}
private void panel1_Scroll(object sender, ScrollEventArgs e)
{
panel1.Invalidate();
}
I have added an Invalidate to the Scroll event to avoid messed up painting results.
The other option is simpler: Make your control large enough to hold all your drawn controls and the put it inside a Panel with AutoScroll=true; this will delegate the whole scrolling business to the containing Panel.
you can use aPanel with AutoScroll = true. After that, if you put any controls inside it, as long as their size is larger than the size of panel, the panel will automatically show scroll bars.. The trick can be used for any custom control asa well, as long as you place it inside a AutoScroll panel, and size it as large as you need it to be.
I've partially solved this problem by creating a custom control that inherits from Control and that is completely drawn in OnPaint. My solution so far is to use ScrollBarRenderer to draw my scroll buttons, then I define a Rectangle for the scrollable area. I then create an Image to draw my scrollable content onto, and use TranslateTransform Scroll that Image into position before using DrawImage to draw into the Scrollable Content Rectangle that I created. It's showing promise, although I haven't gotten it completely working yet since I have to handle all of the MouseOver and Click events on my own.
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.
I want to show a tooltip when hovering over a button and as long as the mouse is over the button the tooltip should follow the mouse. What is the correct way to achieve that?
When I add a MouseMove event that calls tooltip.Show(...) with the updated mouse position it flickers extremely, and also redraws the tooltip when the mouse rests. And if it is an OwnerDraw tooltip I can see the default system tooltip style "fighting" with the self-drawn tooltip.
Indeed, with .Net 2.0 the ToolTip object has been altered. Before 2.0, there were some inconsistency problems when the ToolTip text was changed while the ToolTip was active, or with some other situations.
Since 2.0, the Tooltip is hidden each time something happens what could affect the currently active Tooltip.
While this solved some problems, it now causes some events being fired right after e.g. a SetToolTip(), even if this function has been called from within this very event, resulting in an endless loop of ToolTip draw/hide until the mouse moves away from the ToolTip area.
My own workaround is to check whether the ToolTip is already the same and omitting the Set ToolTip() if so. (simply omitting the next event by a static flag as suggested above can cause problems as there is no guarantee that there will be a new event right after, e.g. if the mouse has just touched the ToolTip area and moved away already).
Also, using OnMouseHover just to display a Tooltip disables the internal timer functionality of the ToolTip component as well as causing many many unnecessary events and therefore wastes processor time. The Popup Event of the ToolTip component serves well as point of action.
In this special case, however, OnMouse Hover is necessary to track the mouse movement.
Anyways, altering the ToolTip position causes a complete redraw of the Tooltip and therefore flicker. This can be reduced for a motionless mouse by checking whether the mouse position has changed between two events.
Unfortunately, the ToolTip component has no way to change the position of the ToolTip adn is shown always relative to the current mouse position. So the only way to have it follow the mouse is to close and redraw it.
it MAY help to set the UseFading and/or UseAnimation properties to false so the flicker can be further reduced.
OK, this may be complete overkill, and probably not the best solution, but I think a fun little hack nonthless.
Basically, I'm drawing a ListView at the location of the mouse. Some code:
ListView v = new ListView();
public Form1()
{
InitializeComponent();
v.Items.Add("Foo");
v.Height = 30;
v.Width = 50;
this.button1.Controls.Add(v);
v.MouseMove += new MouseEventHandler(v_MouseMove);
v.BackColor = SystemColors.Info;
this.button1.MouseMove += new MouseEventHandler(button1_MouseMove);
}
void v_MouseMove(object sender, MouseEventArgs e)
{
v.Location = new Point(v.Location.X + e.Location.X, v.Location.Y + e.Location.Y);
}
void button1_MouseMove(object sender, MouseEventArgs e)
{
v.Location = e.Location;
}
I've noticed that when manually showing a tooltip with OnMouseHover, OnMouseMove gets called one more time after the tooltip is shown. As a hack, I've ignored the next OnMouseMove call immediately following the tooltip being shown (using a flag). Perhaps a similar phenomenon is occurring?