WIndows phone 8 Popup control Position - windows-phone-8

What properties will make the Popup control Shows exactly over the mouse (On real device above the finger position on the screen while touching) in a windows phone application?
The xaml used is
<Grid Grid.Row="2">
<phone:WebBrowser IsScriptEnabled="True" MouseMove="mainBrowserControl_MouseMove" x:Name="mainBrowserControl" />
<Popup Name="ActionMenus" IsOpen="False">
<StackPanel Orientation="Horizontal" Background="Black" >
<Button Name="btnA1" Click="btnAq_Click">Annotation</Button>
<Button Name="btnHq" Click="btnHq_Click">Highlight</Button>
</Popup>
</Grid>
And the code i used for showing Popup is
private void mainBrowserControl_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
ActionMenus.IsOpen = true;
}
But the position of the Popup is on the top of Grid . How can i make it exactly above the mousepointer (or where the user touched on the screen)
In WPF Popup i can see some more properties like Placement and if we use Placement="Mouse" the popup will shown exactly over Mouse , But this property is missing in Windows phone

As you have not made any Rows in your Grid, any element added to the Grid will be placed on top of all other elements.
In order to place the popup where you want it, you must find out where the user tapped. It can be found in the MouseEventArgs input to the method:
http://msdn.microsoft.com/en-us/library/system.windows.input.mouseeventargs.getposition(v=vs.110).aspx
Then place the ActionMenus accordingly.

At first, if you want to popup show up anywhere on the page you should:
1) Create second grid, that won't have any rows, or columns over your content (with Horizontal and Vertical aligments set to Stretch) - it will be your placing field that will take the whole page.
OR
2) Add to a popup Grid.Row and Grid.Column spans.
Next:
As emedbo said you should catch MouseDown event and get the MouseEventArgs coordinates. And then you can do:
If you selected method 1:
Popup pop = new Popup();
pop.Margin = new Thikness (X,Y,0,0) // To set margin left and top to show popups left top corner under the finger.
Grid.Children.Add(pop);
//Syntax maybe little incorrect, because i'm writting this from my mind
If you selected method 2:
Popup pop = new Popup();
pop.Margin = new Thikness (X,Y,0,0) // To set margin left and top to show popups left top corner under the finger.
pop.*** //Here must be added Rowspan and Columnspan of the parent container
Grid.Children.Add(pop);
//Syntax maybe little incorrect, because i'm writting this from my mind

Related

Is it possible to handle the event that causes a WinRT flyout to close?

I've got a Windows Store app with a canvas that the user can draw on using the InkManager. In the bottom app bar there are some buttons for choosing color, stroke thickness, etc. These are implemented by showing a flyout element containing for example a color picker:
<Page.BottomAppBar>
<CommandBar IsSticky="True">
<AppBarButton ...>
<AppBarButton.Flyout>
<Flyout>
<ColorPicker .../>
</Flyout>
</AppBarButton.Flyout>
</AppBarButton>
</CommandBar>
</Page>
The problem is that most users (including myself) keep tripping over a little issue:
If you tap the button, the flyout opens, and you can select a color. Then you want to start drawing and move your finger (or the stylus) over the canvas, expecting to create a stroke with the new color. However, the touch event only closes the flyout. It seems that the flyout element somehow captures the pointer events (although it is no UIElement).
Is there any way to prevent this issue? Ideally, when you touch the canvas, the flyout would be closed but the same touch event would be handled by the canvas, so you can start drawing immediately.
I think a Flyout probably uses a Popup control to display its content, so if you could find that - you could change the IsLightDismissEnabled property. Otherwise - I'd simply use a Popup instead of a Flyout so you could control its parameters.
Here, try this:
var flyout = new SettingsFlyout();
Windows.UI.Xaml.Input.Pointer pointer = null;
flyout.PointerMoved += (s, e) => pointer = e.Pointer;
flyout.Unloaded += (s, e) => flyout.ReleasePointerCapture(pointer);
// cause it to hide
flyout.Hide();
Best of luck!

