I am creating a custom control for semiconductor wafermap
Each of those small rectangle need to satisfy following requirements;
1) Tooltip to show the index
2) clickable to include or exclude from the wafermap definition.
no of dies in the wafermap may cross 2 millions in the case of 1400 x 1450 dies.
at certain point i need to show all the dies in a window (most of the clicking will happen in zoomed view).
Currently I am adding each die separately using Rectangle shape and store the coordinate information (index like (10,10)) for the tooltip as an attached property.
I use different style to each die; depending on certain calculation and position of the die.
DieStyle1 = new Style { TargetType = typeof(Rectangle) };
DieStyle1.Setters.Add(new Setter(Shape.FillProperty, Brushes.MediumSlateBlue));
DieStyle1.Setters.Add(new Setter(Shape.StrokeProperty, Brushes.White));
DieStyle1.Setters.Add(new EventSetter(MouseDownEvent, new MouseButtonEventHandler(DieStyle1_MouseDown)));
this approach is slow and use high memory too. so suggest a better way to achieve this in WPF?
In creating a designer for christmas tree lights, I ran into the same problem. Using UIElement or Shapes is way too slow when you get to 100+ items. The best approach to handle a very large number of items entails using double-buffering with your own managed buffer of the image and a structure to handle the clicks. I have posted my project which should give you a good start. It can be obtained at:
http://sourceforge.net/projects/xlightsdesigner/
You are interested in the Controls\ChannelitemsCanvas.cs. It can be modified to suit your needs and uses a quad-tree to store the rectangles so that click events can be quickly determined.
Related
I want to create a plot that dynamically displays active elements as rectangles. I have achieved a first version that is actually ok using OxyPlot.Annotations.RectangleAnnotation which I add to myPlotModel.Annotations, you can see it in the image hereafter:
Example of wanted display
The thing is that after a while, the amount of drawn rectangles make the update not smooth as I update the shown timewindow (which is set to 15 seconds). I have already set a maximum of drawn elements that suffice to cover the displayed window (i.e. the rectangles get removed as they are too far in the past), but the rendering is still jerky. I draw the rectangles by allocating them to an equal fraction of the Y-axis, that is the third one from the top gets:
rowNumber= 3.0
minimumY = maximalY - maximalY / totalElements * rowNumber
maximumY = maximalY - maximalY / totalElements * (rowNumber + 1.0)
And the Y-axis is hidden.
My question:
Is there a smarter way of creating such a display that would be less computationally heavy, and therefore allow a smoother update? I do not have to stick to OxyPlot, it is simply the easiest way that I found to obtain what I wanted.
Thanks for your answers!
Technically, the answer to your question is "Yes".
There are a number of ways to do this.
You could have a vertical itemscontrol that had an itemscontrol in it's template. That could have a canvas as it's itemspresenter and you could bind canvas.top and canvas.left to properties in it's content. Template each into a rectangle and bind height and width.
And of course do something about the scale on the bottom and the column of activity labels or whatever you want to call them there.
Unless you're using an absolutely ancient machine, that'd just fly.
It's quite a lot of work but it would probably be quicker to write that than to search through a load of alternative packages and decide which was optimal.
I am currently writing a program where I need to draw some graph's. I need to have a little bit specific layout in these graphs. For example I have three stages of a length in days defined by the user. a start stage of for example 30 days, a mid stage of 40 and an end stage of 20 days. These stages I want to have all a different backgroundcolor in the graph. I do that by drawing pictureboxes and adapting their widths to the stage lengths. Also for every day in the total length I want to draw a vertical line and for the amount of horizontal lines in the graph I take the maximum of y = f(x).
y = f(x) needs to be plotted on the graph. For I use many pictureboxes on the background I cannot use the graphics.DrawLine for it will be drawn behind the pictureboxes. So I decided to make the line with an array of pictureboxes ;) It works fine, but obviously it takes a lot of time to load the program now.
Is there another way to draw this graph using arrays of controls that require less effort from the computer? Or should I completely stop with the arrays?
(I wanted to post my picture here, but I don't have ten reputation yet because I'm a noobie :( )
Later on I will add more lines to this graph, but since I figured that my program is already slowing down I ceased programming those other lines and went to the all-knowing forum!
Any help will be much appreciated!
Greetz,
Arrie
The common form controls aren't really suitable for this purpose. I'd suggest taking a look at using libraries that give you more power and control over visuals and graphics.
#Kári is right:
If you want to stay with .NET only (no 3rd library dependence) you can use GDI. In .NET you can use by including System.Drawing.dll as an reference.
One simple yet correct approach would be:
create a target control (picturebox for example)
implement the OnPaintDraw Event which gives you an Graphics object
that contains many drawing methods. See MSDN for more information:
MSDN -> Graphics
The methods of Graphics will always draw above the control, so make sure your target control is visible an not behind any other control.
If GDI is not enough you can check out other libraries. (See .NET graph library around?)
I'm working on a LineGraph control which consists many DependencyProperties that affect how the control should display its data. For example, the control contains the following properties to affect its axes:
AxisStroke - Color of the axes.
AxisThickness - Stroke thickness of the axes.
It also contains properties for display numbers & tick marks
VerticalTicks - True/False to indicate whether or not ticks appear along the vertical axis
HorizontalTicks - True/False to indicate whether or not ticks appear along the horizontal axis
VerticalMin - Minimum value on the vertical axis (numeric)
VerticalStep - The distance in between each vertical tick
VerticalMax - Maximum value on the vertical axis (numeric)
HorizontalMin - Minimum value on the horizontal axis (numeric)
HorizontalStep - The distance in between each horizontal tick
HorizontalMax - Maximum value on the horizontal axis (numeric)
And many more properties exist to allow for different line styles on a single graph (LineColor, LineThickness, DataPointShape, and DataPointIcon to name a few).
My goal is to be able to call out my LineGraph in XAML to insert it into a Window. I would like to be able to specify each of these settings inside the XAML as well, and see the new rendered image of the control in the WPF designer.
Now, given there is a lot of geometric shapes to render on the LineGraph, I though using a Canvas would be a good choice to render the data. Unfortunately, when I'm working in XAML, I cannot perform computations for the locations of shapes based on the control's width & height.
And yes, the shapes' locations must be computed because the data points for the graph are dynamic and the tick-related information is dynamic. Not to mention, I would like to display the actual values along each axis of the LineGraph.
So, I thought I might be able to display this control as if I was doing the rendering in C# code. Other windowing frameworks sometimes provide a Render method that can be used for laying out all of the sub-components.
Doing this, however, doesn't seem possible since WPF relies heavily on XAML for the visual appearance of controls. Also, requiring that the WPF designer must display the LineGraph based on the properties and data specified, it doesn't seem like C# code would solve the problem.
I suppose my questions are these:
How can I render data dynamically inside of a WPF control?
Am I able to specify in C# how my control is rendered, allowing the WPF designer to reflect it?
Side Note:
I've done quite a bit of research, but I am only finding information on how to implement more simple types of controls. If you know of any references that contain information on this topic, please feel free to post them in addition to your answers. I will be more than happy to learn how to do this completely.
EDIT:
I've created a graph using Excel to elaborate what the LineGraph control might look like if it has correct data and properties.
I will answer this based on my experience on implementing custom built graphing libraries in WIN32, WinForm, WPF, WinCE, WP8+WinRT, ....and even on a FPGA :)
It's extremely difficult to implement one from scratch. It may seem easy at first but you will run into a lot of "What should I do if this happens?". For example, in your above graph it seems you got a DataPoint # (5,100) it graphs it pretty well. But lets say, I add another DataPoint # (5.000000005, 0). How would you handle that in your code? Would you say that each pixel on the graph represents an exact value on the X-Axis, or does each pixel represent a range of X-Values?
I would recommend that you use an already establish library to do what you want to do unless you need something very specific like lets say you need horizontal cursors on the graph (think Tektronix Oscilloscope) and you need to calculate some values in between the two cursors.. then maybe you need to implement your own custom one or build on top of an open source one.
So, if you are still adamant of creating your own custom control here are answers to your questions.
How can I render data dynamically inside of a WPF control?
You can use a WriteableBitmap and create your own primitive drawing library from that. After you're done rendering, set it as the ImageSource of your control.
Or you can use WriteableBitmapEx which has GDI like drawing functions already implemented for you.
WriteableBitmapEx CodePlex Page, I also think you can just get it from NuGet as well.
You can also use a <Canvas> and add UI elements to that as well.
Am I able to specify in C# how my control is rendered, allowing the WPF designer to reflect it?
This depends on how you create your controls, but yes you can create Properties in your custom control that will appear in the Designer. Allowing you to change it thus updating the display. I would read a lot of tutorials about writing your own custom user control library. They can explain it better than I can in a SO answer. If you implement the properties correctly it should like so.....
Full Size Image: http://i.stack.imgur.com/pmevo.png
After changing the Number of Rows from 15 to 10 and the starting Y offset to -1 (thus moving the graph up and making the rows a lot taller)
Full Size Image: http://i.stack.imgur.com/0RKnA.png
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.)
I would like to develop a simple point&click game in C# with the default drawing libraries...no openGL/SDL/Tao for this project.
Suffice to say, I am curious as to the best ways to draw clickable images in layers on a form.
Ideally, I would have
1) Environment layer (pathways, doors, etc)
2) Object layer (items)
3) Character layer (enemies)
Ideally, the layers beneath other layers would still be viewable, so I could still see the environment underneath an object (so whatever component I use to draw the object to the form needs to be transparent).
This game is going to be tile based...so I will be generating a 2D array of some sort of component and putting those onto the form. The question is, what component should I use? A friend has recommended to generate panels and drop those onto the form and use the background image property, but is there a better way?
I know that this is not the ideal way to develop...this is more of a prototype for myself. Later on I will probably move it to Tao if I get anywhere, but for now (ie, the next year or so), I would like to keep it extremely simple.
Tiles are simply logical chunks with which to organize your UI. You do not need to necessarily have tiles in the form of Panels to use the "tile" idea. Switching tiles can simply mean that your character has reached the right edge of tile A and you will therefore draw tile B and place the character on the left edge of that tile. So your memory structure should be a 2D array of logical tile objects that contain information about what to draw but not necessarily Panels, though that is an option, i don't recommend it.
Layers: You don't really need to worry about layers. All you have to do is draw in the correct sequence: Environment first, followed by objects and then characters. .Net and probably all frameworks paint back to front, which means that things drawn first may be entirely or partially obscured by objects drawn later. The "layering" happens automatically. If you just draw your objects within their own bounds then you do not need to worry about transparency. E.g. a 20x20 pixel character is drawn within a 20x20 pixel bound.
This is all assuming raw e.Graphics.Draw* and e.Graphics.Fill* calls in the Paint event handler of course. As with anything in software, there are 101 ways...