I am trying to make a WPF application in which there is a drag able toolbar on the screen through which user can select different type of tools and use it on canvas. Also can someone tell me how to make a transparent canvas. A good example would be from this picture in which there is drag able toolbar on right side of the picture. And the user can also work on any window he wants. I am new to WPF and I am trying to find a solution to my problem for quite a while now. Can someone guide me in the right direction...
Background DP default value is null. When a Background is set to null the displayed Color is White and mouse interactions don't work. You need to set Canvas's, ListBox's and ListBoxItem's Background to Transparent to see the Background of the Parent Control
<Canvas Background="Transparent"/>
Rather than a toolbar, think of that as a window.
I would take a look at avalondock.
A transparent canvas:
<Canvas Background="Transparent"
As an aside, this is a couple of steps on from wpf beginner level.
If you take a look at this:
https://imgur.com/4n7vH8k
The user is designing a game scenario. They drag units out the panel on the left ( it's a treeview ) onto the canvas on the right. Only this is not just a plain canvas, it's an itemscontrol with a canvas as the itemspresenter. That allows me to template out the units from a collection of unit view models. It's using the mvvm pattern.
If you've not come across this technique it's a bit strange. Here's a couple of samples to take a look at which templates out different viewmodels into different UI objects. https://1drv.ms/u/s!AmPvL3r385QhgooJ94uO6PopIDs4lQ
https://1drv.ms/u/s!AmPvL3r385QhgooLcGrZOSwFswa-Dg
The datatype is used to decide what you get in the view for what viewmodel.
You have a bit of a complication in that you decided you want a dockable panel usable in multiple windows. Maybe that's not a must have.
Drag drop in my app isn't actually drag drop and relies on an odd aspect of a canvas. They don't clip, so you can add something to a canvas but have it positioned off the canvas.
As you start dragging a unit, it's viewmodel is added to the collection bound to my units itemscontrol. That templates it into the canvas as a piece. I work out the location compared to the canvas, so it'll have a negative X aspect which I bind to Canvas.Left.
Each unit is inside a thumb. A thumb is the rectangle you drag up and down on or side to side on a slider. They are designed for dragging. This way dragging is smooth and I can easily have a unit under the cursor that's being dragged.
Related
I am making an app for the Windows store (xaml/c#), in this app i create a list of properties of a file. One properties is the file path, this is always too long. my solution would be to make this side scrolling when this textblock is selected.
the text would start to scroll when selected to make all the information readable. (ticker bar)
I can’t find a property to achieve this, and I find it difficult to make a custom function for this. Can you help me?
I'd reconsider the idea. I had the idea many times and it was always rejected by designers. I think animating text is likely to be more annoying than clipped text. A better way might be to either wrap it in place or if you are in a list with limited item height - only show the full text after it was tapped - either with some popup or in the details view of the tapped item.
Having said that - to animate it you'd put the TextBlock inside of a Canvas, set the Clip of the Canvas to a RectangleGeometry that defines your clipping region (and update it on size updates), then animate the Canvas.X property of the TextBlock. The problem with that is that Canvas.X is not an "independent" property and so you'd need to set DoubleAnimation.EnableDependentAnimation="true" on the animation and could still get a fairly choppy animation.
A better choice might seem to be to animate the RenderTransform of the TextBlock (e.g. set it to a TranslateTransform and target the X property of the transform in the animation), but last time I checked - this could animate the TextBlock in an already clipped form, so you still wouldn't see the part of it that doesn't fit on screen. You could try that though.
Putting the TextBlock in a ScrollViewer might work better, but it would suffer from similar problem as the Canvas solution since the ScrollViewer doesn't even have an animatable offset property. In Windows 8.1 you get built in animations when you call ScrollViewer.ChangeView(), but that would likely animate too quickly. It is possible with the help of a proxy dependency property or other per-frame dependent animation as in the ScrollToHorizontalOffsetWithAnimation() ScrollViewer extension method in WinRT XAML Toolkit.
I have an ellipse within canvas in my windows phone application and I need to implement tap&drag behavior for it. I use ManipulationDelta event for that.
The problem is that ellipse is small and it is quite hard to touch it precisely and trigger manipulation.
So the question is how can I increase the area around ellipse which is responsible handling user touch and triggering manipulation?
you can take another bigger ellipse which is transparent and cannot be seen, keep the smaller ellipse on it, and then add the manipulation event on the bigger ellipse, what ever code you write, write it for the bigger one and your task is done.
You've got multiple options, like Hatim's suggestion of a larger Ellipse. Or another shape like a Rectangle so the corner could get hit better etc. However you'll have to embed them both in a parent object anyway so they share the events and move together. So might as well just use the parent object. Could also just use MouseDragElementBehavior instead of messing with the ManipulationDelta if you wanted. Something like;
<Canvas>
<Grid>
<MouseDragElementBehavior/>
<Ellipse/>
</Grid>
</Canvas>
Then you could use a Margin on the Ellipse or set the size of the parent Grid or a number of options to accommodate the requirements. Hope this helps.
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.
The scenario is that i want the user to create a shape in a small panel that opens (the added shape can later be placed on the canvas), but for a better reference, i want the user to be able to move the semi-transparent panel somewhere on the canvas and then draw with the accurate reference.
Please tell me:
Which panel type to use
How to make it moving by clicking the mouse on the move button (not the whole panel as dragging will be used for drawing lines) and move it around.
How to make it semi transparent.
How to make it appear and disappear (this should be pretty simple)
How to somehow limit its movement inside the canvas so it cannot move on the ribbon
And I really really hope there will be something built-in in WPF that i'll be able to use, and i will not have to do it the hard way i.e. create a rectangle, and do customized hit testing on it to allow the user to draw on top of that rectangle, make that rectangle transparent, and add graphics items for the buttons and controls on that rectangle "panel".
I am asking this because i have never seen such feature in any Windows application and i have no idea what to use for this purpose and how to implement it. The closest thing to what i want is in Adobe Acrobat Pro, which is the small preview of the page that appears when i double click with the middle mouse button. It doesn't move, nor it is transparent or can be drawn upon, but scale and shape wise i want something similar.
You should be able to place a second Canvas inside of your main canvas, and place whatever UserControl you'd like with your "view" inside of it.
You'll have to handle the mouse click/drag for moving it around yourself, but otherwise, it should be very straightforward.
I have a UserControl that is composed of many controls such as Buttons and other custom controls.
The UserControl takes care of various animations that interact with the controls as well.
Now, I'd like to use my control upside down, or sideways. Is there a way to put everything into a container, and simply rotate the container, so that everything that the control did works as before, but rotated (i.e. the rotate transformation is applied recursively)?
Currently it is in a Grid.
EDIT: Also, is it possible to have all the controls align together as well? Currently they all align to middle bottom. What would you set the alignment of all controls to so that you could change the alignment of the container and they would all align similarly.
Setting the RenderTransform or LayoutTransform of the container will do this for you. Which one depends on your needs -- a short and sweet explanation of the difference can be found here:
http://www.scottlogic.co.uk/blog/colin/2008/12/layouttransform-vs-rendertransform-whats-the-difference/
I'm not sure the xaml for this, but in C# it's as simple as:
grid.RenderTransform = new RotateTransform(90);