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.
Related
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 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
I would like to create panels with detailed information regarding an item (including a thumbnail image on the left hand side) and then add these to a scrollable list. Much like how iTunes on the iPhone displays the lists of applications available.
I have done some searching but have thus far been unable to find any assistance.
Does anyone have any ideas or links to samples they would like to share with me.
Thanks in advance,
Rob
In sum, the following creates a series of panels within a container that scroll in and out of view using a vertical scroll bar.
You did not list ASP.NET in your tags, so I assume this is Windows form-based, not web based. I'll get you started:
Create a panel called GrandChildPanel. Inside it, put an image box on the left side and labels with the information you want to display next to the image. This panel will be duplicated for every item (i.e., iTunes song).
Put that panel inside another, equal-width, equal-height panel called ChildPanel.
Create another panel called ParentPanel and set its width to the size of the other panels plus enough room for a vertical scroll bar. Set the height equal to however tall you want the scrollable area to be.
Put ChildPanel in the top-right corner of ParentPanel and add a vertical scroll bar to the far right edge of ParentPanel. Set the scroll bar's height to takeup the entire height of ParentPanel.
You probably want to add a border to ParentPanel to show its boundaries.
You also probably want to add a 1 or 2 pixel line across the bottom of your GrandChildPanel to show where the panel ends.
That's the setup. Here are the requirements for your code: Each time you 'add an item to the list' (e.g., every song in your iTunes list), you do the following:
Clone the GrandChildPanel.
Assign the clone to be a child of the ChildPanel.
Set the clone's Top to be equal to the previous clone's Top plus its Height.
Set ChildPanel's Height equal to any given GrandChildPanel's height multiplied by the number of clones.
Set the scroll bar's maximum value to equal ChildPanel's height.
Now, all you have to do to make this scrollable is perform the following on the scrolling or changing events of the vertical scroll bar: Set ChildPanel's Top to be equal to the verticle scroll bar's value ("position") multiplied by -1.
Starting from scratch in a new project in which the properties of the default Form1 form have not been altered I drop a SplitContainer on the form and set its properties to:
Anchor - Top, Left
Dock - Fill
Orientation - Vertical
I then drop a second SplitContainer into the left-hand panel (panel 1) of the first SplitContainer and again set its properties to those above except this time the orientation of the splitter is set to horizontal.
I now place two CheckedListBoxes in both the upper and lower panels (panels 1 & 2) of the second SplitContainer. The properties of both CheckedListBoxes are set to:
Anchor - Top, Left
Dock - Fill
I now add a TextBox to the right-hand panel (panel 2) of the first SplitContainer and set its properties to:
Anchor - Top, Left
Dock - Fill
Multi-Line - True
When I compile and run this application the vertical splitter which forms part of the first SplitContainer I added behaves and works exactly as expected - so no problem there.
However, the horizontally oriented splitter in the second SplitContainer consistently displays erratic behaviour - the width of the splitter itself changes as it is moved up and down. But this increase or decrease in the width of the splitter is also not consistent with the direction in which it was moved - for example moving it up some distance from its initial position at startup may result in the splitter being thinner than what it was previously while a further resizing upwards results in it being thicker.
The bottom edge of the lower CheckedListBox also moves up and down when I move the splitter and as before this behaviour is not consistent with the direction in which the splitter is moved.
To avoid carrying over changes to a component's properties from one experiment to another I have been trying to figure out what is going on by starting half a dozen or so new projects from scratch and trying out different things including changes to the Anchor, BorderStyle, Dock, and Margin properties, but unfortunately I am none the wiser : -(
Has anyone had similar experience of this erratic behaviour and can offer me a solution? I might be overlooking something simple, if so what is it?
Thanks for reading.
Edit \ Update -
Upon further experimentation I was able to determine that the unwanted behaviour I am experiencing is related somehow to the CheckedListBoxes - I replaced both with multi-line textboxes whose properties of "Anchor" and "Dock" were set to "Top, Left" and "Fill" respectively and upon running the app the erratic behaviour no longer occurs - both the vertical and horizontal splitters are working correctly.
Set the IntegralHeight property of the list boxes to False so that they are allowed to size themselves to fit the panel.
I'm adding some textboxes to a form dynamically at runtime. Everything works fine i.e. the textboxes are aligned, anchored and automatically resizes until the form is maximized. On maximizing the form, the textboxes are added to the same location while the form was not maximized. This causes a misalignment of the textboxes.
How can I ensure that all the textboxes are at the same location and of the same size both while the windowstate is normal as well as maximized?
EDIT:
Btw I'm using C#
EDIT:
Would a flowlayoutpanel be useful here?
It's a quite old question, but maybe i'm able to answer it.
After reading all your comments, i think i can summarize your problem to this:
You have a form at a specific size and add some controls at runtime at a specific location with anchor set to Top | Right.
If you just display the form and let the controls appear everything works fine
If you maximize your form (or change the size of it) your controls won't be appear anymore at the correct location you want.
To get rid of this problem you can try some different approaches:
Use a FlowLayoutPanel, take care for the FlowDirection and maybe just create all your needed controls beforehand and just toggle the visible state.
Use correct values for the location of your newly created controls.
The second point is the error you have (i think). You found someway to calculate the location of your control if your form has it's original size. To get the correct position if the size of the form has changed (e.g. maximized) you have to consider several factors.
The delta values from your default size to your current size.
The Anchor(s) you wish to set on your control.
In your case you'd like to put a control which is anchored Top | Right, but the location is set by Top | Left. In that case you have to calculate the difference between the control.location.x and the form.width in it's default size. Then you take this difference and subtract it from the form current width. Now you can place your control at this position (cause Top never changes through a resizing). If you have a Anchor at Bottom | Right you have to calculate the same with control.location.y and form.height.
The behaviour and calculation if no anchor, for Top | Bottom or Left | Right are set is left as an exercise to the reader. ;-)
Last but not least there is also another hacky way to get your control at the right position:
If you like to place a new control somewhere change the Form.Visible to false
Save the form state, size and location
Change them to your default values
Add the controls you want
Restore the formerly saved values
Make the form visible again.
The Anchor property specifies which borders the controls should ensure they're always the same distance from. It can get pretty confusing, which is why you're seeing things shift around when anchored to the right border.
If you just want to ensure that the textbox display stays consistent relative to itself, I'd suggest putting down a Panel, with anchoring on the Panel, and then adding textboxes to the Panel. The X and Y coordinates on your text boxes become relative to the Panel, so it's a lot easier to do layout especially when the location of the Panel suddenly changes.