BingMapControl WP7 XAML Databinding Center - xaml

I have the following XAML declared:
<controls:PivotItem Header="map">
<my:Map x:Name="map"
CredentialsProvider="Hidden"
Mode="Road"
Center="{Binding AppState.MapCenter}"
ZoomLevel="15">
<my:Pushpin Location="{Binding AppState.MapCenter}" />
</my:Map>
</controls:PivotItem>
The binding works fine - except that the map does not stay centered (initially it centers correctly using the binding on the Center property). The application allows the user to move through a series of records with differing GeoCoordinates. As this happens the bound Pushpin moves appropriately, however eventually it moves off the map because the map does not re-center itself. How can I get the map to re-center itself using data-binding?

I found a second and better resolution that enables databinding. I set the binding mode for the Center to TwoWay:
Center="{Binding MapCenter, Mode=TwoWay}"
This meant I could not bind directly to the GeoCoordinate value on the record that I was mapping (because I did not want that value to be updated if I moved the map center by panning). Instead I had to have a separate property in my view model to bind to which I kept updated with the required GeoCoordinate value from the selected record as the user scrolled through data.
It is strange that the Center property required two way binding whereas the pushpin worked fine without two binding.

At this stage the only resolution that I have found is to set the map view in code each time the mapped point changes as follows:
map.SetView(ViewModelLocator.AppStateStatic.MapCenter, 15);
I would have liked it to work with data binding.

Related

Xaml Grid Visibility Transitions

Since I cannot find any official documentation about it I need to ask this questions. Is there any way to animate grids on visibility change?
I have tried adding TransitionCollections to grids but it works only the first time that grid initialized.
I also tried this answer but it also wont work because Grid.Loaded event fires even if grid is collapsed.
You can use event Loaded(). Just add attributes in XAML
x:DeferLoadStrategy="Lazy" Visibility="Collapsed"
and element will be completely collapsed.
To load it use somewhere in C# code standart:
SomeHiddenElement.Visibility = Visibility.Visible;

VariableSizedWrapGrid does not size correctly if control size modified in code

I am creating a UWP app and I am using the VariableSizedWrapGrid control. I am binding the Width of the a ComboBox in the grid to it the ComboBox width resizes based on the entries in the list. ( I am using a simple property exposed through my view model.) When I had the items in a StackPanel with a Horizontal orientation it worked fine. See picture below
The challenge of course is that on a smaller screen I need the fields to wrap around. So I switched the StackPanel to a VariableSizedWrapGrid. However, when I do that, the Grid does not seem to be handling the resizing of the ComboBox correctly as I get what is shown below. (See the ComboBox is now cut off
Any suggestions on how to resolve this would be greatly appreciated.
You are using the wrong Panel for the job. The one you're looking for is a WrapPanel (which doesn't exist actually though), but there are some implementations available, eg.: http://codepaste.net/8gr5go

Drag using Toolkit Gestures goes crazy on Landscape Orientation

In a WP8 app, I have a ListBox bound to an ItemsSource with a Grid as it's ItemsPanelTemplate. The layout of the Grid might be different each time (different number of rows/columns) based on user selection and I'm using a helper class in order to bind the ItemsPanelTemplate Grid's Row and Column Definitions to values read from a database.
The user can add item's to the app and assign each item to a Grid cell in the ListBox. Each item can "sit" in multiple Grids (a many-to-many relationship), which led me to use another binding helper class in order to set the bindings of Grid.Row and Grid.Column attached properties in the ListBox.ItemContainerStyle, bound to a property of the ItemsSource class.
Another requirement is to have the app in Portrait orientation when Rows.Count >= Columns.Count and in Landscape when the columns are more.
I'm also using the Toolkit Gestures for drag and drop operations.
The issue in question, is a drag issue on Landscape orientation. While everything works great on Portrait, while on Landscape orientation the ListBox goes crazy. The dragging happens to different cell's that those actually being dragged and some of them don't even raise the gesture events (DragStarted, DragDelta, DragCompleted).
I'm lost here, don't know what the issue might be, or how to solve this.
Need your lights please.
Here is a sample that illustrates the problem.
EDIT
Phew, it's a bug of the GestureListener on the toolkit. It does not respect the Landscape orientation and treats the UIElements as if they were rendered in Portrait.
Using the Manipulation Events instead, which work properly. Can I have my 50 bounty points back? :P
If it is not gesture listener but Manipulation Event you are looking at there is couple of good questions out there:
Drag and drop from list to canvas on windows phone with MVVM
Moving Object in ScrollViewer

