Develop Reference

Windows Phone Grid zIndex

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.

How do I implement scrolling for a Custom Control?

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.

How to move C# form legend with mouse?

I am creating a plotting program and I was wondering how to move a chart's legend with the mouse? So you would click on the legend and then you could move it anywhere inside the chart area.

Using manual double-buffering of the chart, draw the legend at the current mouse position (perhaps + (15,15)) on the back-buffer just prior to drawing the back buffer to the screen. You can also set an Alpha to make the legend semi-transparent until the user drops it.

You can create a little form without borders to build your legend or use a ToolTip item. Then you could move with mouseMove event:
private void frmMain_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button = System.Windows.Forms.MouseButtons.Left)
ChangeLegendPosition(e.X, e.Y);
}
Where ChangeLegendPosition is your function that updates your form/tooltip position.

How can I make the rectangles clickable, C#

The code can generate rectangles (Rectangle rectangle) at runtime. The position of rectangles may change according to users' choices.
I want to add code in the method where it creates rectangles to make the rectangles clickable. And after user clicking the rectangle, there will be a new window to show content just like text.

You can use Contains method of the Rectangle object.
private Rectangle _myRectangle;
private void Form1_MouseDown(object sender, MouseEventArgs e)
{
if (this._myRectangle.Contains(e.Location))
{
}
}

Create a label control with the border property and transaparent background(so that it will look as rectangle) and add click event handler for each label you add. It will be good if you create your own Rectangle control by deriving from Label class or you can create your own control(Many other solutions).

I would consider handling the click event on the window itself (or whatever your "background" control is), getting its coordinates, and comparing those to the known locations/sizes of your rectangles.

How to create Transparent panel in c#.Net

I have a Panel on windows Form with few controls inside panel,
Can i make panel completely transparent.
(It should give the feel that controls are placed directly on Form)

If you go to the BackColor property, and change the Selector to "Web" the first choice is Transparent (at least it is in my VB IDE). I believe that the BackColor of the Panel would inherit the color of the component it is on.

I assume it is WinForms app.
Try this in Form.Load event:
private void Form1_Load_1(object sender, EventArgs e)
{
panel1.BackColor = Color.FromArgb(0, 0, 0, 0);
}
where panel1 is the panel you want to have transparent.
It will make the color transparent. You can have other controls on the panel.