I am making a project that draw Numbers in multicolored random dots. If you type in a 1,000,000 the scree will slowly paint with 1M dots that look like the number. I'm migrating to WPF and wanted known if there is an easy wat to pain on top of a text block as that will save a lot of hit testing for me.
Adorners are designed to do exactly that. They allow you to render controls, drawings, or anything you like on a separate layer that is always on top of other controls.
Related
I'm trying to build a timeline-like control for a project, but I have limited experience with WPF, and don't really know where to start. The requirements are fairly simple: I have an ObservableCollection of objects that have a timestamp property, and I need to be able to select one or more of them and drag them back and forth on a "timeline". All of the objects will be rendered the same size since there's no concept of a start/end time. Here is a mockup of what I'm trying to build:
I've spent hours searching for examples or tutorials, but when I search for "timeline" controls most of the results address a completely different problem:
Rather than going with the classic override of the Thumb control, I threw together a quick framework based off your mockup:
ZIP: http://www.mediafire.com/file/fidg8ea88ofoki4/TimelineFramework.zip
VirusTotal: https://www.virustotal.com/en/url/7579b365749d07eb743643ab118de71c7dd09cb03df7a8b28fbf3cec816ff4cc/analysis/1484802709/ and https://www.virustotal.com/en/file/4899aa96234e1e69c4e935f7d692e46789d8b4b7a5afd4c354937ed921986b20/analysis/1484802463/
It's pretty basic in terms of WPF as it's mostly C# with little XAML, so you can probably figure it out real fast and then be on your way to adapting it for your specific needs.
In the demo app, it looks like this:
The blue bands are draggable, with the thick center line representing their true placement and the faded side blue making for a bigger grip to click on. Hovering over a band shows its placement in the Tooltip. Of course, you can restyle and adjust all the visuals to your needs.
Just recently started WPF and well into the run before I can walk stage.
I have made a custom control that I need for one of my projects, and it looks almost exactly as I want. It currently looks like this:
whereas I need to add a scale to the horizontal and vertical sides, with a mark and a number of how many cells we are at, skipping a predefined number which should look roughly like this:
The model that provides the data for the control has the data, the size of each cell (and thus the overall size), all the label text, and a step value for the X and Y control.
The control is a grid with the title in the top row, the y title, space for the numbers, the control in the second row and the space for the X control in the next and the title of the x axis in the last.
If I was doing windows forms I would just draw in manually and it would be pretty simple, but I would like to learn this properly.
After a lot of googling, I can't find a way of doing this easily in XAML, so I assume I have to do a custom control on a canvas, or is there an obvious way that my inexperience with WPF is missing?
There is nothing out to the box but there is a control you can work off of to get what you need. Investigate modifying the TickBar.
An initial search turned up How to use string values in place of ticks on WPF Tickbar?.
Using VS2013, C#.NET 4.5, and WinForms. Migrating to WPF is not an option at this point.
The standard checkbox control handles 2-state and 3-state modes, but I need a 4-state checkbox. I can't find a 4-state checkbox library on the net anywhere, so I'm assuming I'll have to make one (if y'all know of one, that'd be great).
I have a set of four PNGs as draft images of the checkbox appearance, and I have played around with just painting those on a button and having the button_click event cycle through which image is displayed and update the data value. This doesn't seem to scale the image with the button well, though, and it feels kludgy to load static bitmaps instead of vector drawing the images so they're always to scale.
Is there a way to inherit from the checkbox control itself and add a fourth state?
If so, where do I go to override how the states are drawn? I need to do it "correctly" so that if the form is Scaled, the checkbox doesn't end up looking all bitmap-nasty.
I'm not even sure what keywords to use to search for how to do the actual drawing.
Background:
I'd generally consider this to be a nasty UI choice, but I'm making a program that saves, loads, and displays a "World of Darkness" character sheet of any arbitrary system, and the WoD games use a 4-state injury that's represented on the sheet by an empty box, a box with one slash across it, a box with an X across it, or a box with a 4-stroke asterix across it (optionally, a filled box).
For the moment I'm going with matching the original with high fidelity; later, as an option, I'll let the user switch to radio buttons to support my own preference.
This is my first real exploration of GUI programming beyond the basics, so I'm not sure quite how to proceed.
EDIT: I'm delving into a UserControl now, and my own draw methods. What fun. Found an MSDN tutorial on User-Drawn Controls, seems like a good starting place.
As my first WPF project, I am attempting to build an application to play a card game similar to Magic the Gathering. It is not clear to me how to lay out the main play area. You can see some examples that are similar to what I am attempting by looking at example 1 or example 2. The chat/info areas on the right would be separate user controls.
The cards must maintain their aspect ratios, and each play area would start with 10 columns and two rows of cards. As more cards are played, the number of columns and/or rows may change. Each player area may have a different number of columns and/or rows. Cards may overlap, and may be placed sideways (tapped). Cards in all areas should be the same size (although they may be cropped in some areas). Cards do not need to lie exactly on the grid (they do not necessarily snap-to-grid).
When the user hovers the mouse over a card, it should expand to a significantly larger size using an animation. A card in one player area may overflow into the other player's area when expanded (but only as long as the mouse hovers).
Given these requirements, I am tempted to use one large user control derived from Canvas with image objects for each card (along with other shapes to delineate the areas). This implies that I will be doing a lot of work during the OnRenderSizeChanged event to position the child items within the canvas (manual layout).
Using a grid does not seem feasible to me, due to the free-form placement and overlap.
Decomposing the play area into smaller user controls would leverage the WPF layout capabilities, but it seems like decomposition would prevent the cards from expanding into adjacent user controls during the mouse-over, so that doesn't seem feasible either.
Is there a better alternative to one large canvas-based control? It seems wrong to be doing manual layout in WPF, but I cannot see an alternative.
This sounds like a great scenario for Composite Application ala Prism. It provides solid framework for implementing regions, modules, sending message between modules etc... From looking at your screen captures, developing a shell with different regions and dropping modules into them would probably greatly benefit your layout. As for the cards themselves, perhaps they could be modules as well?
Check out:
http://msdn.microsoft.com/en-us/library/ff649780.aspx
Particualy good examples come with the download package including a stock market like application and event aggregator example.
You said:
Decomposing the play area into smaller user controls would leverage the WPF layout capabilities, but it seems like decomposition would prevent the cards from expanding into adjacent user controls during the mouse-over, so that doesn't seem feasible either.
But this is not correct. Decomposition is absolutely the right approach to take, and this would not prevent the cards from expanding into adjacent user controls. The reason being that you can use a RenderTransform rather than a LayoutTransform. See this example, by Charles Petzold, or this article, to visualize the difference. Because a RenderTransform is applied after the layout has already occurred, your cards would be able to expand outside their bounds.
Given that decomposition is the right approach, I would arrange your various card collections into a Grid, with each collection being an ItemsControl. The ItemsControl should bind its ItemsSource property to some collection, and then you can provide a custom ItemTemplate that would display the image and any other information. I would be hesitant to use a Canvas, as this would restrict you to hard-coding the positions for the cards (which is a very WinForms-like solution for a problem that can be far more elegantly solved). Take advantage of WPF's fantastic layout engine and use nested grids and items controls to create a dynamic layout. This will ensure that your game board looks good at any resolution and when stretched to various sizes.
I recommend you take a look at this guys project . In java I know but if I was to go the route of building a card game. That would be what I would go off of.
A lot of canvases inside of a grid could help you here, the canvas will allow the content to render outside of its bounds, as long as you turn ClipToBounds to false, and you will be given much more control over exact placement of the cards than with other schemes. You will also get the powerful functionality of a grid control, allowing you to add and remove columns and rows as needed (though you will also have to dynamically add and remove canvasses, though this isn't too difficult.
If you're worried about the contents of your "Card" moving around when the box is rescaled, surround it in a viewbox. It will manage all your scaling for you, and ensures your card uses as much real estate as it can get. Alternatively you could use a RenderTransform, but a lot of these might slow your program down (Experts: does the viewbox operate using RenderTransforms? If so this point is moot)
To ensure the cards maintain their aspect ratios make sure each Image's Stretch attribute is set to "Uniform", making them all keep the same size could be done by designating a master card, and binding heights and widths of all subsequent cards to this original card, though that is a little messy and doesn't allow the cards to expand. Another solution is to set a single size for each card manually, animating this when you want to expand or shrink.
I am using NPlot charting library to draw several plots illustrating signal fluctuations. The plots are inserted one beneath the other in a flowlayoutpanel1.
The x axis is the time. The y is the value of the signal.
I've added a trackbar at the bottom, along the x axis. When the user moves the trackbar, the value of each signal is displayed somewhere (in relation to the trackbar's position).
All of this is already functional.
I've been asked to add some visual way to illustrate the precise time where the trackbar is. They want some sort of vertical line that would move with the trackbar, over all the Nplots. However they are open to alternatives.
I have tried drawing the line but it's difficult to draw in relation to the trackbar's position. Also it ends up being drawn BEHIND the Nplots.
I've also tried drawing a static grid on the flowpanel but the Nplots are not transparent, and my boss doesn't like each plot having a individual grid for aesthetic purposes.
At this point i'm open to any "out-of-the-box" suggestions, or corrections on my implementation. I'm self taught in C# so i haven't done anything like this before.
Please help!
EDIT: I have gotten something slightly better by using a label with a border, stretching it to be tall and having width of 1. This creates a Line that goes over all other control. Now my biggest challenge is calculating the position of the trackbar pointer to make the line match it...
After a lot of fiddling, i found that the only way to have a line drawn over all other controls was NOT to use the Graphics drawline, as the controls placed on top were not transparent and i could not access their graphics component (was a imported control not a .NET class).
I ended up going with the EDIT solution, took a label with a border and put the width to 1, creating a simple line instead of a box.
The position formula took a lot of fine tuning, the way to go was to calculate (estimate) the width between two trackbar ticks an add a tiny offset for the control itself. Using the traback's pointer Value property, i could calculate the position of the label/line so that it would follow the trackbar pointer. There is a minuscule offset sometimes formed but not well seen to the naked eye.