I'm creating a WPF application that use the Bing Maps. I put it in a page control that at the same time is called from an iframe control. At the begining it displayed the Map and I can zoom in and out without a problem.
The thing is, that when I click the Map with the left button of my mouse what it does is to go down a little bit of the current location and a zoom in is done automatically instead of holding the point where the click was done to do a kind of drag and drop. Just like Google Maps does.
Here is my XAML code:
<Grid x:Name="LayoutRoot">
<TextBlock Text="News page" FontSize="32" />
<m:Map CredentialsProvider="..."
Center="25.6732109,-100.309201" ZoomLevel="12" Mode="Road"/>
</Grid>
I'm using the following assembly reference: xmlns:m="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF"
Does any one know how can I fix it?
Regards!
If you use the mouse up or down events on the Map control this will work fine. The map itself doesn't expose a Click event of it's own, but you don't need that if you use the mouse up/down events.
I had the same problem. The solution was to add a MouseDown Event to the map:
<m:Map
CredentialsProvider="<your Credentials>"
Center="{Binding Center, Mode=TwoWay}"
ZoomLevel="10"
MouseDown="Map_MouseDown">
</m:Map>
In the code behind you can add:
private void Map_MouseDown(object sender, MouseButtonEventArgs e)
{
e.Handled = true;
}
This handles the event and no further processing is done. After this moving and draging the Map worked as usual maps do.
Related
We have a UWP application that uses a SwapChainPanel for rendering 2D content, we'd like to be able to drag and drop files on it.
First approach:
Firstly I just tried using the events on the SwapChainPanel itself, they never get called.
<SwapChainPanel x:Name="swap" AllowDrop="True" DragEnter="Swap_DragEnter" >
</SwapChainPanel>
Second approach:
I then tried putting a transparent rectangle in the SwapChainPanel. The drag events do work now, but the SwapChainPanel now doesn't receive any pointer events at all.
<SwapChainPanel x:Name="swap" >
<Rectangle Fill="Transparent" AllowDrop="True" DragEnter="Swap_DragEnter" />
</SwapChainPanel>
Third approach:
It seems the SwapChainPanel doesn't work like a normal XAML control, so I assumed I'd have to handle the drag events in the c++ code that runs the panel. But there doesn't seem to be any way of doing this, there are only references to the basic pointer events.
...
coreInput_ = renderPanel_.CreateCoreIndependentInputSource(deviceTypes);
coreInput_.PointerPressed({this, &InputManagerImpl::onPointerPressed});
coreInput_.PointerMoved({this, &InputManagerImpl::onPointerMoved});
coreInput_.PointerReleased({this, &InputManagerImpl::onPointerReleased});
coreInput_.PointerEntered({this, &InputManagerImpl::onPointerEntered});
coreInput_.PointerExited({this, &InputManagerImpl::onPointerExited});
coreInput_.PointerCaptureLost({this, &InputManagerImpl::onPointerCaptureLost});
coreInput_.PointerWheelChanged({this, &InputManagerImpl::onPointerWheelChanged});
...
So now I'm not sure how I can peform drag/drop operations? Thanks!
I think you could place your SwapChainPanel inside a Grid, and put the drag and drop onto the grid. You might loose interaction with your render scene though. And, make sure, since it's transparent, it accepts user input.
For example:
<!-- add attributes and drag and drop functionality on Grid -->
<Grid AllowDrop="True" DragEnter="Swap_DragEnter">
<SwapChainPanel x:Name="swap">
</SwapChainPanel>
</Grid>
I just got started with an app for WP8.1, and encounter a problem with intercepting touch move events while leaving the original event treatment in place.
What I want to do is the following:
I have a ListView in a StackPanel in a ScrollViewer in a Grid. The ScrollViewer handles vertical scrolling of the StackPanel/ListView.
Whenever a horizontal touch move appears, I'd like to get a notification so I can adjust some ui element's position based on the horizontal movement.
Sounds simple enough, but any way I tried seems to cancel the original touch move treatment by the ScrollViewer, so the vertical scrolling is not working anymore. I'd really hate to implement the whole scrolling behavior myself ...
I tried already:
Putting a ManipulationMode="TranslationX" ManipulationDelta="handleXTranslation" on the ScrollViewer. The handelXTranslation handler is never called for whatever reason.
Putting the same Manipulation information on the ListView - now the handler gets called (and all handlers of the parent ui elements), but the ScrollViewer is not handling the scrolling anymore, probably because the ListView is not propagating the event to its parents anymore.
Adding a general touch handler to the xaml class when it is loaded. Same problem - either it is not called, and if it is called the scrolling of the ScrollViewer is not done anymore.
The XAML code looks like this (stripped of some data):
<Grid x:Name="LayoutRoot" Background="Transparent" ManipulationMode="TranslationX" ManipulationDelta="gridTranslationX">
<ScrollViewer x:Name="ScrollViewer" ManipulationMode="TranslationX" ManipulationDelta="scrollViewerTranslationX">
<StackPanel x:Name="StackPanel" Orientation="Horizontal" ManipulationMode="TranslationX" ManipulationDelta="scrollViewerTranslationX">
<ListView x:Name="ListView" ManipulationMode="TranslationX" ManipulationDelta="scrollViewerTranslationX">
</ListView>
</StackPanel>
</ScrollViewer>
</Grid>
And the handlers I tried to install in code look like this:
this.AddHandler(UIElement.ManipulationDeltaEvent, new ManipulationDeltaEventHandler(genericDeltaHandler), true);
ListView.PointerMoved += new PointerEventHandler(pointerEvent);
Is there any way to just observe the manipulation events without disturbing their normal treatment?
Sometimes it helps to talk about it ;-) ...
The answer was indeed as simple as adding the System value to the ManipulationMode on the ListView:
<ListView x:Name="ListView" ManipulationMode="TranslateX,System" ManipulationDelta="translationX">
I'm presently using a Windows.UI.Xaml.Controls.FlipView class to display a series of images in a Windows 8 Metro app. In the normal use case, the user can flip back and forth between the images, so a FlipView works wonderfully.
However, there is a specific scenario where the user enters a mode where they can only flip the images forward, i.e. they can't flip backward, until exiting this mode. I've been trying to figure out if there's a simple way to disable flipping backward on a FlipView, but have not found an obvious solution.
Is there a good way to do this using a standard FlipView, or do I have to switch to a different control, or even write a custom one?
What a strange request.
Hopefully, this doesn't seem too simple. It gets the job done in 3 lines!
Here's how (just remove them after they view them):
private void FlipView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var _ItemsCollection = (sender as FlipView).Items;
foreach (var item in e.RemovedItems)
_ItemsCollection.Remove(item);
}
<Grid Background="Black">
<FlipView FontSize="100" SelectionChanged="FlipView_SelectionChanged">
<x:String>0</x:String>
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
<x:String>4</x:String>
<x:String>5</x:String>
<x:String>6</x:String>
<x:String>7</x:String>
<x:String>8</x:String>
<x:String>9</x:String>
<x:String>10</x:String>
<x:String>11</x:String>
<x:String>12</x:String>
<x:String>13</x:String>
<x:String>14</x:String>
<x:String>15</x:String>
<x:String>16</x:String>
<x:String>17</x:String>
<x:String>18</x:String>
<x:String>19</x:String>
<x:String>20</x:String>
<x:String>21</x:String>
<x:String>22</x:String>
<x:String>23</x:String>
<x:String>24</x:String>
<x:String>25</x:String>
<x:String>26</x:String>
<x:String>27</x:String>
<x:String>28</x:String>
<x:String>29</x:String>
</FlipView>
</Grid>
Best of luck!
My issue is that I have a few controls (buttons, combo-boxes, hit test visible controls, etc) that are on top of a scrollviewer. Now there is no reason for these controls to consume a pointer wheel changed event, and in checking so they do not. But it seems that when the pointer is over these controls and I attempt to scroll, the scrolling event does not get fired on the scrollviewer (I believe that actual event that is supposed to fire is ViewChanged). Now the buttons and stuff should still handle their regular events, such as PointerPressed, KeyDown, etc. But I want to stop them from consuming the event that would cause the scrollviewer to scroll. Any ideas? Thanks in advance.
This is a quick example of what I'm dealing with:
<Grid>
<ScrollViewer>
<StackPanel>
<!-- Insert any number of things here -->
</StackPanel>
</ScrollViewer>
<Button>Hello World</Button>
</Grid>
Add an event to the controls:
public void UIElement_PointerWheelChanged(object sender, PointerWheelChangedEventArgs e)
{
e.Handled = false;
}
So I have a Panorama control and the PanoramaItems are programmatically added to the control using the following template.
<UserControl>
<Grid x:Name="LayoutRoot">
<controls:PanoramaItem Name="sitePanoramaItem" Header="{Binding Name}">
<Controls:DockPanel VerticalAlignment="Stretch">
<StackPanel Orientation="Horizontal" Margin="0,10,0,0" Controls:DockPanel.Dock="Top">
<Image Source="../Images/action.png" Width="64" />
<TextBlock Text="{Binding Stats, Mode=TwoWay}" FontSize="45" Margin="15,0,0,0" />
</StackPanel>
<Grid x:Name="graphCanvas" HorizontalAlignment="Stretch" Margin="10,10,10,10"> </Grid>
</Controls:DockPanel>
</controls:PanoramaItem>
</Grid>
</UserControl>
When I click on graphCanvas what I'd like to do is sorta pop the graphCanvas out and display that fullscreen then when I click again restore it to where it was. I've been all over this site and Google and can't find anything similar to what I'm looking for.
I would still like to maintain the Panorama control functionality so that the graphCanvas is still the only one visible but you can cycle through them. Currently I have it sorta working in that I remove the Grid from the DockPanel and put it directly in the LayoutRoot while making the sitePanoramaItem collapsed. However, it's not fullscreen as the Panorama name is still visible (I guess I could hide that as well...) When I put the graphCanvas back int he DockPanel the size of the canvas is all screwed up.
I was hoping there was a simpler way.
Is it even possible?
It is possible to create the UI you describe but it's not going to be simple. You're on the right track with removing it in code and adding it the LayoutRoot and making the Panorama hidden. However you would have to code the scrolling behavior yourself and that is going to be quite tricky - especially making it feel the way to panorama does.
One trick you could try is actually layer a PivotControl on top of your Panorama and have it be collapsed by default. Also edit it's template to remove all default content eg: remove the header control, set margins to 0, etc). Then when you want to go full screen you can remove all the graphCanvases from the Panorama items and and add them to new PivotItems in the PivotControl. Then hide the Panorama and show the Pivot. This will give you scrolling capability for free and the illusion of full screen.
Having said all that I'm not sure I would recommend this. The more common approach would be to simply be to navigate to another page when the user selects an item and handle the full screen aspects there (possibly using the Pivot control again for scrolling). And when you want to leave "fullscreen" mode simply navigate back to the first page. Handling Tombstoning of the fullscreen state will be much easier with this approach for one thing.
You can try making the graphCanvas a Page and putting it in a different XAML. Then add a frame (name it InnerFrame for example) in the same place where you have the graphCanvas right now and navigate to that page with InnerFrame. When the frame is clicked, you navigate with the RootFrame of the app to your graphCanvas page. When you decide to close it, just navigate back with the RootFrame.
Hope it's clear enough :)
Edit:
Navigation in WP7 works very similar as the standard navigation in Silverlight 4, but it's a bit more restrictive. Just throw a PhoneApplicationFrame in your XAML like this:
<phone:PhoneApplicationFrame x:Name="Frame" />
This is basically the same as a Silverlight frame. All the pages you create inherit from PhoneApplicationPage by default, so they can be showed in a frame without any changes.
Your whole application actually runs on a PhoneApplicationFrame. If you take a look at your App class you will see this:
public PhoneApplicationFrame RootFrame { get; private set; }
Here's the MSDN documentation for the navigation system on WP7