I'm building a BattleShip game for WP7 that has board with 250 cells. I need to make each cell clickable, so I thought to put in each cell a button and handle each click as I need.
My question is: do 250 buttons slow the phone? If it does, so what are the alternatives?
Hell yes. 250 UI controls are complete utter madness. The alternative, and correct solution, is to use XNA instead, and developing your game as a real game, and not as a bunch of UI controls.
Yes, 250 buttons will make your application quite slow. Silverlight constructs a visual tree to represent your UI. Each button contains a template which generates various broders, rectangles etc ... for representing visual states.
A couple of alternatives are:
Use a more lightweight visual elements, for example Rectangle. These do not have a Click event, so you can handle MouseLeftButtonUp instead.
Probably the most lightweight approach is not to have an element for each cell at all. Simply handle mouse interactions on a parent element, then determine the grid cell from the click location. The MouseEventArgs contain a e.GetPosition() method that allows you to determine where the mouse click occurred.
Related
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.
I'm using a grid of HubTile in my app, and I'd like to be able to rearrange (aka reorder the items by tapping and hold ) the tile like how the Windows Phone home page does it.
I have come across something a bit similar - A Gesture-Driven Windows Phone Todo List, but I don't think it is readily usable. Is there some kind of open source library or commercial product that does that well. I really don't want to roll my own since the deadline is near and I need to leverage as much as I can
The best way is to use a WrapPanel. If you add your Hub Tiles to the WrapPanel, it would give you the same effect as the Windows Phone Home Page.
The following links should help you understand how to go about the WrapPanel.
http://www.windowsphonegeek.com/articles/WP7-WrapPanel-in-depth
http://www.kotancode.com/2010/12/29/wp7-presenting-listbox-items-inside-a-wrappanel/
Once that is done, you could use touch manipulations to move the Hub Tiles around.
http://blogs.msdn.com/b/mikeormond/archive/2010/07/08/enabling-touch-manipulations-on-windows-phone.aspx
First, group all the Hub Tiles into a List<> or an ObservableCollection<>. (I would advice using an ObservableCollection)
Use the touch manipulations to move the Hub Tile around. Based on the position of the Hub Tile (when the touch manipulation is done), you could rearrange the order of the Hub Tiles in the ObservableCollection. Update the ListBox.
By this I mean, that if the HubTile[3] is dragged and moved to the top of the Listbox, in the List<>, change the index of HubTile[3] to HubTile[0], and update the index of the rest of the HubTiles. When you refresh the ListBox, you should get the HubTiles rearranged.
You could create a StoryBoard for the animations.
I am following some tutorials with expression blend and many of them are tell me to drag a TextBlock from the toolbox. Sure enough I see it, if I long click on it it displays for additional controls.
So if I click it and drag it it should work but it opens up the other controls.
If I double click it then it places it in my design view but I want to drag and drop it.
Am I missing something here, the tutorials I am following are for Expression Blend 4 and I am using Expression Blend 4.
Thinking about it, its sounds correct that you should be able to drag and drop a control on the design surface, but it doesn't work here.
Well in Standard Expression Blend and I assume there is only one version of Expression Blend 4 you actually can't place controls via drag and drop from the toolbox onto the design surface. At least this is my experience.
If you want to place a control what you do is to choose a control via left mouse click in the toolbox which makes it the currently selected one. Then you can place it onto the design surface by defining its dimensions at the place you want to have it positioned.
AFAIK there is no function to drag a control out of the toolbox.
i want to swipe webbrowser Control which is on pivot item ,each pivot item
has a web control .i want to swipe with web browser control .
but i don't have any idea.but swiping is necessary in my project .is there any method to doing this if yes then please send me sample code for this ..
This is a bind if you have some different sections of HTML you want to display in a Pivot. If you are targetting WP7 Mango it might be possible for you to convert your HTML to RTF and then use a RichTextBox instead of a WebBrowser. However if your HTML is fairly complex, this probably isn't going to work for you.
Alternatively you could place your WebBrowser in a pivot item with a transparent Rectangle above it in the Z-order. Make sure that Rectangle swallows any gestures and doesn't pass them through to the WebBrowser control - that way you will be able to swipe left and right on the WebBrowser to get the pivot to move.
Next you can use the GestureService on this transparent rectangle to recognize vertical pans/swipes and taps to take you to a full page view of your WebBrowser content. In this full page view you would have a fully interactive WebBrowser control.
You have an issue with competing gestures. Try setting the WebBrowser control to IsHitTestVisible to false. This will mean that you'll be unable to manipulate or scroll the content of the WebBrowser control though.
shanu: if you still need it, check my recent answer at: WP7 Pivot control and a WebBrowser control
There's a bit of info on how to "hack into" the webbrowser and what to do, to (almost) prevent it from stealing your swipes. If you are insane/masochistic enough to try that approach I described there, then in addition to that eventhandling and other configuration/detection, you will have to drive your pivot manually via relevant pivot.selectedindex++/-- on H-swipes detected with your handlers (or you can separate blocking and observing with gesture listener, that may sometimes result in the code being a bit cleaner). I also think you will have to be careful with the selectedindex near to the page ranges. I dont know how pivot behaves if you order it to go further than you page count, and I dont know either if it will animate correctly, if being on the last page you order it to go "wrap around" and go to page 0 via selectedindex=0. It may get "crazy" and rewind back instead of going forward in a circular fashion.. you will have to experiment with that
If you tap on the left hand side of the screen in Outlook then an event is triggered (in this case a checkbox appears).
I would like to know the xaml on how this is achieved. It cannot be a simple "MouseLeftButtonUp" event because if you drag your finger more than a few pixels then the event does not trigger.
In my own app I am trying to get an icon appear within a listbox that has a SelectionChanged event. The issue is that if you do not touch the small icon precisely then you are triggering the listbox event rather than the event I want to occur when pressing the image.
I think I need to wrap my image in a Canvas but then am still stuck as to what the event should be.
How do you increase the target size of the area where a user can click on your element?
What event should an image have when within a listbox (which is within a pivot) that has a SelectionChanged event? (MouseLeftButtonUp causes issues if you half drag to the next pivot and lift your finger - it triggers the MouseLeftButtonUp event)
I implemented something very similar to that behavior by making an itemtemplate where the checkbox was pushed offscreen to the left by using a negative margin.
I then created 2 visual states, one for Open and Closed. The open state set the margin to 0, bringing the checkbox back onscreen. Closed state had the negative margin.
With the fluidmove behavior, switching between states on button press was EASY. The only thing you'd have to add would be an invisible button/touch area on the left that would also trigger "opening" the checkbox column (changing state to reset the margins).
Hope that helps...
The outlook app is a native app, so it probably isn't using xaml at all.
If you're worried about the mouse events, then you should look at the gesture stuff in the silverlight toolkit, it contains tap, etc events that make a little more sense on the phone.
Increasing the target size and generally making stuff touchable: wrap it in a Button, then alter the ControlTemplate for the Button to remove the border.
If you look at the ControlTemplate for a Button, (Expression Blend, Edit Template, Edit a copy) you'll see the mechanics of the touch area. It's nothing more than padding/margin.
Thus, you can't bleed your touch region out without altering the layout and affecting other items around the control. I'd do two things:
First, I'd think about whether my whole control should be larger in the first place with good spacing around it. Is my design right?
Second, I'd cheat. I'd float a fixed sized button with no border over the area using the Translate transformation to move it around freely.
Good luck,
Luke