In appcelerator, there doesn't seem to be a control to make a collapsible "div", so I thought I would spin one up myself.
1.) Create a parent View(height 50), add a label (Displayed, meant to be clicked), and a picker (hidden) - and put the label & picker in the parent view.
2.) on click of label, animate the parent View to height: 150.
3.) show the picker.
However, the picker gets cutoff at height: 50 (the original size of the View). If I adjust the parent view to an original height of 70, the picker gets cutoff at 70. Is there an issue in the way I'm rendering my view - is there a better way?
options_label.addEventListener('click', function(){
var animation = Titanium.UI.createAnimation();
animation.height = 150
var animationHandler = function() {
animation.removeEventListener('complete',animationHandler);
picker.show()
};
animation.addEventListener('complete',animationHandler);
category_option.animate(animation)
})
I've encountered issues like this in appcelerator a number of times. The fixes usually involve switching around the order of events. Unfortunately, this is more or less a trial and error process, so here goes my best guesses:
Instead of creating the picker at initialisation, and then showing it on animation complete, only create and add the picker to the category_option view in the animationHandler function.
If the above doesn't appeal to you, try forcing the height of the picker to whatever looks right, by setting its height property. This should force it to schedule a relayout, hopefully making it realise that its parent view is now larger.
My best guess as to why this might be happening is that the show() method of the picker is not causing a relayout of the component. This would leave it thinking that it still in a 50 unit heigh view, and crop itself accordingly. I could be completely wrong about that, however, its just speculation.
Related
I rebuilt a periodic table using QML and stumbled upon the following problem. Due to size limitations I decided to reduce the amount of information that is shown to a minimum and instead implemented the option to hover over a certain element which causes a tooltip to show up, offering more information.
Periodic table
tooltip with more information
My problem is, that when you move the cursor to take a look at a different element, the tooltip will not stop showing immediately but slowly fade out instead. Rambling from side to side with your mouse will show this for example:
delayed tooltips
Is there a way to remove this fadeout and let the tooltips disappear immediately instead? Thanks in advance :)
This is defined in the style you are using. Either you write your own style, a custom ToolTip or overwrite manually every time. To fix it you need to overwrite the exit transition.
Button {
id: button
text: qsTr("Save")
ToolTip {
parent: button
visible: button.hovered
delay: 500
text: "This is a ToolTip"
exit: Transition {}
}
}
I want to push (make visible) little part of master page to detail page like on pictures in links below. Is it possible in Xamarin.Forms?
Before swipe
After swipe
I'll be grateful for help.
Set
<ContentPage NavigationPage.HasNavigationBar="False">
Place a StackLayout or Grid that looks like the side menu shown in your image. Add a tap gesture recognizer to it.
slMenu.GestureRecognizers.Add(new TapGestureRecognizer
{
Command = new Command(() => ShowSideMenu(masterPage)),
});
private void ShowSideMenu(MasterDetailPage masterPage)
{
masterPage.IsPresented = !masterPage.IsPresented;
}
This is possible, but requires quite some work, since you can't access the width of the MasterDetailView directly.
In another post (see How to set width for MasterDetailPage in xamarin forms ) I have described how to change the width of the MasterDetail view.
While implementing that, I came across a behaviour like you want to have, though for me it was an error.
Basically the steps would be
Implement a custom version of the MasterDetail view where you can set up a custom width
Change the width of the master view so it is a bit wider than it should be
Adapt the calculations when collapsing and expanding the view so that they don't collapse the entire width
For instance if your Master View gets a width of 340 and you want the last 40 to show, make sure that when being collapsed it "only" moves by 300
I have a ContentView with a StackLayout with multiple children sized to the full width of the screen. In other words, if the screen width is 320 and I have five children, the inner StackLayout is resized to 1600.
In this ContentView, I have Next and Previous buttons that when clicked, animate the inner StackLayout's TranslateX property. Basically, I'm creating a carousel by translating the StackLayout within the ContentView. I chose this route because I was having layout issues using a ScrollView and a custom renderer when I would modify that layout of the view (by hiding labels, etc.)
However, I've hit a snag. Content that appears after I set the TranslateX property doesn't receive any tap events. I believe I might have to reset some tappable area, but I'm not even sure where to begin with that. Does anyone have any suggestions?
I posted this same question in Xamarin's Forums, and someone there answered. For anyone looking, the answer is here: https://forums.xamarin.com/discussion/comment/142914/#Comment_142914
If that link stops working at some point in the future for some reason, the relevant answer is:
Hit testing is done based on the actual frame of the control determined by layout, but translation happens after layout. Therefore hit testing does not take translation into account. If you want a view to be touchable then you should update its layout directly rather than using translation.
Yesterday I failed to get an answer, but perhaps I did not understand the problem deep enough to formulate correct question.
The story is about animating ListBox height. Here are subsequent screenshots:
a) "Medium" is a TextBlock
b) "Medium" TextBlock gets replaced by a ListBox. The user selects an item. That initiates animation of the ListBox.Height. After the animation completes, the ListBox is replaced by original TextBlock.
(Disregard the differences in data. Collection of the images was a painfull process, when I had to work with rendered frames. One of the images was shot for different record.)
This sequence works with occasional flickering. I wanted to know what's going on and after a while I got this screenshot:
What you see is the first frame after Storyboard.Completed event was intercepted. As far I understand this is the final result from the Storyboard.
Notes:
I checked the visual tree at this instant and did not find anything suspiceous.
This is just one of the effects that happen. Another frequent case is a resized 1-line ListBox with blue hatching; in this case all elements above the listbox disappear. 3rd possibility is a diagonal red line over the whole screen.
Here is the code defining the Storyboard:
private Storyboard GetDropDownAnimation(double from, double to)
{
double secs = this.IsExpanded ? 0.2 : 0.4;
CubicEase ease = new CubicEase() { EasingMode = EasingMode.EaseInOut };
DoubleAnimation animation = new DoubleAnimation()
{
Duration = new Duration(TimeSpan.FromSeconds(secs)),
From = from,
To = to,
FillBehavior = FillBehavior.HoldEnd,
EasingFunction = ease
};
Debug.WriteLine("Animation Height {0} -> {1}", from, to);
Storyboard.SetTarget(animation, this);
Storyboard.SetTargetProperty(animation, new PropertyPath("Height"));
Storyboard sb = new Storyboard();
sb.Children.Add(animation);
return sb;
}
I could explain other tricks done (for a long time I was convinced that the problem is there), but it looks like the problem concerns only the animation itself.
Anybody able to explain what's going on?
Have a look at these before you continue this way it might make your life a bit easier :)
That said, have a look at the starting value of the animation (from) and see if it is correct.
If all else fails you could start with a fully transparent listbox.
I made some progress on the problem that may be worth of reporting.
At first I replaced Storyboard by own animations. I started by using CompositionTarget.Rendering callbacks. The code is fairly trivial: In the callback you need to update the ListBox height proportionally to the elapsed time. I double-checked that for each height change there is one LayoutUpdated event, in other words the screen is in sync all the time. (A pleasant surprise.)
The result: Flickering remained.
Conclusion: Storyboard is innocent.
Then I found something interesting:
Because the height manipulation was in my hands I simply rounded the value to the whole multiple of the row height. And guess what - flickering disappeared!
Note the ListBox in question is set up using ItemsSource and DisplayMemberPath that refers to a string property. ItemTemplate is not set. In other words pretty standard ListBox use.
It is not an answer, I know, yet I find it interesting.
I would like to create an infinite scrollView (like a slot machine), but without paging. When the user scrolls down, it's easy i just have to increase the contentSize and the scrollView scroll endlessly :
- (void)scrollViewDidScroll:(UIScrollView *)theScrollView {
theScrollView.contentSize = CGSizeMake(45, theScrollView.contentSize.height+45);
}
But how can i create the same effect when the user scrolls upward ? I tried to play with the contentInset but then the contentOfsset doesn't get updated and i end up having weird behaviour.
Do you have any idea how i could achieve that ?
I needed the same, so I created this: http://dev.doukasd.com/2011/04/infinite-scrolling-dial-control-for-ios/
Have a look at the video, I believe it's what you're looking for. Source code is included.
I have developed this kind scroll view. It can scroll infinite.
You can check on github: https://github.com/quangrubify/InfiniteUITableView
I think you should give us more details about the issue. What content do you want the user to see when he is scrolling upwards? You increase the contentSize in scrollViewDidScroll method, but you are not checking the contentOffset, so the contentWill be bigger whenever the user scrolls the scrollView (either way, even horizontal if allowed). Since the contentOffset is already at 0, the user cant scroll upwards because there is nothing that the scroll view can show.
I dont know the content of your scrollView, but I have implemented infinite scrolling horizontally. For details, see: https://stackoverflow.com/a/12856174/936957
PS: Do not use "magic numbers", this is a better alternative:
theScrollView.contentSize = CGSizeMake(theScrollView.contentSize.x, theScrollView.contentSize.height+45);
//Or theScrollView.frame.size.width alternatively