winrt event drop dragenter etc.or zindex of image in grid - image

I have a winrt app with a grid. The grid contains images. What I want do is to drag one image over an other image inside the grid and change the position. The movement of the images i have made with Drag_ManipulationDelta and works well. With allowdrop=true and the drop event I thougt I can get the target image, but the drop event never fired. What is wrong or should I check?
So I tried different events, z.B. Pointer_moved etc. but if the events fires depends to the "position" of the image, If the moving Image is on top the underlaying image is not firing the events. So my next Idea is changing the zindex but image.zindex ist not existing. How can I chnage the zindex by code?
Any Ideas are very welcome.

The problem with the zindex I have solved: A simple
for each c in myGrid.children
c.setvalue(zindex, 0)
next
bring the images on the same level and
myimage.setvalue(zindex, -1)
brings the moving image behind all other images and now the pointer_entered event of the other images fires and I can detect the last fired event. It works but it is not really a good solution.
So it would be great, if anybody has a hint why the drop event is not working.

Related

Best way to represent list with image(using url) in Xamarin.Forms?

I want to create List View. In this List View, I will have following fields.
StackPanel
1- Image with 300 x 400 size
2- Text-Label Controls
1 Screen will hardly cover 1 and Half ViewCell.
Images will have ImageURL. I want to load image smoothly. I also want to make smooth scroll up/down with image appearing.
Can anybody please suggest me which control I should use?
If List View, which CacheStrategy I should use?
Note: For one of such functionality, I had used List View with default CacheStrategy. In that, I just faced 1 major problem of image appearing. When page initialize first time, it show image properly. But as soon as I scroll down or scroll up, image disappear or misplace. In that case, I had suffered a lot and removed image finally.
Please suggest appropriate way for above functionality.
Thank you.
For the listview, you should definitely use RecycleElement as the CachingStrategy. See here https://developer.xamarin.com/api/type/Xamarin.Forms.ListViewCachingStrategy/#Remarks
And because the images are URLs, you can use FFImageLoading. It will fade-in the image after it is downloaded (as opposed to appearing instantly after downloaded), and you can even specify a placeholder image to use while the image is being downloaded.

How to do a scale open animation in Flutter?

I'm trying to do this animation in flutter :
https://material.io/guidelines/motion/choreography.html#choreography-creation
My problem is that I have absolutely no idea how to do that.
As far as I know, widgets in flutter don't know their position nor the position or other widgets at all.
And you can't access context.size inside the build method.
I tried to use Hero animation to do it. Or ScaleTransition. But it's definitely not working.
You can use showMenu to dynamically show a popup menu at a given location. Consider using PopupMenuButton, which is an IconButton that automatically shows a menu when it is tapped. There's an example in the Gallery. If showMenu doesn't do what you want, you can copy the code in popup_menu.dart and customize it to make your own version. It uses CustomSingleChildLayout and PopupRoute.
If you just want to absolutely position a Material or Card on top of other elements, you can give it some elevation and use a Positioned within a Stack. You can use an AnimatedSize to adjust the element's size with a Curve. This won't interact with the back button on Android automatically, so if you want that, you may have to use addLocalHistoryEntry or PopupRoute.
If I understand you correct - you want to show square widget, and animation is not suitable at most because widget doesn't know its size.
In this case you can try MediaQuery.of(context).size.width - it returns width of your screen, so you can use it for calculating widgets size

React native - animating the blurRadius of an Image

I have a "cover" image for the top of one of my views that i'd love to be able to blur out as you scroll it out of view as a cool effect.
My state contains a blurRadius property, which i am binding to the blurRadius={this.state.blurRadius} prop on my <Image> component.
I have a <ScrollView> and am monitoring when it's scrolled with onScroll, where i am calling setState({blurRadius: value}) - value being the distance that you've scrolled the view.
I've also set the scrollEventThrottle={30} prop on the scrollview so that i'm receiving the event regularly as the user scrolls.
The issue seems to be that the blurRadius updates but after a significant delay - and only to the maximum value. Am i missing something in order to make the image apply the new blurRadius with every call of setState?
Could it be that the image is just too large?
You should not use setState to set anything as a response to onScroll, as this leads to poor performance. The reason is that the whole view will rerender for every call to setState, which leads to "view thrashing".
Instead, you should use the Animated API, as this 'declares' the animation to the native UI thread, thus avoiding rerenders.
Brent Vatne (from the Expo team) gives a great explanation of Animated as well as a concrete example of animations as a response to onScroll events in ScrollView here
Hope it helps someone :-)
You can try using setNativeProps instead of setState to see if the performance improves. You just need to give your Image a ref.
this.refs.myImage.setNativeProps({ blurRadius: myValue });
Reducing the image size would also help as it would not need to blur as many pixels.

Famo.us images carousel

How can I create simple image carousel. Let's say I have GridView with two rows and one column. I want to create image carousel in upper row. Can I do that with ScrollView. Any sugestions?
You have the right idea. You can use gridLayout just to keep your sizing in line, and using scrollView is perfectly fine.
I do not know exactly how you imagine such a carousel working, but one option to be aware of in scrollview is the 'paginated' option. This allows you to easily define target positions for scrollview to stop and snap to, similar to a scroll picker on native. Or if you want the sources definition..
* #param {Boolean} [paginated=false] A paginated scrollview will scroll through items discretely
* rather than continously.
The next thing you may want to think about is how a carousel goes round and round and never reaches an end like scrollview would. There is no option for this by default, but I found a way it can easily be done. It may be a bit trickier with smaller images, but here is an example I did for a infinite panorama.
Transforming Panoramas for Virtual Tours with famo.us, has it been done?
The trick was to use a second duplicate image trailing the scrollview and when scrollview was in the right position, we could jump it back to the beginning, with no visual evidence to the user.
Here is the live example..
http://higherorderhuman.com/examples/infinite.html
Hope this helps you get started!

How to check the positions of different controls in iPhone

How to check some place is already reserved by some controls before adding a new control to the view.
I have added some buttons in the UIImageView and I want to display some images in a label which I'm getting in a random size from the server.I want to place those images over the empty places in the same view.
After adding the first image in some empty place,how could I know that this place is reserved and I have to place the second image in some other placeand the images and buttons should not overlap over each other.
Can somebody please help me ?
Try using CGRectIntersectsRect on the control's frame property (which it inherits from UIView).
http://developer.apple.com/library/mac/#documentation/GraphicsImaging/Reference/CGGeometry/Reference/reference.html
I don't believe this will work for rotated views though...hm.
See this image for reference: http://cl.ly/3T3d3w0D2I2Q1w1r0m46

Resources