How can I create a control container where every item (control) behaves like a Floating DIV (in HTML), like this video (considering that each folder is a control)?
Take a look at the WrapPanel class. MSDN
It has the functionality you are looking for.
Positions child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box. Subsequent ordering happens sequentially from top to bottom or from right to left, depending on the value of the Orientation property.
Related
I hope make text that always visible in screen, see my gif
I hope text in FloatingTextCanvs visible but it's covered by button, I find the later create ui object will cover previous objects, can i change text object's index to make text always visible?
To display one canvas in front of the other, you want to change the Sort Order property on the Canvas component to be higher than the other canvas.
If you are dealing with two separate canvases then you can set their sort order to determine which one appears on top.
If you are dealing with two UI elements that are children of the same canvas, then their physical arrangement within the hierarchy determines which one appears on top. The child at the top of the hierarchy will appear underneath the other elements. For example, in the following MainMenuCanvas, the Background image will appear behind the Text.
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.
I have created a custom panel that renders like a canvas renders it's children. I would like that 2 elements that hit each other (ie. touch each other somewhere) get replaced by another control that allows custom rendering of these elements near each other and for example puts them in a context menu.
I have code that can correctly detect these hits, however, I cannot seem to replace the elements by other elements, as the panel is always drawing the items in InternalChildren array.
I cannot do this hit testing before they get to the panel. As they come from a view that can be grouped and due to zooming in and out (which effects the positions/sizes of the children), won't know which elements collide until measuring of the panel happens.
Is there any way to let the panel render other elements than those that are in the InternalChildren array?
EDIT: image
http://www.imagedump.nl/img827/2849/12unled.png
Note that I do not care if block C get's replaced by another component or not, so if replacing it with a merged block is easier (which I think it will be), do so.
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.
I have a data model that represents segments of a curve that looks like this:
Envelope curve http://img710.imageshack.us/img710/9059/envelope.png
The fields are x and y coordinates of the anchor points (red), and a slope value represented by the control points (green). For the curve to be editable by the user, I'm thinking of using Thumb objects for both anchor and control points.
Since I also would like to be able to present the user with an interface where it is possible to enter coordinates into text boxes, I'm thinking of implementing this curve editor as a lookless control. The problem I face is to find the best way to organise the elements. Some thoughts on what I could do:
Add the data model view objects to an ItemsContainer with a custom ItemsPanel and a DataTemplate that creates one anchor point and one control point for each data model object. This causes two and two points to be wrapped in a ContentPresenter which makes the interaction between the custom panel and the thumb points difficult.
Use two different data model view objects, one for anchor points and one for control points, and a DataTemplateSelector to select the right DataTemplate. While there still is a ContentPresenter between the item and the panel (is it possible to avoid this?), interaction may be easier when there is only one item in the ContentPresenter.
Don't use ItemsContainer at all, instead add the Thumb objects directly to the visual and logical trees of the custom panel. Of course I loose a lot of flexibility when it comes to the look and feel of the Thumb objects when they are not specified by templates. Maybe it's possible to duplicate this functionality from ItemsContainer so my control can have separate DataTemplates for the anchor and control points. The Thumb objects could then be added directly to the panel without ContentPresenters.
What's the most reasonable way to do this? Are there other alternatives than the ones I've thought of?