I have two charts side by side in my form (using Windows.Form.Charting). They are structured, at least as far as I can tell, identically (same size, same properties), the only difference being their positions. However, when I add titles to the two charts, the leftmost chart gets a title starting a little bit down below the top of the control, whereas on the rightmost chart, the title appears right at the top of the control. Does anyone know why this could be the case?
okay, so it turns out the left chart had a title default added to it, which had an alignment of middle center. This caused any other titles added to it to also have that same alignment. Additionally, when there are no titles in the collection, and one is added (the case in the leftmost graph), its default value for alignment is top, hence the difference. Not sure why one chart had a default title or why it wasn't appearing, but this explains how the properties could look the same at a glance. The only way to catch it would be to go inside the title properties window, which their wasn't really a reason to because no titles were initially showing up on either graph.
http://msdn.microsoft.com/en-us/library/system.web.ui.datavisualization.charting.title.docking(v=vs.110).aspx
Related
I'm trying to precisely align an array of buttons within the rows and columns of a table layout panel. Each button is assigned to the same image list. The image list contains three images, all the same pixel dimensions (200px wide X 18px high). I want the buttons to exactly stack one on top of one another vertically, with no vertical gaps.
The problem is, when I look at the button properties, the size of the image is described as 206x24. It looks like somewhere VS is adding a 3 pixel boundary around the images, and I can't figure out how to get rid of that.
Margins for the button are all set to zero. Padding for the button is all set to zero. FlatStyle is set to "Flat".
What button properties do I set to get the images to stack exactly?
Is there a parameter in the table layout panel that might be causing this?
Here is an image of the button property box:
Image of property box
Any help would be much appreciated.
Would using a picturebox with a clickable change of image work better than a button?
You've only talked about your button styling. Look at padding and margins for your table elements, such as TD, TR, etc. A quick way to see this visually is to add colors for these elements in css. If you make a TD red and see a 3 pixel red space, you've got your culprit. Try this with ANY elements that are in your markup. ANYTHING could be a culprit.
BTW, I've noticed a downvote on your post. I think folks here appreciate if you post your code so they can see what you've tried so far. Just a friendly reminder.
I continued researching the best way to handle the look I was going for, and others that have tried to use buttons, and had similar problems. I have abandoned the button, and will use a picturebox instead in each of the cells of the table view control.
My apologies for the imprecise question.
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.
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?.
I have simple WinForms GUI that I want to use with TabPages. The problem I'm having is resizing and working with multiple sizes of screens. What settings do I change for each TextBox, GroupBox to make it fit the screen nicely without making it feel to the user like it's badly designed?
Usually I would use Dock Fill but it doesn't work with more then 1 GroupBox. Then I checked/played with Anchor trying to make it bind to Top, Left, Right, Bottom for everything but that makes a big mess (textboxes overlapping other label, texboxes etc.). I tried to choose some here, some here but whenever I try resize unexpected things happen. How would I go from here? My system is 24" and resolution 1920x1080p, but my users often have a range from 1024x768 to 1920x1080.
Right now I'm using Devexpress controls but the question applies to both Devexpress and builtin controls.
First, set the form size in the designer to a bit less than the minimum expected resolution - say 900x650 or so. Then you can design a form that will work at all resolutions even if it doesn't get resized.
Next, work out which controls should stay a fixed size, and which should stretch/grow as the form us made bigger. Firstly, some fields won't benefit from being enlarged (e.g if you have a text box that always contains a percentage of up to 3 digits, it is pointless or even counter-productive to allow it to grow big enough to show 9 digits. Secondly, some fields fill the entire width of the form, so they naturally will work better if they grow with it.
Now, set the anchoring. In general, anchor the edge of a control to the nearest edge of the form. If you set only one anchor, the control will not stretch, and the anchored edge will start the same distance from that side of the form.
If you want a control to stretch, anchor opposing sides (eg left and right). This will keep those edges the same distance from the form's edges, so the control will stretch to fit.
You will see that if one control is anchored in place, and the control next to it is set to stretch, there is a good chance that they'll end up overlapping, so you must treat all controls across the form as a related group.
For more control, place groups of controls into a container control like a panel or group box. Then their anchoring relates to their parent group, and the group can be anchored to the form.
To see the effects, just resize the form in the designer and see where everything goes - then undo and fix any anchoring that didn't work. You'll soon get a feel for how the layout works, and how to design forms to work well with resizing.
I just switched over to WPF from just regular C# .NET for the more advanced UI design controls. I have managed to become extremely confused over what should be extremely simple, and I hope someone can help.
Basically I want to have sections on either side (for the most part these will be list-boxes inside of expanders), one list-box in the bottom-middle, and then a large rich text box taking up the middle.
My understanding was that I could just take a DockPanel, set the ChildFill to true, dock each one where it should go, and leave the last one to fill the space. The list boxes alone don't seem to work at with the DockPanel, and the DockPanel does not seem to expand when I change the size of the window.
So basically my questions are...
1) Why does the DockPanel not expand/shrink when I change the size of the window?
2) Buttons seem to work fine in the Dock Panel (like all of the examples I found) but using List Boxes instead does not seem to work properly. Why is this?
3) If I put the list boxes inside of Expanders instead, if I have say two of these on the left side, and I shrink the top expander, will the bottom expander grow upwards to fill the gap?
I can't really afford anything like ActiPro, and I was not able to get the AvalonDock controls to show up on the MSVC 2010 toolbar, so I am pretty much stuck using the default controls.
1). I have just tested the DockPanel and it does expand / shrink when the Window is resized - Have you removed the Grid that is placed in the Window by default in Visual Studio? If you mean it doesn't resize proportionally to the Windows size then i think you will need to use a Grid.
2). Again, list boxes work fine for me - Can you provide some more detail explaining why they don't work properly?
3). It depends on what you mean by "Grow upwards". If the top expander is closed, only the header will be displayed and the bottom expander will move up to take the space taken by the first expanders content (this is the default behaviour).
Do you have some XAML you can post as this will help identify your problems.