Panel to be autopositioned inside a canvas in Flex

I am developing a flex screen, in which i have a canvas, above to that there will be a button, by clicking that button we can create panels dynamically.My problem is if a panel was manually dragged and kept in the position where new panel to be created then new panel have to be created somewhere else that means not above any other panels.
How to achieve this..Pls give me any solution.Thanks
my first idea is that you keep array of created panels. while creating new panel, you should check in this list if any panel colides with the one you created (get x and y position and width, height and check if it kolides or not)
tou can also create new component based on canvas and override its addChild method.

Set pop up location

I have a JFrame with a JTextArea: by clicking on this TextArea a JPopupMenu appears with two items "Clear" and "Save".
private void jTextArea1MousePressed(java.awt.event.MouseEvent evt) {
jPopupMenu1.setVisible(true);
}
My question is: this popup always appears at position (0,0) but I would like to show pop where mouse is clicked, inside or relative to the TextArea.
I have try setLocation(x,y) but this methods always prompt in a fixed location and it is not what I am seeking for, and it is not available a method such as setLocationRelativeTo(JTextArea());
don't use a mouseListener as trigger to show the popup, instead use the JComponent componentPopupMenu property, like
myTextArea.setComponentPopupMenu(myPopupMenu)
Doing so will show the popup on right click at the mouse position by default. It has the additional benefit of covering keyboard triggered (LAF dependend, F10 on win) popup requests as well.
If for some reason you really need to manually show the popup, the method you're looking for is
myPopup.show(myTextArea, x, y)

How to popup a transparent Panel that is dismissed when clicked outside of it in Flex 4

I need to popup some buttons in Flex 4. Users should be able to see the background (ideally a little faded, but not important) around and in between the buttons. And clicking anywhere except the buttons should dismiss them all.
So I created a spark Panel and added a spark VGroup with some buttons. Then I call
PopupManager.addPopUp(myNewPanel, background, true);
My 2 main problems are the panel is not transparent and clicking outside the buttons doesn't dismiss them... How do I implement that?
UPDATE: Figured out how to dismiss the popup when clicking outside the panel with:
addEventListener("mouseDownOutside", close);
private function close(event:FlexMouseEvent):void {
PopUpManager.removePopUp(this);
}
Now I just need to figure out how to make the Panel transparent so you can see the background around and in between the buttons.
You should use FlexMouseEvent.MOUSE_DOWN_OUTSIDE instead of the string "mouseDownOutside". Code completion, compile-time checking and makes it easier for others to read your code.
For the background, you can use css to style it. Heres a list of all the css properties for a spark panel - http://docs.huihoo.com/flex/4/spark/components/Panel.html#styleSummary

Flex 3 custom components positioning - popups

I have created a custom TitleWindow whcih i use as a popup. The contents of the popup are created dynamically depending on a selection a user makes from a datagrid.
My problem is, my datagrid is in another custom component whcih is toward the bottom of my page so when a user clicks one of the items the popup is displayed however with half of it out of sight at the bottom of the page.
Is there a way to position a popup so that it displays at the top of the page?
I know at least two things you can use to position a popup, though there might be more.
When you place a popup you can choose in which parent component to place the popup:
PopUpManager.createPopUp(this.parent, TitleWindowComponent);
In the component itself:
PopUpManager.centerPopUp(this);
I wanted a help tooltip type popup (with help text) to appear next to the icon that opened it. In the end I used move(x,y) to move the window where I wanted it. To get the coordinates to place it, use globalToLocal:
var globalX:Number = localToGlobal(new Point(myIcon.x, myIcon.y)).x;
var globalY:Number = localToGlobal(new Point(myIcon.x, myIcon.y)).y;
toolTip.move(globalX + myIcon.width, globalY);
That puts the window just to the right of the icon, myIcon.