ScrollViewer and SetHorizontalOffset - xaml

I use scrollviewer in my windows store application, but after calling SetHorizontalOffset function some times scrollviewer doesn't change horizontal scrolling. The same thing with vertical scrolling. Does anybody know how to work with it? May be scrollviewer scroll only for visibility for offset (I mean that if it's see that user can see offset its doesn't scroll at all)

It appears the ScrollViewer's offset lags by one frame.
If the below code is run every frame, diffPrevDesiredActual is always 0. That is to say, the value provided by ChangeView does not take affect immediately.
...
var scrollPosition = /*some new value*/;
MyScrollViewer.ChangeView(null, scrollPosition, null, true);
var current = MyScrollViewer.VerticalOffset;
var diffDesiredActual = scrollPosition - current;
var diffPrevDesiredActual = previous - current;
previous = scrollPosition;
...
private double previous;
If nothing on your screen is animating when you change the scroll offset, then it is possible the ScrollViewer won't show the new value until something triggers the draw of a new frame. To test this hypothesis, try adding an infinite animation (eg ProgressRing) to ensure frames are constantly being drawn.

Related

Haxe: Handling horizontal scroll events

I recently started using Haxe, so pardon me if my question has an obvious answer or if my description of the problem is a little sloppy, but I'm going to try my best to explain it.
I'm working on a laptop that has a multitouch-supported track pad, and a normal optical mouse with only a vertical scroll wheel (no horizontal clicking available on there). I'm looking for a way to handle horizontal scroll input / events. OpenFL's mouse events support vertical scrolling well enough. Both the mouse scrolling and the two-finger track pad scrolling work fine for the vertical axis. It looks like the same event is generated when either of those input methods are used, which is understandable. But I can't seem to find an event that would be generated when a horizontal scroll is performed. The track pad allows for horizontal scrolling, since web browsers respond to the command, but I can't find any way to make my program respond to this input. Lime's "onMouseWheel" function doesn't respond to the input either. Do you guys have any suggestions for capturing this kind of input for an app targeted for Windows?
Thanks in advance
UPDATE: What I'm looking for here is not a question of how to scroll the screen horizontally, but how to recognize the horizontal scroll event coming from hardware, for example two fingers on the track pad or a sideways click of the middle mouse wheel. Lime's onMouseWheel has two params, deltaX and deltaY, but no events are triggered that give back a non-zero deltaX value. Vertical scrolling fires an event that returns deltaX = 0 and deltaY = +/- 1, but horizontal scrolling doesn't even trigger an event.
This can be done in several ways. The first is to add an event handler to mouse wheel for the object instance that you want to attach the event handler to, so MouseEvent.MOUSE_WHEEL and use the delta variable to determine the scroll direction. What you may also need to do is handle a key down event which enables horizontal scrolling instead of vertical.
Some example code:
mySprite.addEventHandler(MouseEvent.MOUSE_WHEEL, onScroll);
mySprite.addEventHandler(KeyboardEvent.KEY_DOWN, onKeyDown);
mySprite.addEventHandler(KeyboardEvent.KEY_UP, onKeyUp);
...
private var horizontal:Bool;
private function onScroll(e:MouseEvent):Void
{
if (e.delta > 0 && horizontal)
mySprite.scrollRect.x++;
else if (e.delta < 0 && horizontal)
mySprite.scrollRect.x--;
}
private function onKeyDown(e:KeyboardEvent):Void
{
if (e.keyCode == 18)
horizontal = true;
}
private function onKeyUp(e:KeyboardEvent):Void
{
if (e.keyCode == 18)
horizontal = false;
}
You will need to define the scrollRect in your constructor somewhere to specify the scrolling bounds of the sprite.

Setting UI Button width and height in cocos2d js android application

In my Cocos2d js android app i have a UI button as
var button=new ccui.Button();
button.loadTextures(res.play_png,res.play_png);
button.setAnchorPoint(cc.p(0,0));
button.x=size.width/2;
button.y=size.height/2;
this.addChild(button);
The button loads and i am able to set it at any position on the screen.
But i am unable to change its width and height to specified number of pixels.
I want something like
button.width=100;
button.height=100;
I did not find any method to do that...
Any help how to accomplish this would be greatful.
Thanks.
The buttons i use are options like play,how to play,share etc..
So i have to position them in such a way that they dont overlap or get distorted for various screen resolutions...
How can i use the setScale method in this context???
We can make a call to a function that can scale the size of the UIButton by performing an action. In this case, the following code might help:
performScaleAction : function()
{
var duration = 0; // duration in seconds for performing this action
var scaleX = 0.5; // scale factor for X-axis
var scaleY = 0.5; // scale factor for Y-axis
var scaleAction = new cc.ScaleTo(duration , scaleX , scaleY );
this.runAction(scaleAction);
}
Now, call the above function in the following way:
this.performScaleAction();
this.addChild(button);
So, if the actual height of the image used for creating the UIButton is h, in this case, the new size as displayed on the screen would be h times scaleX . Same for the width of the UIButton.
Hope this helps!

