Creating a grid on the side of a control - c#

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?.

Related

Remove all space between Devexpress ChartControl panes

I'm currently working with a DevExpress ChartControl with several panes stacked vertically on top of each other. The panes can individually be shown or hidden at runtime, but their contents won't change after they're created. I'd like to remove all space between the panes so that the border of each is totally flush with the border of the pane above/below it.
I've already used the following code to set the PaneDistance to 0, which normally would do exactly what I'm looking for:
XYDiagram diagram = chartControl1.Diagram as XYDiagram;
diagram.PaneDistance = 0;
However, the problem I'm running into, visible in the screenshow below, is that the labels on my y axes can sometimes extend vertically above or below the edge of the pane itself, which forces there to be space between my panes.
The first two panes have no space between them at all, which is exactly what I want, but the problem can be seen on the bottom whree panes. The "0" label on the second pane extends slightly below the table, so empty space is added to allow it to fit. The bottom two axes both have labels that extend outside their panes, so even more space is being added.
I've tried editing every property of these axes that I can think of, but nothing has been able to remove this blank space. It seems like just getting the outer labels to be pushed up or down so they're inside the pane height should do the trick. Anyone have any ideas on how I can get this working like it should?
Edit: I'll mention that in a different part of this app, I have a different set of panels, rotated and aligned horizontally, with their axis labels doing what I want them to do in the case above:
You can see that the "0" and "300" labels are shifted slightly off-center to fit within their own pane, so they don't extend out and create empty space. I didn't have to touch any code to get that to happen. It could be because these are all instances of the same axis, while the ones that don't do this are different axes, that causes them to play nice in this case?
Edit 2:
Here's what I've got after setting my axis SideMarginsValues to 0 and AlwaysShowZeroLevel to false. Getting closer!
if you can't achieve what you need with DX chart's public properties there is still one trick you can try.
In Browser choose Inspect the chart area (CTRL+SHIFT+I in Chrome) and find the actual chart's element or the parent element and see what classes/ids DX have assigned to them.
Then pick the nearest element class/id and try to play with it's css by assigning negative margins/paddings like:
.dxtcLite.dxtc-top .dxtc-stripContainer {
margin-botton: -2px!important;
}
This is of course a dirty solution but sometimes it's the only one which works.
However, if you don't have any HTML-type margin/padding between chart panes but the blank space is actually a part of the generated chart Image, then probably the only thing you can do is to continue playing with DX chart properties which affect the actual chart image generation.
UPDATE:
Have you tried setting the Range.SideMarginsValue property to 0?
diagram.AxisY.WholeRange.SideMarginsValue = 0;
Another option would be to try to always hide 0-level axis label using
WholeRange.AlwaysShowZeroLevel :
diagram.AxisY.WholeRange.AlwaysShowZeroLevel = false;
or try setting max values for the axis values to exclude border labels:
// depending on possible min/max values for each pane
diagram.AxisY.WholeRange.SetMinMaxValues(5, 35 );
Let me know if anything of the above helps.

Alignment of text when column width is changed from GUI in winform application

I have developed a winform application. It has a listview with multiple columns having different texts. Initially, I have set the column width = -2 to take the size of longest text in the column.
The issue is that sometime text overshoots the laptop screen and a horizontal scroll bar appeared in the list view.
To fit all the columns in a screen, I manually modified the columns widths using column boundaries in the GUI. When I modify the column width, the column text starts disappearing from right. I want it to disappeared from left.
I have searched goggle a lot but did not find the answer.
Question might look weird or may be I have not explained it properly. Please let me know if more information is needed.
Thanks in advance.
The Listbox columns in Windows Forms are not exactly a high level control, I've used it some times but just for simple lists, It certainly has not a builtin function to make what you want, to obtain it you probably need to subclass the control, create a new class for the item managed in the list and write some code to perform what you need.
I think you can find some hints on how to achieve all this in Charles Petzold book about windows forms where he shows how to measure a string and how to draw directly on your control.

Simple WPF Control Questions

Just ran into a bunch of random but probably very simple questions while learning to work with WPF. If anyone can answer any of these it would be most appreciated.
I have a Rectangle that I styled to my liking, and then a StackPanel that I am actually placing the content (bunch of labels) in. It looks like Rectangle doesn't have a closing statement so how can I make it the parent of the StackPanel (I want the panel to move with it)?
I need to display text (labels) in a table form. It will only be two columns, and 8 rows (row count may change). I initially looked into just using a Grid, but as this is a intended for Layouts, it didn't work as expected. I also checked out DataGrid, but this seems confusing and overly complicated for my needs. Is there any simple Table style element I can use?
I have some Animated Expanders and I want to give the other UI content elements in my application a similar looking title bar. I haven't seen any sort of element for this, so I am wondering if I just need to use a Label or something and style it as close as possible to match, or if something already exists that I should use instead. If I need to use a label, what is the proper way to group/attach it with the element that it is the title bar for?
Do any controls exist for WPF that would allow for a Mac style menu bar? Something similar to where the icons move and expand as they are mouse over.
I have a grid that has two expanders (one above the other) with Height="Auto", and two rows set to Height="Auto" so that when the top is minimized, the bottom one moves up to close the gap. I am using a MinHeight right now to make sure they are at least somewhat expanded, but I would like to make them take up the full 100% of the Grid height. What should I do for this?
A rectangle cannot have child content, a better approach might be to use a Border, you can use this as that parent of your stackpanel, applying a Background and BorderBrush to make it look like a rectangle.
For a simple table layout Grid is the way to go. Is your problem that you need it to be dynamic? If so, you can create multiple grids with SharedSizeGroup on the columns to make them look like a single grid. See: How to align separate Grids created via templates along their columns / rows?
Learn about creating your own templates!
Not that I know of, but it would be relatively simple to do, create a storyboard that scales the item on mouse over.
No idea ... running out of steam!
As Andrzej Nosal mentioned, these really should be separate questions!

Paint on top of a UI element WPF

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.

What would you suggest for building such a control in WPF?

I need to build a WPF control that looks somehow similar to this:
alt text http://img251.imageshack.us/img251/6857/circle.png
Where each color should be clickable and resizable (or selectable).
This control will be used to set modes on the hours of a day.
I've thought about making 24 buttons that would be arranged in a circle:
alt text http://img684.imageshack.us/img684/2184/buttonsk.png
Another idea was to draw a complete circle and calculate user mouse click's position for the selection and draw several circles to represent the data.
Any other/better ideas on how to build this?
(please excuse my poor drawing).
I think you would get odd edge-effects with multiple overlapping or touching controls. So I would make a single custom control to do this. It would convert the mouse position on button down to a slice, and then do the appropriate action.
With a single control, you could also come up with a rational way of dealing with keyboard input and for showing selection and allowing for multi-select behavior.
It sounds like you want a customized ListBox (multiple items that are selectable/clickable). For the layout you would want to use some type of RadialPanel as the ItemsPanel. You probably also need to change the ItemContainerStyle to make your ListBoxItems look like what you have above, probably with some triggers to change colors based on selection state. Depending on what behavior you need from your items you may need to create custom ListBox/ListBoxItem derived custom controls but in a lot of cases the built-in behavior will get you a long way. To reuse it as a single unit you could wrap up the ListBox with its 24 hour items and customized templates in a UserControl and expose the selection data in whatever form you need as a Dependency Property (like an IEnumerable of the data items representing the selected hours).
Does that help you get started?

Categories

Resources