Is there a way that I can animate changing the zoom factor of a ScrollViewer for Windows Runtime?
I'd like to be able to have an image inside one respond to a tapped event by returning to a default zoom of 1. While it seems that in Windows 8.1 Change View lets you animate the scrolling, not the zooming I'd like to be able to animate both.
The best solution I found was to take a part of the WinRT XAML Toolkit which has a functioning example and an extension for ScrollViewer which does just this.
Also by setting the ScrollViewer to have size of Auto and simply re-sizing the width properties of whatever element is contained within you can achieve largely the same effect.
Related
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.
I'm trying to figure out, how to write Responsive UI in XAML.
I would like to have 2 controls on my window. MinWidth of each control id 400.
If Width of windows is >800, Width of each control should be 50%, if we change widht of window to <800, each control should have 100% of window.
It's pretty simple to set up something like that with HTML/CSS, and right now I'm trying do it in WPF without progress.
Can you help me with that?
I tried to handle that with WrapPanel, but it does not work. It wraps properly, but does not change width of control.
I have two ideas for doing this:
Using a binding converter, and bind the width/height of each item to the container width/height.
Creating a custom panel, with de desired layout.
Only a few ideas, hope helps.
Define resources based on screen revolution.
In design mode, using dynamic key to avoid errors.
In runtime, dynamically add resources into App.
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've been looking around for quite a while now and can't really find a complete example and may just be missing some small element.
I'm trying to create a WPF Theme/Style/ControlTemplate/etc for a WINDOW. The one where Window borders set to none, allow transparency, and background set to transparent. So, yes, this means I have to define the buttons, borders, background, etc as I've found in other samples.
I've found a few links that utilize (and have that working) through the use of a "Thumb" control anchored to the lower-right.
What I'm missing is how to do resize from the respective borders that are constructed within the new ControlTemplate of the theme. I do have the buttons working for things like min/max/restore/close, but can't quite get how to handle the resize.
Thanks
I've used this link once. If I remember well, the resize border could be set to work as an arbitrary amount of pixels from the sides of the Window, even without a "real" border element.
http://www.codeproject.com/Articles/131515/WPF-Custom-Chrome-Library
Basically, I have a SemanticZoom control with a GridView inside it, and the GridView has a custom control inside it, but for simplicity, let's assume it's a simple red Border. The problem is that I'm trying to handle the Border's manipulation when scaling (set ManipulationMode to Scale) so that I can know when the user does a pinch out gesture and "Zoom In" into the Border (which is really another page), but by handling the Manipulation, I lose the ability to (1) use the SemanticZoom and (2) Scrolling the grid.
If you have used the Windows 8 photo app, you'll notice that they implement this feature somehow. If you pinch in into an image, the Page will go into SemanticZoom, but if you pinch out it will go into full screen mode. I want similar functionality, but I don't know how to achieve it.
Any ideas?
Thanks in advance.
I will use 2 SemanticZoom controls to achieve Photo App Effect.