WPF or WinForms - Draw a complex User Interface - c#

I want to build an App with a special UserInterface.
The idea looks like this image:
The big circle in the Middle is the StartPoint. The segments in the outer Circle are options the user can select. But to select an option the outer circle can be rotate and the selection is highlight or expanded on the right side of the inner Circle. But the outer cirlce is only level 1, I built more than one selection and for each selected option there comes the next outer circle with new Options.
Is this even possible in WPF or WinForms?
Regards
Chris

Pixels are pixels: you can do it in both ways.
The real question is: what platform offers me the best advantages in terms of simplicity/flexibility of development?
My two-cents answer is: WPF. No doubt.
That's because your goal is dealing with geometries, rotations, animations (maybe). WPF relies on a vector-based approach, which solves better problems like yours, although it might be a bit complex to deal with if you never had an experience.

Absolutely WPF. I've made simple games and physics simulations in WPF using transformations and rotations, and WPF makes it fairly painless.
Since you will be adding a lot of those items programatically, Winforms is based around the designer to add elements, so it may not give you the flexibility you would like, whereas WPF is better and more intuitive with run-time changes.

Related

How to create a drawing in a window in WPF

I've decided to learn a bit of WPF and I've created an application with the Mahapps Metro library and it interacts with a SQLite database (Unrelated but a bit of background).
I'd like to draw an object, let's say a triangle, in a new window.
I've seen this - Click - but the drawing of the shape needs to be visible to the user. So the user will see the line being drawn from point A to B to C to A. The image will "reload" after a few seconds i.e. Clearing the window/canvas and redrawing the triangle.
Are they any libraries out there that might make this easier or does WPF have something else I can use to achieve this?
Also, the redrawing of the triangle will be in a separate thread running a loop. Something tells me this isn't going to be very efficient. Is there a better way initiate a "redraw"?
My "answer" are some helpful searches and a few results that might help you get to the next step of deciding on a design that works for you.
Yes, WPF does have facilities to help you achieve some animation in drawing lines.
I searched for "wpf animate line drawing" and some interesting links for your research are:
How do you animate a line on a canvas in C#?
generating animated line
Drawing line "slowly" programmatically with wpf
Hopefully this gets you going in a good direction. Best of luck with your project.

Is a single pass dropshadow pixel shader possible?

I've been working on a project, in WPF/C#, at work which uses quite a few animations. As a whole the project is going very well, and we've managed to make the animations efficient and impressive.
The problem is, we had to remove drop shadows to make that a reality. This has been met with a bit of resistance, as drop shadows on our title text generally look nicer. Now that we are getting close to the wrap-up stage I was asked to take another look at drop shadows and see if I can't make a workable solution. I tried the standard drop shadow effect, which is notoriously bad, and the Windows.Themes.x.DropShadowChrome effect which is more lightweight but still not great.
I am currently approaching the issue by trying to make a custom control which is using a template selector to basically remove the drop shadows during animation, and things are going well enough but I was curious about making my own pixel shader. Once upon a time I learned HLSL, and I have made a few shaders before but try as I might I cannot seem to make a single pass (a requirement of wpf) drop shadow.
I'm honestly not even sure such a shader is possible and I couldn't find a definitive yes or no online. Anyone have any insight to the possibility/method of doing something like this?

Any Silverlight-based Thumbstick controls out there?

I'm trying to implement a simple game - I've written a dial control but having trouble writing a on-screen thumbstick in Silverlight for Windows Phone - this would be a large circle - say 150px wide with a 25px circle which when held down moves round the centre much like a real thumbstick - like the Xbox 360 controller thumbsticks.
I'm finding creating this a little tricky - if there are any examples such as a Joystick one I can shrink down for example? Been trying to create something for ages and can't seem to figure it out - the centre circle is loaded from an Image and the Larger one too so it can be customised - getting the two to be within each other centred is the easy part!
As discussed, i'd suggest using XNA doing it since its considerably easier to do. With Mango you could combine XNA and Silverlight and therefore satisfy your needs for some Silverlight too.
Look at this example:
http://create.msdn.com/en-US/sample/touchthumbsticks
It shows how to easily create a thumbstick control. To restrict the area which you can touch, just create a new Rectangle at the position of the thumbstick with the size you desire and use the .Contains(...) overload to check if the position of the tap is inside it and then act accordingly (update the stick, or ignore input).
Check out the .Contains(...) function and its overloads:
http://msdn.microsoft.com/de-de/library/microsoft.xna.framework.rectangle.contains.aspx
I have learned that many programmers tend to stick to Silverlight for they think XNA is some kind of holy grail and is complex to program. It is not. It just needs a bit of getting used to, but you will surely enjoy the ride to XNA enlightment. I can tell, i did :) It's fun! Just trust a stranger on the internet!
If you need to stick to Silverlight and Pre-Mango, i fear i can offer nothing of value for you, and i fear you will suffer pain in trying to recreate the same functionality XNA already offers programmers for no charge.

