so I have a question regarding my stackpanel I'm using.
Basically when I keep adding items (expenses/earnings) the into the stackpanel I will eventually be short on navigational space and ultimately the older entries be overwritten.
So at the moment it has a maximum of five entries that can be added and displayed all at one. However If I add another entry/item/expense etc the first entry will be removed/not seen in the stackpanel
So in the picture, as soon as a 6th item is added the 1st item in the list will be removed/not visible
Kind of hard to explain, hope you can help!
More code:
pivotItem XAML
ItemsList control XAML
put the stackpanel in a scrollviewer. This should allow for automatic resizing as more data is added and you can scroll through it as well
Related
In extension of the first question I asked here How to Scroll to the Bottom of a ListBox when Items are Added where I discovered how to scroll a ListBox to the most recently added item, I'd like to be able to take this one step further and add in some sort of slide in animation to newly added items. How might this be possible? Any starting points would be of great help.
I use Telerik's DataBoundListBox, it supports add/remove animations in a easy declarative way.
I am new to Windows Phone Programming. In my application, I Have a listbox which lists the phone contacts. Currently it is listed as a regular list with equal size for list items in the UI.I am looking to modify the front end like this :
I dont want to have different sizes /back ground color for each list items rather a fixed UI and let the lists scroll through it and the list item in the view, at any time, should be displayed as in the picture.
I dont expect any codes as answers but any examples are welcome too, just want to know using what feature this kind of functionality is possible so that i can do my reading!
Thanks,
Deepak
It would be difficult to modify an existing control (ListBox for example) to act like this, so your best bet would probably be an ItemsControl with its RenderTransform set as a TranslateTransform.
If you place a Rectangle (with Fill="Transparent") over the ItemsControl, you can attach handlers to the ManipulationStarted, ManipulationDelta, and ManipulationCompleted events to control the "scrolling" by setting the TranslateTransform's Y offset.
To resize the items in the list there are two options: a custom panel or manual setting.
Custom Panel
You could create a custom Panel implementation that will appropriately resize its Children based on a property you would create to represent the scroll position. Set the ItemsControl to use your panel, and either through binding or attaching a handler to the panel's Loaded event and keeping a pointer to the panel, update the aforementioned property from inside the ManipulationDelta handler.
Manual Setting
From inside of the ManipulationDelta handler, you can also calculate the various heights of the boxes and use MyItemsControl.ItemContainerGenerator.ContainerFromIndex to get the visual for each item and set its height.
I would suggest putting this all inside of a custom UserControl.
You may have issues with clipping using the TranslateTransform but hopefully this will get you started. Unfortunately, this looks like a rather difficult control to try making as your first windows phone project!
So Finally I did manage to find a way to do it.
First approach was as #Murkaeus suggested, Using UserControl and ManipulationDelta event handler. However for some reason the manipulationDelta event was triggered only for 2 finger gestures (Zoom, Pinch..etc), I have no clue why. And after some trying I had to give up on this.
The next approach was using Listbox itself. The source of the Listbox was set as the List( of Models objects) that I create after reading the contact information from phone. The height and color of the listbox item was bound to a property in my model named "scaleLevel" and was accordingly converted by implementing IValueConvertors to give predefined color and height values for different scale levels.
I created an attached property for the scrollviewer vertical offset like mentioned [here] (http://www.scottlogic.co.uk/blog/colin/2010/07/exposing-and-binding-to-a-silverlight-scrollviewer%E2%80%99s-scrollbars/)!
This event is triggered on change of the vertical offset and every time there is a scroll, I find out which listbox item to be enlarged and which reduced based current vertical offset.
Once I have this information, I change the property ("scaleLevel") of the affected items in the List (of Model) (which is bound to listbox height and color). This change is updated in UI using the INotifyPropertyChanged Event.
I have no idea if this the best way of doing it , but it works well and there is no considerable in updating the UI despite the processing involved.
I would like to hear your opinion about the implementation and any other solution which you feel will work better.
Just like the UITableView on iphone.
users can remove or move a row on UITableView.
There is only one button to switch the UITableView to editing mode.
but for listbox on wp7 , I need 3 buttons, one for removing the selected row, one for moving the row up, one for moving the row down.
Welcome any comment
The Windows Phone ListBox doesn't support these features out of the box, but it would be possible to add them yourself using a DataTemplate.
Here's a blog post about creating a custom DataTemplate for your ListItems.
At a high level, you'll need to create a template that contains:
Enter edit mode button
Delete button
Sort up/down buttons
Then in your code, you'll need to toggle the visibility of the delete and sort buttons, as well as handle user clicks on each of the buttons. Doable, but a fair amount of work.
In my opinion, a better option would be to use a approach that's different from what you might be used to but is more familiar to Windows Phone users: the ContextMenu. This control allows you to pop up a menu when the user performs a long touch (tap-and-hold) on an item.
Here's a good tutorial about incorporating this control into your app.
Take a look at re-order ListBox here. It shows how to retemplate the ListBox.
For removing on item, you just need to remove its data source item. See how to use ObservableCollection.
If you want to show effect when an item is removed, use Event Triggers for the Unloaded event.
I have listbox in WP7 where i need to scroll to certain items according to user choice and i use scrolltoview for that. Problem is that i need listbox to scroll listbox enough so that selected item appears aligned to top edge. Right now scrolled item is positioned at bottom.
Assuming that you have fixed (and known) size items and a fixed (and known) size of listbox, can't you just account for the number of items between the top and bottom of the visible space and adjust your offset accordingly?
Unfortunately Matt solution was unusable in this case because listbox items were too big taking almost whole screen per item. But i was able to solve this problem by getting scrollviewer of listbox and use its scroll method to scroll into listbox SelectedIndex. Item is still not positioned perfectly after scrolling but height difference is minimal and acceptable for me.
I am trying to give a ListBox drag and drop ordering functionality and I have hit a wall. I got it to work when I specify the list box items in xaml but it does not work when I bind to a list it no longer works because the items are no longer of a listboxitem type.
I found this code http://blog.dobaginski.com/josh/?p=52 that allows me to get the underlying ListBoxItem but I can't get the mouse move event to fire.
I have went through other tutorials but have not been able to find one that deals with a ListBox. Has anyone done this with a ListBox.
The events I am using are SelectedChange, MouseMove, and LeftMouseButtonUp (I think that name is right). I am not using LeftMouseButtonDown because I couldn't get it to fire.
As far as i know you cannot get at the listbox item container when using data binding. YOu could in Beta 1.
You also cannot set a mouse event handler in the style, you must use a data template, just so you know.
You will likely have to use the mouse move event from a parent element, probably the UserControl or main layout control that hosts the listbox.
State changes and animations need to be in the style though so... you still cant get at the listbox item, just the element inside it in the data template.
Oh and if doing drag and drop HitTest is now protected so that will make the Drop harder.
since today you can download the final 2.0 version of Silverlight with some add ons, check the Scott's web log
I've been trying to do the same thing in WPF,
but have only found many buggy implementations.
One person has guided me towards the blog of Beatriz Costa,
and from what I remember she's one of those rare geniouses,
so I suggest you read that as well... I know I will
Blog of Beatriz Costa