I'm using unity 5.3 and I'm trying to change the Rendering Order of two overlayed cross platform controls which each reside in their own canvas.
In previous versions you could bring the window into focus using
GUI.FocusWindow(0);
However this does not work with the new system.
I've also tried modifying the order in the editor window which has done nothing.
Does anyone know how I can move a control to be on top of the other?
After doing some research I found the proper way to change the Canvas Rendering Order. There is a property in the Canvas for the Sort Order, which is really the render order.
.
Just as a note remember the controls you want to be on top should have a larger order than the control on bottom.
Order in the editor window should work here. Are you sure you're changing the order of elements inside one canvas element?
Note that the order of elements in the Canvas game object is the order everything is rendered in - so the last thing you have in canvas will be the last thing drawn, so it will be on top of everything.
Here's how it works:
This is demonstrated with Unity 5.3.4, with much older Unity it can be different (there was a change of the way how children were enumerated somewhere in 5.0 or 5.1 AFAIK).
Related
I'm looking to add a 'mapview' type control to my project.
It must have a 'main map' image with clickable transparent rectangles with borders and icons/images that can be animated when an event occurs.
What would be the best way of achieving this using windows forms in C#?
My first thought was to use a picture box with other items on top of it but I might run into problems with transparency etc.
Are there any libraries or anything out there that would be able to achieve this?
No need for a library, really:
I would go for a regular doublebuffered Panel subclass or even a PictureBox subclass for the board/map along with a movable Label or Panel subclass fpr the rectangles/items.
Important: Make sure the Labels are not just 'put on top' of the PictureBox but really nested!! (lbl.Parent = pbox). Then transparency will work just fine..
Since PictueBox is not a 'container', to nest a control in it you need code. But since you probably want to create them dynamically this is not an issue anyway.
This assumes that the rectangles are not overlapping! For overlapping controls transparency in winforms will not work.
The clearer you understand the 'animate when event' part the easier the rest of the code will be..
Since you mention 'animation', a word of warning: Simple animation, especially in reponse to a user action is doable; for more classy animation you may run into the limits of winforms.
I have an app where a user can manipulate around with elements chosen from a list, this is done by clicking the list element and the element is added to a canvas.
During a user testing of the app. People found it not to be intuitive since they wanted drag and drop. I have found several links describing how to implement this for WPF, i.e. not for windows Phone.
Trying to replicate the code from a msdn project i ended up with problems that I cannot get the same information about the elements from DragEventArgs.
So what I want to accomplish is user can drag an element in a listbox to a canvas. I have tried in the Viewmodel but missing information in DragEventArgs, like e.Data and e.Source. I have also tried in the xaml.cs file with no success.
Any help is appreciated.
Idea
create a copy of your element when it's selected,
add the copy as a child of your canvas,
set the copy's x,y coordinates to match the selected element's location,
CaptureMouse() on the copy.
Of course on Windows Phone Manipulation delta should be used to move it instead of capture mouse. I am able to drag an element around inside the Canvas after it was added by a Click event. But I can't seem to get drag from list to work. The bullet points above is a method I have and are trying but without any success so far.
There exists no samples or anything to accomplish this. I have contacted people at msdn, and Microsoft, without any success. I am trying to build a sample but so far no success.
Edit
So what I did to solve this issue: first the problem graphically
In words dragging an element from listbox to a Canvas. SO what I did I added handlers to the listbox like this, in the view:
MyLB.AddHandler(UIElement.ManipulationStartedEvent, new EventHandler<ManipulationStartedEventArgs>(MyLB_ManiStarted), true);
MyLB.AddHandler(UIElement.ManipulationDeltaEvent, new EventHandler<ManipulationDeltaEventArgs>(MyLB_ManiDelta), true);
MyLB.AddHandler(UIElement.ManipulationCompletedEvent, new EventHandler<ManipulationCompletedEventArgs>(MyLB_ManiCompleted), true);
Furthermore I add an extra canvas, here after referred to as Canvas2, that stretches behind the ListBox and Canvas.
The only difference between the two canvas' are the size, else they have the same itemscontrol but with different observablecollections binded to the canvas'.
In ManipulationStarted I find the element and add a new one to the observablecollection of Canvas2. Furthermore I Set the zindex of Canvas2 to be infront.
I then tap into the delta event to move the element around on Canvas2
in ManipulationCompleted I check if the element is inside the bounds of the first Canvas.
I then delete it from Canvas2, and move Canvas2 to the back, using Canvas.SetIndex(UIElement, zIndex)
Depending on the bounds check in (3.) I then add it to the first canvas. And everything works.
But I do not use the drop feature or the related events since it did not seem to help because of the missing dragable element. But this works :)
Silverlight on WP7 does not support drag and drop – at least not fully. It supports drag but not drop.
Anyways you can try something with the following example,
WP7 Drag & Drop Example
I have some graphical oriented Windows-Store-App application that logically composed from few layers. Each layer draw its own type of things.
For some reasons , I chose to represent each layer as a WPF canvas. So there are multiple canvases all logically share the same area. non of the canvas is nested in the other. They all on the same level in the "Document Outline" tree , under some cell of a grid object.
I would like input events to be routed only to one specific canvas but i don't know how to order WPF to do that. All input events always get to the same canvas and that's not the desired canvas.
I tried to manipulate the ZIndex and the IsHitTestVisible properties of the Canvases to achieve the desired result but it doesn't seem to change something in the behavior of the app. No matter what i do , the events always get to the same specific Canvas.
I tried to put the desired canvas on-top of all other canvases and i tried to turn off the hit test for all non-desired canvases. None of these action succeeded.
How do I tell the framework to route events to a canvas of my choise?
Even though they are all at the same "level", each canvas is still drawn on top of the other. The last one to get drawn is the one listed lowest in the XAML view. The one listed lowest is also the first one to have a chance at capturing input. Changing the ZIndex does change the order in which they're drawn but I don't believe it changes the order in which input is processed.
You should be able to stop all of the ones you don't want from processing input by setting their IsHitTestVisible property to false. If that didn't work, I'm interested in knowing which events are still making it through.
I am using C#, Silverlight, WP7.
I have been going over Metro Grid Helper (see this link) as I'm also interested in doing an overlay on an existing app. Basically I want to highlight an area, which would add a Rectangle on the overlay.
The difference is that I would like the overlay to scroll with the page, so that the Rectangle would stay in place over an item (like a TextBlock) underneath. And I am confused as to how to do it.
Any suggestions as to what methods or properties or events I should look into for this?
Thanks in advance.
As I am still learning how everything works in Silverlight, I figured this one out today.
The MetroGridHelper class that is linked in the original question adds the overlay objects to be children of the main Grid of the page. This means that no matter what the other controls are for the application (like a Pivot, Panorama, or ScrollViewer), the overlay objects will not move.
Thus, to get the objects to scroll (or swipe with a Pivot or Panorama), the objects need to be the children of the control. So inside the main Grid, look for the control and make that the parent of your objects.
As my first WPF project, I am attempting to build an application to play a card game similar to Magic the Gathering. It is not clear to me how to lay out the main play area. You can see some examples that are similar to what I am attempting by looking at example 1 or example 2. The chat/info areas on the right would be separate user controls.
The cards must maintain their aspect ratios, and each play area would start with 10 columns and two rows of cards. As more cards are played, the number of columns and/or rows may change. Each player area may have a different number of columns and/or rows. Cards may overlap, and may be placed sideways (tapped). Cards in all areas should be the same size (although they may be cropped in some areas). Cards do not need to lie exactly on the grid (they do not necessarily snap-to-grid).
When the user hovers the mouse over a card, it should expand to a significantly larger size using an animation. A card in one player area may overflow into the other player's area when expanded (but only as long as the mouse hovers).
Given these requirements, I am tempted to use one large user control derived from Canvas with image objects for each card (along with other shapes to delineate the areas). This implies that I will be doing a lot of work during the OnRenderSizeChanged event to position the child items within the canvas (manual layout).
Using a grid does not seem feasible to me, due to the free-form placement and overlap.
Decomposing the play area into smaller user controls would leverage the WPF layout capabilities, but it seems like decomposition would prevent the cards from expanding into adjacent user controls during the mouse-over, so that doesn't seem feasible either.
Is there a better alternative to one large canvas-based control? It seems wrong to be doing manual layout in WPF, but I cannot see an alternative.
This sounds like a great scenario for Composite Application ala Prism. It provides solid framework for implementing regions, modules, sending message between modules etc... From looking at your screen captures, developing a shell with different regions and dropping modules into them would probably greatly benefit your layout. As for the cards themselves, perhaps they could be modules as well?
Check out:
http://msdn.microsoft.com/en-us/library/ff649780.aspx
Particualy good examples come with the download package including a stock market like application and event aggregator example.
You said:
Decomposing the play area into smaller user controls would leverage the WPF layout capabilities, but it seems like decomposition would prevent the cards from expanding into adjacent user controls during the mouse-over, so that doesn't seem feasible either.
But this is not correct. Decomposition is absolutely the right approach to take, and this would not prevent the cards from expanding into adjacent user controls. The reason being that you can use a RenderTransform rather than a LayoutTransform. See this example, by Charles Petzold, or this article, to visualize the difference. Because a RenderTransform is applied after the layout has already occurred, your cards would be able to expand outside their bounds.
Given that decomposition is the right approach, I would arrange your various card collections into a Grid, with each collection being an ItemsControl. The ItemsControl should bind its ItemsSource property to some collection, and then you can provide a custom ItemTemplate that would display the image and any other information. I would be hesitant to use a Canvas, as this would restrict you to hard-coding the positions for the cards (which is a very WinForms-like solution for a problem that can be far more elegantly solved). Take advantage of WPF's fantastic layout engine and use nested grids and items controls to create a dynamic layout. This will ensure that your game board looks good at any resolution and when stretched to various sizes.
I recommend you take a look at this guys project . In java I know but if I was to go the route of building a card game. That would be what I would go off of.
A lot of canvases inside of a grid could help you here, the canvas will allow the content to render outside of its bounds, as long as you turn ClipToBounds to false, and you will be given much more control over exact placement of the cards than with other schemes. You will also get the powerful functionality of a grid control, allowing you to add and remove columns and rows as needed (though you will also have to dynamically add and remove canvasses, though this isn't too difficult.
If you're worried about the contents of your "Card" moving around when the box is rescaled, surround it in a viewbox. It will manage all your scaling for you, and ensures your card uses as much real estate as it can get. Alternatively you could use a RenderTransform, but a lot of these might slow your program down (Experts: does the viewbox operate using RenderTransforms? If so this point is moot)
To ensure the cards maintain their aspect ratios make sure each Image's Stretch attribute is set to "Uniform", making them all keep the same size could be done by designating a master card, and binding heights and widths of all subsequent cards to this original card, though that is a little messy and doesn't allow the cards to expand. Another solution is to set a single size for each card manually, animating this when you want to expand or shrink.