I am trying to implement a custom control which consists of a grid with some canvas elements as children , When a swipe action is made on the grid , I am intended to preform some operation with the canvas elements .
I am unable to handle the swipe for the grid , i have posted the same in the
msdn - win8 Dev forum
I was in the same boat as you guys, since there was no samples out there on how this was done, but after perusing and scrutinizing the MSDN documentation on how a swipe gesture is implemented on a Windows 8 Store app using C#, this is what i came up with (and it works for my app which requires swiping up / down / left / right):
First of all, instead of the GestureRecognizer, the Manipulation events need to be used, so on the grid that you want to handle the swiping (lets' say you make it so that it takes the whole screen so it interprets the gestures) do the following:
I called my grid swipingSurface and i'm handling manipulation modes for both the Y-axis and X-axis:
swipingSurface.ManipulationMode = ManipulationModes.TranslateX | ManipulationModes.TranslateY;
Then wire up the manipulation events that you want to be notified, in my case i just want to know then the manipulation started and when it ended:
swipingSurface.ManipulationStarted += OnManipulationStarted;
swipingSurface.ManipulationCompleted += OnManipulationCompleted;
Do whatever you want on your manipulation started, such as getting the initial point if you want. But the actual trick is on the ManipulationCompleted event, in which you need to get the Velocities resulting from your gesture, as follows:
public void OnManipulationCompleted(object sender, ManipulationCompletedEventArgs e) {
var velocities = e.Velocities;
}
The ManipulationCompletedEventArgs Velocities property will bring back a struct of type ManipulationVelocities, which contains other properties inside:
-Angular: The rotational velocity in degrees per millisecond.
-Expansion: The expansion, or scaling, velocity in DIPs per millisecond.
-Linear: The straight line velocity in DIPs per millisecond.
I'm actually looking at the Linear velocity, which is a Point that contains X and Y values indicating the direction in which the gesture was performed; for example, if the swipe was upward, you will notice that the Y value is positive, and if its down the Y value is negative; the same goes for the X value, if the swipe is left, the X values are negative and if the swipe is right, the X values are positive, so you can play around with those values and check your swiping direction, final points, etc.
Hope this helps.
You could try setting ManipulationMode on your swipe-able control and handling the Manipulation~ events. Note that some controls might stop bubbling of UI events, so if you say put your control inside of a Button or a ScrollViewer - the events might not work.
You could check out SwipeHintThemeAnimation that uses GestureRecognizer to hook up to a Rectangle control or modify it to use your Grid control, see the documentation.
Related
I need help. I have a Picturebox and would now like to calculate given coordinates on the picture and then play them in the label. How can I do that best?
As seen in the picture.
If you then click on the image on it, then the data is entered in a list box.
Thank you for your help.
My Picture here: https://prnt.sc/puxyu6
In WPF this particular might for once be the hardest. WPF/UWP is designed for the MVVM, and I do not know anyone but beginners that programm outside of MVVM. And I can not think of way to do this with MVVM.
PictureBox is also the WinForms Element. The WPF equivalent is called Image.
Navigation aids like this are not a trivial thing. One reason there are so few of it. But it comes down to few step process:
Get the x and y pixel coordinates that was clicked, also in relation to that the overall display size of the Image. Usually the MouseClick Event would be the tool for that, but I can not find it. MouseDown or LeftMouseDown are the closest events.
If the entire image was shown with no zooming or cropping, it is now just simple math. If it was 20% of the X axis and 21% of the Y axis, it is pretty easy to figure out where 20% of X and 21 of Y is on the SourceImage.
If there was any zoom or crop, this has to be taken into account, otherwise it is 2.
Equate the Image Pixel position with the coordinates you know for it.
Part 1 would look like this and needs to be registered with the MouseDown or LeftMouseDown Event of the Image:
private void ContentControl_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
//Unpack the sender
Image source = (Image)Sender;
//Get the click point
Point clickPoint = e.GetPosition(source);
//There is more then 1 height Property in WPF.
//The Actuall one is what you are looking for
//Unfortunately you get doubles for this and int for the other. Consider general advise regarding double math
double ElementHeight = source.ActualHeight;
double ElementWidth = source.ActualWidth;
//Do what you need to find the relative position
//Part 2
}
Hopefully someone else can give you a better answer.
I don't necessarily want to use the slider control but rather make the whole screen an interactive slider. For example, I'm practicing on a nightstand app and I'd like it so they can slide their finger down to lower the brightness or up to increase the brightness. I know this has been done in other apps but I'm not sure where to start. If someone could give me a starting point on what technique would work or any ideas in accomplishing this it would be great!
Thank you
You can use GestureListener from Silverlight Toolkit. Take a look at sample application provided with SL Toolkit. There is a sample page GestureSample.xaml. You will find there how to detect gestures.
One way could be to use Manipulation events. So, for example, you get the starting position in the ManipulationStarted event's ManipulationOrigin property . You can then get the final position in the ManipulationCompleted event's Manipulation property. Substract the two Y components and check if it's greater than or less than zero. If it's greater than zero, the user has moved downwards otherwise they've moved upwards.
private void LayoutRoot_ManipulationStarted(object sender, System.Windows.Input.ManipulationStartedEventArgs e)
{
startY = e.ManipulationOrigin.Y;
}
private void LayoutRoot_ManipulationCompleted(object sender, System.Windows.Input.ManipulationCompletedEventArgs e)
{
endY = e.ManipulationOrigin.Y;
if(endY - startY > 0)
MessageBox.Text("Down")
else
MessageBox.Text("Up");
//add check to see if it equals zero in which case the user didn't swipe
}
Alternatively, you could perform similar actions with the Silverlight Toolkit or the XNA Gestures. (They both differ slightly).
I want to implement a smooth/animated scrolling for a custom control in C#. I want something similar to the following javascript example:
http://www.kryogenix.org/code/browser/smoothscroll/#p0
My first idea is moving the scrollbars to the target point but stopping in intermediate points. For example, this is a very simplified idea:
public void SetSrollValue(int x)
{
// assume right scrolling
float step = x / 10;
while (scroll.Value < x)
{
scroll.Value += step;
}
}
My questions are:
Should I implement this in a thread?
Will this be painted smoothly (I suppose that yes if I have double buffer activated in my control)
So, if you know any good example, article, guide or similar, please could you provider a link here?
Thanks in advance.
To make the content of the control scroll, you pass the value of the AutoScrollPosition to e.Graphics.TranslateTransform(). That's your angle, alter the value you pass.
Write a little helper class that observes the value of the control's AutoScrollPosition with a method that you call in your OnPaint method, passing e.Graphics so you can call its TranslateTransform method. When you see it change, record Environment.TickCount, set an internal 'scrollBusy' flag and start a 15 msec timer. On each timer tick, call the control's Invalidate() method so that you'll calculate a new value for TranslateTransform when your method is called again. Calculate the increment from the original to the target scroll position so it takes, say, 250 msec.
I have a Pivot which contains a WebBrowser control that practically takes up the whole page (appart from the Pivot header of course).
I would like to figure out how to make the WebBrowser control allow for the user to swipe left/right to activate the Pivot control. Currently it just pans the WebBrowser control left/right
Can this be done??
Thank
While I cannot tell you exactly how to pass the swipes to the pivot, I can tell you how to do a part of the job: how to catch/analyze/disable custom gestures over the WebBrowser.
If I remember correctly, in the 7.0:
the WebBrowser component consisted almost only of an internal TileHost wrapped in some grids/borders
the TileHost did all the work related to processing touch events
the TileHost did it completely internally (in the native layer), without the .Net seeing any manipulation-events (I think), or at least it ignored all the attempts to handle/override the manipulation-event on the upper layer. The WebBrowserInterop class was mostly empty in these matters.
Now, in the 7.5 that I have (maybe on 7.1 too, I dont know), it seems that the MS is working really hard on some WebBrowser manipulation problems --- I think they are working towards having the scrolling/swiping fully processed by the .Net layer. They have written a special class PanZoomContainer and injected them into the VisualTree of WebBrowser's internal template. The WebBrowserInterop was greatly enriched with many tunnels for event notifications. The WebBrowserInterop hooks into PanZoomContainer's ManipulationEvents, then passes them to the native layer. Also, it listens to events/commands from the native layer, called for example "ZoomAndScroll" or "ShowSIP" - and mostly passes them back to the PanZoomContainer. The idea is crystal clear right? They have rewired the event handling from completely-internal to a bit of spaghetti, but have achieved passing them through the PanZoomC.
Now, whats in that for me/us?
It is the PanZoomContainer, whose Mani-Events are inspected. The TileHost does not capture them now. In this version of the WebBrowser control, it's VisualTree consists of some borders, grids, a PanZoomContainer and a TileHost (the renderer). It is similar to that:
WebBrowser
PanZoom
ContentPresenter
Border/Name="border" <- you want this one
TileHost
I've skipped a few Borders and Grids, they are mostly irrelevant to the problem. Now, if the PanZoomContainer's Mani-Events are listened to, let's block them!
Using VisualTreeHelper, just dig deeper and deeper until you find a FrameworkElement.Name=="border". This is the border that wraps the TileHost that is the "renderer" that takes 99% space of the control. Be warned that there's a ContentPresenter, so you may have to wait until the controltemplate gets instantiated (ie. Loaded/LayoutUpdated).
Once you have your hands on that Border, attach all Mani-Event handlers to it: started, delta and completed. PanZoom is a normal xaml/silverlight/.net/etc control, so it actually obeys e.Handled = true :) Now, if you want to disable ie. vertical scrolling, filter the Delta and Completed events for Translation.Y<>0. If you want to disable tapping but leave srolling/panning - filter X==0&Y==0.
And that was the easy part.
The hard part is to experiment with filtering on different Start/Delta/Stop and adjusting the behaviour to your likes.
Although it might look very nice and tempting, this will NOT get you any real/nice results easily. For example, I wrote "if you want to disable vertical scrolling, then set a filter 'if y==0 then e.handled=true' ". Great? easy? Not!
Assume we want to "disable bouncy horizontal panning" while leaving "vertical scrolling". or vice versa, whatever, it is only an example:
Here's a small rectangular device with a sensitive touchscreen. Please make such a vertical swipe/pan/drag on the screen, that the resulting X-compound will be ZERO. If you set such filter, it will be almost impossible to it properly. Your users will want to kill you for forcing them to retry-that-vertical-scrolling for five or more times, until they make a perfect vertical swipe.
Of course you can make it not ==0, but leave some small margin. ok. But if you make the margin too big, the control will catch the intermediate offaxis movement and make a tiny horizontal pan also.. After a few unlucky vertical swipes, the total horizontal pan may accumulate from those small leftovers will accumulate and the diplacement maybe will be noticeable.
But there's some another vile side effects:
Saying shortly, you have commited e.Handled=true. The event is GONE. Dead. Deased. if you just wanted the WebBrowser to SKIP for example horizontal swipes, so that the outer (Pivot) control notices them and processes..... whoops. The event is GONE. Earlier, the TileHost/PanZoomC have extinguished the events, now you have it done yourself. Sounds like a bad joke, eh?
Fortunatelly:
since you have attached your handlers to the bottommost "border", they may not only block the events, but may also actually listen&publish them elsewhere. That is, if those handlers detect an interesting movement, they may e.Handled=true on it, but at the same time they can notify your custom objects about that discovery, and ie. start your storyboards.
mani-events are at hand, but there is also a second layer that listens to the manipulations: the GestureListener/GestureService from the Silverlight Toolkit. It reports events after they are handled by mani-events, but it reports them with no regard to any e.Handled=true that were set on them. It is completely separate gesture-listening mechanism, and you can also use it to detect manipulations that were 'cancelled'
.. and so the fun goes like that and maybe even a little further.
This is similar to putting a Map inside a Pivot - which is discussed here - http://mine.tuxfamily.org/?p=111 - already mentioned in quite a few questions - https://stackoverflow.com/search?q=mine.tuxfamily.org
In general, the advice seems to be usability based:
try to avoid putting controls which use Touch inside the PivotItem's
As an aside, if you are just using the web browser control for a very small amount of static html (so you don't need any scrolling at all) then you could just remove HitTesting from the web browser.
I do not know WP7 Pivot, but are there any Preview* events on the Pivot control that allow you to handle the touches and mark them as processed?
Call the below method and pass your parameter as PivotControl x:name and WebBrowserControl x:name to this method.
Here the WebBrowserControl is placed in second pivot item i.e. Pivot Index is 1 and I am trying to swipe left or right and reach to pivot index 2 or 1 respectively.
public static void SwipteLeftRight(Microsoft.Phone.Controls.Pivot pivotControl, Microsoft.Phone.Controls.WebBrowser webBrowserControl)
{
var gesListener = GestureService.GetGestureListener(webBrowserControl);
gesListener.Flick += ((sen, args) =>
{
if (args.Direction == System.Windows.Controls.Orientation.Horizontal)
{
if (args.HorizontalVelocity < 0)
{
if (((Microsoft.Phone.Controls.PivotItem)(pivotControl.SelectedItem)).Header.ToString().Trim() == "Pivot Item name")
{
pivotControl.SelectedIndex = 2; //Next Pivot item
}
}
else if (args.HorizontalVelocity > 0)
{
if ((Microsoft.Phone.Controls.PivotItem)(pivotControl.SelectedItem)).Header.ToString().Trim() == "Pivot Item name")
{
pivotControl.SelectedIndex = 0; // Previous Pivot Item
}
}
}
});
}
It worked for me. Cheers
I have a windows forms application where I would like to find the handle of a DirectX application, find a DirectX button in that window, and Click it.
Is this possible, and if so, where is the best place to start?
Thanks!
This is really not possible.
Unlike Windows Forms, a "DirectX Button" has no distinct windows handle. You don't actually "click" a button in a DirectX window, but rather send a mouse click to the entire DirectX window, and allow the application to do its own hit testing to "click" the "button" (which is just a graphic).
The closest you could do would be to send a mouse click to a location within the window - however, finding the location of a "button" could be very difficult.
Actually, it isn't too difficult if that is the case. A DX object can receive an click if you can isolate the object with the mouse through a reversal system, depending if it is 3D-based or 2D-based. 2D is using masking effects, and 3D adds on to translate to and from 2D/3D based space on certain properties utilized in vector calculus.
Pretty much from logical space, in 3D, a slice of the 3D object is mapped to 2D space, which is then mapped to camera space, which is then rendered. Crude, there is much more to it then that, but I'm keeping it as simple as it can be. Now the task is to find the 2D volume/per-pixel location, translate a copy of the 2D render of a 3D object on an image that will be/is already a DeviceContext for the monitor to show () to a map, and unionize a clickable object (which will run the intended code, just as a button should) to the 2D map object copy.
In other words, find where in the screen the object is rendered and generate a clickable mask over the rendered portion of the screen. Whether it is a bitmap mask, or a polygon mask, or a cube mask, or any other shape you can mathematically create; so long as the 2D clickable object actually interfaces with the mouse position and state in an constant-update system.
For example, say that application is full screen, that the resolution is 800 x 600 (keeping it simple, it could be anything), and that the object you wish to be able to interact, that is rendered in a context that doesn't permit it of it's own accord (*1), and that the rendered object shows a rectangle. Lets say that is the point of it, and the system you use for the translation outputs a Rectangle (C#.NET code, yea, but it's just an example, there are better floating around). So we can say that the mask rectangle coordinates are identical to to the rendered object coordinates.
So let's say: "Rectangle mask = new Rectangle(100, 100, 200, 100); // X starting point, Y starting point, Length, Width." Pretty self-explanatory. Add a per-frame cursor position compared with mask positions, will indicate if the cursor is above the mask, and with extra coding, can indicated if the cursor clicked (or other events) while being within the mask's range.
So let's say the button opens the main menu. And an event happens, particularly a "MouseClick" event, while the cursor hotspot is at Point(125, 200). Which of course was in the range of the mask. In this instance, through all that trivial code, opens the main menu. It is easy to add new clickable objects within this system if it is done right.
Yes, other, easier ways exist. But from them all, this is one of the more dynamic and flexible systems. Uses range from the cash you get as loot in a game that you have to click to pick up, to the UI, to the menu's, to anything clickable. The range isn't in just games, either. Custom UI designers who like to reinvent the wheel can and have taken advantage of similar systems, such as myself, like to define every aspect from the microcode to the macrocode. Precisely, to define the macrocode as it is needed, as it is expected and without unnecessary bloat through microcode management. Not saying I like microcode, as it can be way too bloody finicky, and often times, is. Worth it for the few hundred FPS you get from streamlining it right (the first time), though... >:-D
*1 = (predictable in 3D Rendering models, from the point of view Rendering is not Modifying (which seems to be including object selection (through the mouse/cursor position and all that), which is essentially what your looking for) and as such not included (directly). Through translation it becomes possible, with the finest precision if done right. Further to that, DirectX, OpenGL, and others like, are defaultly Renderers.)