ScrollViewer and handling manipulation events on child elements

I have created a Windows 8 Store App using C# / XAML. My interface includes a scrollable list, which is rendered using an ScrollViewer. I would like to be able to handle manipulation events on the elements within the list, however, setting ManipulationMode to anything other than None on the list element causes my list to no longer scroll.
Here is a simplified version of the UI:
<ScrollViewer>
<Border/> <!-- these contain child content -->
<Border/>
<Border/>
<!-- Set ManipulationMode on an element in order to receive manipulation events -->
<!-- This causes the scroll viewer to stop working! -->
<Border ManipulationMode="All"
ManipulationDelta="..."/>
<Border/>
<Border/>
</ScrollViewer>
I understand that the WinRT ScrollViewer uses a special ManipulationMode of System for performance reasons, but I would like to have a vertically scrolling list, containing elements that respond to horizontal manipulation / gestures. Can anyone think of a creative workaround that would make this possible?
it may be long time but didn't find any good solution. I just achieved what I wanted very easily.
public MovableGrid()
{
ManipulationMode = ManipulationModes.TranslateX | ManipulationModes.System;
AddHandler(ManipulationDeltaEvent, new ManipulationDeltaEventHandler(UIElement_OnManipulationDelta), true);
AddHandler(ManipulationCompletedEvent, new ManipulationCompletedEventHandler(UIElement_OnManipulationCompleted), true);
}
I wanted my MovableGrid to be moved on X axis and I have list of MovableGrids which I wanted to be scrolled with scrollviewer. That's enough to do that.
What I have done was I put a transparent rectangle on top of the ScrollViewer and handle manipulations there. When I find the manipulation should scroll the ScrollViewer - I scroll the ScrollViewer using the ScrollToHorizontal/VerticalOffset() methods. On ManipulationStarted I also use VisualTreeHelper.FindElementsInHostCoordinates to check which item I could manipulate too and then I can decide whether to manipulate that item or not depending on various conditions. It's quite a bit of custom code though. You would also need to update the RenderTransform of the ScrollContentPresenter in the ScrollViewer when the user tries to drag farther than minimum/maximum offset to immitate the ScrollViewer default behavior, handle mouse scrollwheel etc. Nothing YOU could not handle of course. I could not find a better way unfortunately and I am interested if someone finds one.
EDIT* Another solution I thought of when trying to answer another similar question was to use another ScrollViewer as a child item and use its ViewChanged events instead of manipulation events.
EDIT 2*
Also with Windows 8.1 you get ManipulationModes.System which combined with other modes should allow you to handle manipulations inside of a ScrollViewer. Then you can call CancelDirectManipulations() on the manipulated element once you want its parent ScrollViewers to stop processing manipulations for pan&zoom.

how to create a calculator like interface with xaml?

I wish to use XAML to create a calculator like interface.It should contain buttons upto 1000.
I've read about virtualizing stack panel but i'm not sure how to use it with a listbox and do data binding with that list for the content. Can you please help me with virtualizing stack panel concept
ListBox includes a Virtualizing StackPanel by default, so you dont need to worry about it, or how to implement it. FYI, the Virtualizing StackPanel only creates UI elements (in your case the Buttons), when they come into View. An aditional improvment is to switch on container Recycling:
<ListBox VirtualizingStackPanel.IsVirtualizing="true" VirtualizingStackPanel.VirtualizationMode="Recycling" />