I am building a Glamour presentation which is divided into two panes: one displaying a timetable and another pane showing the details for the event the user has clicked on.
If the user removes the selection, I'd like to retract the details pane so that there is more room for the timetable.
I have looked at GLMFinder which sort of does dynamic space allocation, but only initially when there is no selection. Is there a simple way to do this? Or do I have to write a custom renderer?
Related
I am creating an event screen like Outlook's. The issue I am coming across is that the autocompletebox I am using from Syncfusion doesn't automatically grow in height as more tokens are added.
The current workflow is exactly like outlooks. When the control is clicked on, it brings you to another page where you can select tokens. On return, the selected items populate the autocomplete circled below.
The approach I currently took is to have a listview. Scrolling is disabled for the listview since the page resides in a scrollview and nested scrollviews aren't recommended for xamarin. The height of the listview is dependent on the number of selecteditems.
I am wondering if there's another approach or control that would be more suited for my situation? Or if someone has come across a autocomplete control where the height will grow.
I want to do something similar to the calendar.app info panels, take a look at the pictures.
Here you can a see a very simple and compact info panel, but if you click on the last row "Add Notes, Attachments, or URL"....
It expands to show additional fields.
How can I achieve this functionality of expanding and collapsing additional controls ?
Can this been done through interface builder and constraints ?
Take a look at Apples example code for NSStackView,
https://developer.apple.com/library/mac/samplecode/InfoBarStackView/Introduction/Intro.html
It will show you how to implement views that collapse and disclose. In Apple's example they do everything programmatically using auto layout constraints, although you could move some of the work to IB if you wanted to.
I would create the view you want and add a tracking area to monitor when the mouse enters and clicks (using -mouseDown: notification) the "Add attachments, notes, URLs" section and use the stack view method to disclose the details.
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'm developing a Windows Phone 7 application that uses some Transient content.
To avoid to go back to that transient content I've decided to use a phew page with several grids on the same page.
When I have to show another "page" I set to collapsed current grid and then I set to visible desired grid.
I know this can be done using user control, but I'm not sure if using user controls can be slowest that using Grids. Any advice?
And another question is if I use grids, how can I use page transitions?
Another option for when you want to show transient content is to use a Popup control. This won't appear in the navigation stack, so when a user goes back (<-) they won't see this content.
However, Popup content isnt GPU accelerated, so you only want to display simple content, no animations etc...
If you want page transitions etc... then i think your only option is to use Pages. That way you can do the transitions and the back button works as expected.
It doesn't matter if you do this via user controls or grids - what matters speed wise is the complexity of your layout.
A user control may be better if you are doing this on a number of pages so you don't repeat yourself.
One way to do page transitions is to do it with stack panels. Have the second "hidden" stack panel way off to the right so it is off screen then animate it in.