Is there any way to animate all the items of an ItemCollection in WP7, right now the storyboard (which is called from the codebehind) seems to be happening to only the first Item.
Also, which is the best way to access and animation inside a DataTemplate, which is assigned to an item inside another DataTemplate - doing the same thing as the top level one, does not seem to work. this is a smaple of the code i'm using to find it. the generic is from WindowsPhoneGeeks
Storyboard sb1 = (Storyboard)this.FindName("ChangeToBlack");
Storyboard sb2 = null;
StackPanel topFrame = FindFirstElementInVisualTree<StackPanel>(PartyCollection);
if (topFrame != null)
{
StackPanel s2 = FindFirstElementInVisualTree<StackPanel>(topFrame);
sb2 = (Storyboard)s2.Resources["ItemChangeToBlack"];
sb2.Begin();
}
sb1.Begin();
Related
I have a page created using Xamarin Forms. I want to add a toolbar at the bottom of the screen like an overlay but doesnt change the actual layout of the screen. It should just overlay above everything and always be at the bottom.
It should showup only when there is a particular event. SO it will be added dynamically.
Any ideas - or if you can send point me in the right direction. I do not want to use any nuget packages.
Have you tried to use AbsoluteLayout/Grid?
<Grid>
<StackLayout><Label Text="Your content"/></StackLayout>
<Button x:Name="toolbar" VerticalOptions="End" Text="Your toolbar" />
</Grid>
Show/hide the control based on your event.
If you could show the code of displayToolbar it would be easier to write a code that suits your needs, but it should be pretty easy even without the code :)
You could do this with a RelativeLayout, AbsoluteLayout or a Grid but I recommend doing it with a Grid because is much lighter than RelativeLayout and has a lot more functions than AbsoluteLayout.
So, make the root of every page that you want to use displayToolbar a Grid with one row and one column. Add the actual content of the page to that Grid as a child view.
Now comes the part that would be easier with your code. When you want to display the toolbar, add the toolbar view as a child of the root Grid with VerticalOptions set to LayoutOptions.End.
That's it. The toolbar will be added in front of every view of the page and if you want to dynamically remove the toolbar, remove the root Grid's last child.
The layout would be something like this:
Grid root;
internal SomePageConstructor()
{
root = new Grid
{
ColumnDefinitions =
{
new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }
},
RowDefinitions =
{
new RowDefinition { Height = new GridLength(1, GridUnitType.Star) }
}
};
root.Children.Add(actualPageContent, 0, 0);
Content = root;
}
void DisplayToolbar()
{
var toolbar = new StackLayout { VerticalOptions = LayoutOptions.End };
root.Children.Add(toolbar, 0, 0);
}
void RemoveToolbar()
{
root.Children.Remove(root.Children[1]);
}
Note: I did this directly on StackOverflow, code could need some corrections.
From this sample, you could do an animation of the toolbar coming from below the page or something like it. Just change the DisplayToolbar and the RemoveToolvar methods.
Obs. Method names on C# are PascalCased (every word is capitalized) so your displayToolbar is DisplayToolbar.
Hope it helps! :)
I have written a windows universal app under windows 10 that has a ListView.
This ListView updates every five seconds if new data if available. Its data source is an ObservableCollection that only allows a maximum of ten items to be shown, with the newest being inserted at the front of the collection. This seems to work well as you see the ListView with items slowly scrolling down the screen.
What I want to do is add some sort of colour transition to the new items in the ListView, so that when they appear, the background of the item starts off grey and fades to white. I want this effect so that a user can easily see the new item or items that have just appeared in the ListView.
The new objects added to the collection have a flag set to indicate they are new. I thought this could be used as an indicator if the animation process was able to reset this flag after the animation? Or should I look to use an event off the ListView, if there is one?
I’m new to storyboards so am not sure the best approach. Can anyone advise on the areas I should research to get the animation or even if it's possible under the UWP?
Basically, whenever a new item has been added, you want to animate its color to light gray and then animate it right back.
So the key thing is to find the event that's invoked during the item container creation. In this case, ContainerContentChanging is your friend.
Since you need to animate the color a few times during an animation, you will need ColorAnimationUsingKeyFrames rather than a normal ColorAnimation. The whole Timeline and Storyboard syntax can be a bit confusing at times so I have created a simple demo for you here. Hope it helps. :)
private void OnListViewContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
{
if (args.ItemContainer != null && !args.InRecycleQueue && args.Phase == 0)
{
var colorAnimation = new ColorAnimationUsingKeyFrames
{
// 'cause the new item comes in with an animation of which duration is about 300s, we add a little delay here to only
// animate the color after it appears.
BeginTime = TimeSpan.FromMilliseconds(300)
};
var keyFrame1 = new LinearColorKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0)), Value = Colors.White };
var keyFrame2 = new LinearColorKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(400)), Value = Colors.LightGray };
var keyFrame3 = new LinearColorKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(1200)), Value = Colors.White };
colorAnimation.KeyFrames.Add(keyFrame1);
colorAnimation.KeyFrames.Add(keyFrame2);
colorAnimation.KeyFrames.Add(keyFrame3);
Storyboard.SetTarget(colorAnimation, args.ItemContainer);
Storyboard.SetTargetProperty(colorAnimation, "(Control.Background).(SolidColorBrush.Color)");
var storyboard = new Storyboard();
storyboard.Children.Add(colorAnimation);
storyboard.Begin();
}
}
Here's how it looks like in a demo app.
I'm writing a Forms app. How to position a view right at the bottom of the screen and when some entry is focused and the keyboard is visible, the view to be right above the keyboard? On android, it is possible to set Window.SetSoftInputMode(SoftInput.AdjustResize) and that will make the Content resize every time the keyboard is appearing/disappearing. However, I need the status bar to be transparent and SoftInput.AdjustResize doesn't work with WindowManagerFlags.TranslucentStatus. My question is, how do I position a view right above the keyboard without setting SoftInput.AdjustResize?
Take this example:
public Page1()
{
InitializeComponent();
var al = new StackLayout
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand
};
var button = new BoxView {Color = Color.Red, VerticalOptions = LayoutOptions.EndAndExpand};
var entry = new Entry {HorizontalOptions = LayoutOptions.Fill};
al.Children.Add(entry);
al.Children.Add(button);
Content = al;
Content.SizeChanged += (sender, args) =>
{
button.Layout(new Rectangle(0, Content.Height - 120, App.Dimensions.Width, 120));
};
}
If you run this code, when you'll press the input, nothing will change, the "button" will remain on the bottom of the screen not visible because of the overlaying keyboard.
If we add Window.SetSoftInputMode(SoftInput.AdjustResize) in MainActivity's onCreate it works fine, the box is moved above the keyboard on entry's focus.
Also, if we change Content = al; to Content = new ScrollView {Content = al};, it works fine.
However, if we add Window.AddFlags(WindowManagerFlags.TranslucentStatus); in MainActivity's onCreate, none of those methods work anymore.
Thanks in advance.
I'm writing a Forms app. How to position a view right at the bottom of
the screen and when some entry is focused and the keyboard is visible,
the view to be right above the keyboard?
If you are using Xamarin Forms, then wrapping your UI elements in a ScrollView should do the trick. Something like this if you are using XAML:
<ScrollView>
<ScrollView.Content>
// Your Original XAML content here
</ScrollView.Content>
<ScrollView
EDIT:
Looking at the example you just added, I THINK I know what is happening. So, the ScrollView Trick only works for elements that require keyboard input. I.e if you instead had an entry element at the bottom of the screen, and wrapped everything in a ScrollView like I suggested, then the keyboard should push the entry element up for you. However in your case you have a boxview at the bottom of the screen, which the keyboard simply runs over.
What you have for Content.SizedChanged is a good idea, however I don't think the size of the view actually changes when the keyboard pops up (at least, Content.SizeChanged isn't called when the keyboard pops up), so that part of your code is really only called on loading of the page from the MCVE you provided.
HOWEVER, I was able to move the 'button' up when the keyboard appears by doing this:
Replace
Content.SizeChanged += (sender, args) =>
{
button.Layout(new Rectangle(0, Content.Height - 120, App.Dimensions.Width, 120));
};
With
entry.Focused += (sender, e) =>
{
button.TranslationY -= 120;
};
You may have a heck of a time getting that magic translation number for all the different devices and orientations though. When I tested it on the iPhone 6 simulator I had to push way above 120 before I could see it above the keyboard.
Hope that helps!
I have a list view that I am popping up in Xamarin forms, that I want to hide if someone taps outside of the box. I have a tap gesture recognizer on the parent layout for the list view that handles that. In Android, it all works good. If I click off, it closes, but if I click on an element in the list view, it properly selects it. In iOS, the opposite happens. The gesture handler on the layout fires first and closes the list view without properly selecting the item.
So my question, is there a way to change the order on how the events are fired? If not, is there a better alternative to how I'm trying to accomplish this? Thanks!
If you are using ListView.ItemSelected or ListView.ItemTapped then I ran into the exact same issue the other day. The fix for me was to not use either of those and instead attach a TapGestureRecognizer to the ViewCell that is within the ListView. I also added an IsSelected property to the object that the ViewCell is being bound to so that I could change the background color of the item once it has been clicked.
public class SomePage : ContentPage {
private SomeModel _selectedModel; //It would be best to put this into your ViewModel
...
public SomePage() {
ListView list = new ListView {
ItemTemplate = new DataTemplate(() => {
ViewCell cell = new ViewCell {
View = new ContentView()
};
cell.View.GestureRecognizers.Add(new TapGestureRecognizer {
Command = new Command(() => {
if(_selectedModel != null) { _selectedModel.IsSelected = false; }
SomeModel model = (SomeModel)cell.BindingContext;
model.IsSelected = true;
_selectedModel = model;
})
}
return cell;
}
}
}
}
I have above scenario: If user click on ListBox, it will either have sub items (again ListBox) or detail view.
So what i did currently is: Whenever user clicks any item, made a web call and filled up the same ListBox if clicked item is having further sub items.
Now, issue comes in picture:
Suppose i am in 4th screen (detail view),
Moved to the 3rd and 2nd screen with data maintained as stack (Its working fine, yes i am maintaining data in ObservableCollection<ObservableCollection<MyObjects>> so while moving back, i am fetching data from there)
Now, if i click any item in screen 2, it will open detail view for the screen 3 ListBox data.
Means that ListBox is not getting notified that we have filled data inside OnBackKeyPress()
FYI, i am filling up ListBox and WebBrowser in the same page., so my problem is that how do i notify ListBox once i filled up data from stack which i have maintained?
Yes i have also implemented INotifyPropertyChanged but don't know why its not working.
Please check my code:
ListBox and WebView screen: http://pastebin.com/K1G27Yji
RootPageItem class file with the implementation of INotifyPropertyChanged: http://pastebin.com/E0uqLtVG
sorry for pasting code in above way, i did as question is being long.
Problem:
How do i notify ListBox that data is changed from OnBackKeyPress?
And what is the behavior if you set:
listBox1.ItemsSource = null;
before
listBox1.ItemsSource = listRootPageItems;
This is just wrong architecture. Instead of reloading the same listbox, please add a single page for each screen. Share data between them inside the App class (internal static) and use the built in navigation stack for handling "going back". Don't override OnBackKeyPress for this purpose.
You will get your desired functionality for "free" with easier to maintain and use codebase.
Oops it was a silly mistake i made.
I forgot to set items[] array inside OnBackKeyPress() but was accessing while clicking item, hence its having items[] data of last step we moved in forward direction, it was executing the same data.
Now, i have just included a single line and it has solved my problem.
items = listRootPageItems.ToArray(); // resolution point
So final code of onBackKeyPress() is:
/**
* While moving back, taking data from stack and displayed inside the same ListBox
* */
protected override void OnBackKeyPress(CancelEventArgs e)
{
listBox1.Visibility = Visibility.Visible;
webBrowser1.Visibility = Visibility.Collapsed;
listBox1.SelectedIndex = -1;
if (dataStack.Count != 0)
{
listBox1.ItemsSource = null;
listRootPageItems = dataStack[dataStack.Count-1];
listBox1.ItemsSource = listRootPageItems;
items = listRootPageItems.ToArray(); // resolution point
dataStack.Remove(listRootPageItems);
e.Cancel = true;
}
}