How to select, display and save regions of a graphic?

So here's the situation: I need to take a (user-specified) graphic, and allow the user to define and label regions within that graphic. For example, if you uploaded a picture of a face, you might want to define "right eye", "left eye", "nose" etc. Also, having defined the regions, if I select a previously defined region, it should be highlighted on the image somehow. These regions are (obviously) not necessarily rectangular, and they cannot overlap. And if you click within a defined region in the graphic, I would be able to identify which region was clicked on.
There are a couple ways I can think of for doing this, none of which are quite satisfactory. Another developer before me tried doing it with a transparent grid overlaid on the original graphic, fiddling with the background alpha/color for highlighting regions, but I think they rather kludged it. I could either get my hands really dirty trying to clean up their code, or try a completely new approach.
What would you suggest for maximum speed and user-friendliness?
Bounty added: for the best solution that will get me up and running in the minimum time.
The GraphicsPath class is made to do this. Keep a list of them along with the image. Draw the image first, then Graphics.DrawPath() to draw the regions on top of the image.
Hit testing is simple with GraphicsPath.IsVisible(). Iterate the list in reverse order so overlaps work.
Assuming you haven't decided yet on the technology you'll use, I'd suggest WPF; I find most graphics-related tasks easier with WPF (at least in version 4) and it's specifically geared for interactivity, so creating non-rectangular regions using mouse clicks and hit-testing clicks to select shapes would be pretty easy. Loading images is also easy.
However, if you haven't used WPF or Silverlight until now, there is some overhead in learning the basic concepts and APIs; so I'm afraid there's no real way I can recommend it as a maximum speed solution without knowing your (or whoever's will be working on it) competencies. That said, using MVVM and WPF would be definitely the maximum speed solution for me. Also the maximum user-friendliness since WPF enables quite interesting interaction models out-of-the-box, like multi-touch support (that's the trendy one that should be mentioned, right?) and easy non-standard layout and placement of controls.
You need polygons, saved as list of points. And you need hit testing for them. See the link:
http://social.msdn.microsoft.com/Forums/en-US/csharpgeneral/thread/40ebadc1-6154-4c7c-9cb1-d608a426b29c

Creating SPECIFIC Dynamic Visuals - House Plan w/ Objects (FOLLOW-UP)

Yesterday, I asked a question about how to dynamically render something in .NET: specifically, I asked about how to create a white "canvas" for "drawing"/rendering upon, what framework to use, etc. However, many of the answers suggested for me to ask a more specific answer, so right now, I have come up with a completely hypothetical (and random) example of what I want to accomplish.
The example is as follows: let's assume that I'm trying to create an app where the user can first draw some rectangles (by clicking or entering dimensions) to create the outlines of their house. Next, they would be able to draw small rectangles inside to signify objects inside the house. Also, they would be able to pan or zoom. (Don't forget, this is a completely random example.)
So, if I were to try to do this, I guess I have the following questions:
How do I create the white "canvas" for drawing everything upon? Some answers to my first question suggested using WPF, and I want to try that. Is there a specific control I need to add to the XAML to allow me to render such dynamic stuff on top of it?
How can I draw/paint figures like these onto the canvas, and how can I change this during runtime (panning/zoom)?
Do I need to create a simple coordinate plane for referencing and storing all the objects and their locations inside the "house"? If so, how?
I hope this isn't too general still, as I think that using such an example would allow people to effectively answer this question. Thanks!
HTML makes a great blank canvas.
Many games utilize OpenGL or DirectX for more advanced (eg. panning/zooming) features.
Unity is a pretty decent platform for such things from what I can gather about it.

Categories

Resources