I am coding a sketching interface using UWP inkcanvas. Basically, I need to provide feedback to the user's drawings, like checking stroke correctness, shape beautifulness etc.. I am thinking about providing interactive feedback directly on the ink canvas, using arrows, auxiliary lines to highlight the difference between the input and a template. The best way I can think of is to add extra shapes to inkcanvas, just like using drawLine in JPanel. But I kind of figured out that strokes is the only acceptable format in UWP inkcanvas. I am wondering if there is still any way I can use to achieve this goal?
Thanks in advance.
InkCanvas is not suitable for drawing something programmatically I believe. The easy way is ... just overlay the canvas like following,
<Grid>
<InkCanvas x:name="myInkCanvas" />
<Canvas x:name="myOverlayCanvas" />
</Grid>
and draw your shapes to the myOverlayCanvas.
Related
I am very new to C# and WinForms. I am trying to create a segmented display where certain segments turn on and off (Using Microsoft Visual Studio 2015).
Right now I am placing picture boxes with segments I cropped and removed the background on in GIMP and it works fine so long as the segments are far enough away from each other, or are perfectly square.
When they overlap, with setting the picture box background transparent, the picture box is transparent straight through another picture box and just shows the background of the form window where the rectangular picture box is covering.
I tried two different things:
Changing default rectangular shape of picture box to any shape I can draw; not really sure how to do it and i don't think it is possible
Adding a bunch of picture boxes with a dark black picture and then rotating them and moving them to the correct position and turning them on when the particular segment comes on to cover up the problem. However, I don't think I can, or know how to just rotate an entire picture box when I am placing it? I have seen some code online on rotating picture boxes in C# but I am not sure how to implement it. I feel like with anything else there has to be a rotate option I am just missing.
Attached is a picture of the problem, notice how I sent the segment (line) to the back and the SMS quote image to the front. The dotted lines are the picture boxes:
You can use a WPF project to accomplish what you want. It is much more flexible than WinForms. Plus it supports true transparency. It does have a bit of a learning curve, but if you're just starting out, I think you would be better served to start with WPF.
You can rotate an Image (PictureBox) in WPF as follows:
<Window x:Class="WpfApplication.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="467" Width="616">
<Grid>
<Image Source="C:\MyFolder\MyImage.gif">
<Image.LayoutTransform>
<RotateTransform Angle="45" />
</Image.LayoutTransform>
</Image>
</Grid>
</Window>
The winforms designer does not have features for real UX design. It's mainly targeted for designing simple UI for data oriented application. You will not find any advanced features. You can resize the controls, align them, moving between containers.
There are advanced ways, how to change the shape of controls. But it is not available in winforms designer.
The transparency in winforms is fake. Actualy the transparency means "I'll show the background color of my parent". If you want "true transparency" you must draw the other controls as the background image of target control.
I have an ellipse within canvas in my windows phone application and I need to implement tap&drag behavior for it. I use ManipulationDelta event for that.
The problem is that ellipse is small and it is quite hard to touch it precisely and trigger manipulation.
So the question is how can I increase the area around ellipse which is responsible handling user touch and triggering manipulation?
you can take another bigger ellipse which is transparent and cannot be seen, keep the smaller ellipse on it, and then add the manipulation event on the bigger ellipse, what ever code you write, write it for the bigger one and your task is done.
You've got multiple options, like Hatim's suggestion of a larger Ellipse. Or another shape like a Rectangle so the corner could get hit better etc. However you'll have to embed them both in a parent object anyway so they share the events and move together. So might as well just use the parent object. Could also just use MouseDragElementBehavior instead of messing with the ManipulationDelta if you wanted. Something like;
<Canvas>
<Grid>
<MouseDragElementBehavior/>
<Ellipse/>
</Grid>
</Canvas>
Then you could use a Margin on the Ellipse or set the size of the parent Grid or a number of options to accommodate the requirements. Hope this helps.
I have the following layout in C# where WindowsFormHost host a OpenGL window. I would like to add a transparent canvas over it where I could draw 2D stuff. However this code doesn't work. Please help.
mc:Ignorable="d">
<Grid>
<DockPanel>
<WindowsFormsHost Grid.Column="0" x:Name="ScannerViewPanel"/>
<Canvas Background="Transparent"/>
Edit: after I add the canvas, the OpenGL content is not shown, but only the opaque canvas. I tried to make the canvas transparent, to set Opacity to 0, it's still Opaque.
From MSDN:
In a WPF user interface, you can change the z-order of elements to
control overlapping behavior. A hosted Windows Forms control is drawn
in a separate HWND, so it is always drawn on top of WPF elements.
You can't do that.
You most likely have an "Airspace" problem. This is exacerbated by the fact that you're using OpenGL - an API that has no solution to this problem. If you were using DirectX, you could do this.
i have a PictureBox in my Windows Form application and i am in the process of converting my application to Silverlight and i would like to know what is the alternative of PictureBox in Silverlight, Thank you!
Depending on the functionality of the PictureBox you are using, you could just use the Image control in Silverlight.
Image control is your only choice for this case, but you should be careful that this control just support .jpg and .png image extentions and for other formats you must create or use converters
What you might want to try is the Viewbox control. Then, inside of the Viewbox you can place an image. The great thing about the Viewbox is that you can always scale everything inside consistently, even as the VB resizes. Or, you can use the Image as #Chris pointed out and provided size limits and a scale setting.
Sample XAML:
<Viewbox x:Name="vb">
<Image x:Name="myImage" Source="pathToImage"/>
</Viewbox>
You could then place the Viewbox inside a Stackpanel or Grid to achieve proper layout. Hope this helps!
I want to do basic WPF graphics, i.e. rectangles, lines, circles and text.
When should I use Drawing and when should I use a DrawingVisual?
I have some code that uses Drawing and I render those to a DrawingImage and display that in an image control. Is this the right way? I could not see how to add text to a drawing. I had trouble positioning it too. Should I be rendering to a Canvas?
I have some code that uses DrawingVisual and writes to a DrawingContext. That is like WinForms. Is this the recommended way?
Do you have any high level advice on which APIs to use for basic graphics and labels? Will they options work on Silver Light and Desktop?
You mention in your comment that you're actually implementing scatter plots or similar graphs. Typically in WPF this is created by templating the existing controls, like a listview. It sounds counterintuitive, but this is far easier and more powerful than drawing your own.
This article by Charles Petzhold shows a scatter plot implemented in this way and goes into great detail about how to make it performant to 10,000+ data points.
You'll most likely want to just render to a Canvas. If you add "shapes" to a canvas, WPF will handle all of the drawing for you.
For details, see Shapes and Basic Drawing in WPF.