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.
Related
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'm following this tutorial on youtube about changing sprite animation in code, and I was wondering if I could change this to changing sprite animation using UI button. does anyone knows how to do this. Thank you!
EDIT:
The script that I reposed kind of works thanks to your help, it changes the sprite image from image one to image two but what I'm basically trying to achieve is that each time that I click the UI button the sprite image will change from sprite image one (UI button click)> sprite image two (UI button click)> sprite image three (UI button click)> then repeat the process instead of the sprite image automatically changing itself.
Buttons have an OnClick event http://docs.unity3d.com/ScriptReference/UI.Button-onClick.html
You just create a method that gets called when the button is clicked, in your case the changing sprite code. Seen as you are using a timer though you will need to use something like a bool because onClick() only gets called once when clicked, not every frame.
Look https://www.youtube.com/watch?v=J5ZNuM6K27E
bool b_RunSpriteAnim;
public void onClick(){
b_RunSpriteAnim = true;
}
void Update(){
if (b_RunSpriteAnim)
//your anim sprite stuff
}
Then once the sprite anim has finished, just toggle b_RunSpriteAnim to false and reset the timer.
Edited:
You don't need a boolean. I only thought you wanted it because you were using a timer (as based on the Youtube link). If you just want to change the sprite immediately then you do not need it. As for Imagethree not working, it's because you have never included it in your code. It isn't clear what you are trying to achieve with Imagethree, if you included this in onClick as well it would just overwrite the image two that was just set, so I am not sure what you are looking to achieve.
public void onClick(){
this.gameObject.GetComponent<SpriteRenderer>().sprite = Imagetwo;
}
Second Edit:
public Sprite[] Images;
//Index starts at one because we are setting the first sprite in Start() method
private int _Index = 1;
void Start(){
//Set the image to the first one
this.gameObject.GetComponent<SpriteRenderer>().sprite = Images[0];
}
public void onClick(){
//Reset back to 0 so it can loop again if the last sprite has been shown
if (_Index >= Images.Length)
_Index = 0;
//Set the image to array at element index, then increment
this.gameObject.GetComponent<SpriteRenderer>().sprite = Images[_Index++];
}
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();
I have a textBlock which covers the entire screen. When the user flicks the screen horizontally, textBlock content is changed. I wanted to show that the new text is shown sliding on the screen when the user does flick gesture.
I tried this:
void listener_Flick(object sender, FlickGestureEventArgs e)
{
if (e.Direction == System.Windows.Controls.Orientation.Horizontal)
{
if (e.HorizontalVelocity.CompareTo(0.0) < 0)
{
SlideTransition sTx = new SlideTransition();
sTx.Mode = SlideTransitionMode.SlideLeftFadeIn;
ITransition transition = sTx.GetTransition(textBlock1);
transition.Completed += delegate
{
transition.Stop();
};
transition.Begin();
textBlock1.Text = "New Text";
}
}
}
Though, I do see a little animation for the new text But I don't see new text really sliding from right. How do I achieve this?
Thanks
I'm not clear how your process is supposed to work as you are only doing one animation. In theory you need to animations. One for sliding out and one for sliding in. If doing this with a single control you wouldn't be able to see the items moving in and out at the same time.
A very similar question was also asked previously: how to implement textblock flick animation windows mobile 7
I have two canvas's in a Grid, full scene "images" that I want to transition, I wonder how I would go about transitioning between these two Canvas controls.
Programatically I add the first canvas to the grid, then I add the second canvas to the grid, and remove the first, what I really want to do is transition between them.
Any suggestions on how I might achieve this programatically?
Thanks.
Edit: I have implemented this method, but am having problems, anyone able to tell me if I'm using it wrong?
private void doTransitionIn(Canvas slide)
{
SlideTransition slideLeft = new SlideTransition();
slideLeft.Mode = SlideTransitionMode.SlideDownFadeIn;
ITransition transition = slideLeft.GetTransition(slide);
transition.Completed += delegate { transition.Stop(); }; transition.Begin();
}
private void doTransitionOut(Canvas slide)
{
SlideTransition slideLeft = new SlideTransition();
slideLeft.Mode = SlideTransitionMode.SlideDownFadeOut;
ITransition transition = slideLeft.GetTransition(slide);
transition.Completed += delegate { transition.Stop(); }; transition.Begin();
}
And here is how I use it:
SceneGrid.Children.Add(nextCanvas);
doTransitionIn(nextCanvas);
doTransitionOut(currentCanvas);
SceneGrid.Children.Remove(currentCanvas);
The problem with this is that the animation only seems to start from part way down the screen, as in, i only see it slide the last 20 or so pixels, it doesn't slide all the way.
Depending on what you mean by "transition" I'd look at creating a StoryBoard to animate the hiding/showing of each canvas.
I would recommend using the TransitioningContentControl which is part of the Silverlight Toolkit. To use this control, make your first Canvas the Content of this control. To transition, simply change the Content to your next Canvas and the TransitioningContentControl does the rest!
There are a number of blog posts that provide tutorials for this control:
http://blogs.academicclub.org/uidev/2010/06/12/transitioning-content-in-silverlight/