Sencha Touch: After scrolling a panel using a button tap it back to initial position again when scroll end

I am trying to scroll a panel using button tap, and the panel is scrolling as I want. But my problem is that,
After scroll end it back again to its initial position, doesn't stick to its new position.
Why this behavior and how can I get leave from this?
Code I used (working just fine)
var container = this.getDealdetails();
container.getScrollable().getScroller().scrollTo(x , y, true);
The scrollable container will scroll back if the scroll to position is greater than the height of the container.
This is best demonstrated with an example. Run this fiddle: http://www.senchafiddle.com/#8Qnt8
Make your browser window smaller in height and note how it behaves. Hope this makes sense.
var panel= Ext.getCmp('iObserveCreateRecords');
panel.getScrollable().getScroller().scrollTo(0, 0, true);
//iObserveCreateRecords is panel id

Render Esri Map in Sencha-Touch

I've got a problem to render an esri Map with sencha touch. I display a tabPanel with a tab containing the map, and 3 other tabs.
My problem is that when I'm on another tab than the map-tab, when I resize the window (or change orientation of phone), the map diseapears.
I identified the source of the problem. when I resize the window being on another tab, the map tab goes from current size to 0x0 to the new size. Problem is that when the width and height are set to 0x0, the Esri Map require tiles of dimension 0x0, and then the error appears.
I tried to set minWidth and minHeight to my tab but without success.
do you have any clue how i could fix that ??
thank you in advance !
I believe I had the same problem (I didn't really know the exact cause at the time). Whenever the orientation of the screen changed I was manually changing the dimensions of the esri map to match the panel and then firing the map's reposition and resize methods. However, if this was fired from a different panel, the basemaps would drop out of the map.
I was able to fix this by calling the following function every time orientation changed, or the map panel was set as active:
function resizeMapDiv(){
if (appPanel.getActiveItem() === mapPanel){
var mapdiv = document.getElementById('mapDiv');
var mappanel = document.getElementById('mapPanel');
if ((mapdiv != null) && (mappanel != null) && (mapdiv.style.width != mappanel.style.width)){
mapdiv.style.width = mappanel.style.width;
mapdiv.style.height = mappanel.style.height;
map.reposition();
map.resize();
}
}
}

How to add and delete a view in UIscrollview at runtime?

My project needs to add and delete a uiwebview to uiscrollview at runtime. Means, when we scroll it horizontally (left or right) when paging is enabled, then a new view get added to the uiscrollview and it traverse to it.
Is it possible to detect the left or right scrolling in uiscrollview?
Plz tell me the best possible solution, sample code or any tutorial.
Thanks in advance
In such cases, we should have paging enabled in our scroll view.
Lets say you have scroll view of size 320x480, and it is supposed to show 10 pages, where size of each page is 320x480, making content size of scroll view as 320*10 x 480.
The best way to determine the current page is by using the content offset value of the scroll view.
So, in the beginning, when scrollview is showing 1st page, its content offset would be x=0, y=0.
For 2nd page x=320, y=0.
Thus we can get the current page value by dividing the contentOffset.x by page-width.
Thus, 0/320 = 0, means 1st page. 320/320 = 1, means 2nd page, and so on.
Thus, if we have current page value with us, we can determine in which direction the scroll view is moving, as follows:
-(void) scrollViewDidScroll:(UIScrollView *)scrollView{
int currentPageOffset = currentPage * PAGE_WIDTH;
if (self.pageScrollView.contentOffset.x >= currentPageOffset + PAGE_WIDTH) {
// Scroll in right direction. Reached the next page offset.
// Settings for loading the next page.
currentPage = self.pageScrollView.contentOffset.x/PAGE_WIDTH;
}else if (self.pageScrollView.contentOffset.x <= currentPageOffset - PAGE_WIDTH) {
// Scroll in left direction. Reached the previous page offset.
// Setting for loading the previous page.
currentPage = self.pageScrollView.contentOffset.x/PAGE_WIDTH;
}
}