I am a beginner in Unity and I am currently making a simple game. I recently solved my problem of scrolling two objects at the same time, but the vertical layout will put the other at the bottom. The answer came from the question I posted a while ago which is to use LayoutElement component. It does work in general, but when I start or play in the Unity it does not work at the start, I need to disable it and enable at runtime for it to work.
Just to add, I noticed that the ObjectiveItem object is 0 everytime I start or play the project. And the height will set to its children's height when I disable and enable the LayoutElement component.
I think the Content Size Fitter sets the height to 0. because when I mess with any height related settings in like when I uncheck the height value in Child Force Expand it will set the height to the height of its children same goes to the Child Force Expand of the Lines and Items objects. And like I mentioned in the start, when I disable and enable the LayoutElement in the ObjectiveItem object it will set the height of the children or even when setting the object itself inactive and active. The main problem is that the height is set to 0 at the start of the game.
This is the object (ObjectiveItem) that is set to the Content of the ScrollRect. The object already has Vertical Layout Group and Content Size Fitter to get the height of its children.
If you use this combination of a LayoutGroup + ContentSizeFitter you should also enable the XYLayoutGroup.ControlChildSize and not use Force Expand and then your child objects should either have a ContentSizeFitter (if it is further LayoutGroups) themselves or have a LayoutElement with according settings.
I know this feels extremely clunky but this is the way I was told and worked so far.
If you want scroll to work on new items you need to have a VerticalLayoutGroup that also has a ContentSizeFitter component with preferred height chosen, that way new items will increase the height of the vertical layout and if added correctly to the scroll component it will scroll with any height.
Related
I've got a ScrollView inside my Canvas which will be populated with a UI GameObject (Panel) at runtime. Because this dynamic child does not have a fixed size, I want to resize my ScrollView to the same width as the child. In other words: The ScrollView should be the width of it's child.
I think this is possible without the need of coding but I cannot get it to work properly.
I already tried to add a Content Size Fitter to the Content, Viewport and ScrollView, but this only results in a width of 0.
My structure is the following
Please tell me if you need some more information
Edit 1:
it seems like the problem is with the GameObject Content. It does not resize with it's child element
The only object that shouhld have ContentSizeFitter is the Content of the scrollview (only in the axis you want the content to expand). To work properly its best to also have a Vertical or Horizontal layout group, with checkboxes 'child control size' checked, and 'expand' un-checked.
No all thats left to do is make sure all the children of the content object have LayoutElement with preferred layout sizes.
It can be a little bit tricky to get it right first few times but definitely possible. The order in which you add components is somewhat important : make sure you have layoutElements set up in the children first, then add the layout group, and only after it works correctly add the content size fitter. If you do it the other way around it tends to escape, as in you mnight get objects resized to 0 before you notice
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 am making an app for the Windows store (xaml/c#), in this app i create a list of properties of a file. One properties is the file path, this is always too long. my solution would be to make this side scrolling when this textblock is selected.
the text would start to scroll when selected to make all the information readable. (ticker bar)
I can’t find a property to achieve this, and I find it difficult to make a custom function for this. Can you help me?
I'd reconsider the idea. I had the idea many times and it was always rejected by designers. I think animating text is likely to be more annoying than clipped text. A better way might be to either wrap it in place or if you are in a list with limited item height - only show the full text after it was tapped - either with some popup or in the details view of the tapped item.
Having said that - to animate it you'd put the TextBlock inside of a Canvas, set the Clip of the Canvas to a RectangleGeometry that defines your clipping region (and update it on size updates), then animate the Canvas.X property of the TextBlock. The problem with that is that Canvas.X is not an "independent" property and so you'd need to set DoubleAnimation.EnableDependentAnimation="true" on the animation and could still get a fairly choppy animation.
A better choice might seem to be to animate the RenderTransform of the TextBlock (e.g. set it to a TranslateTransform and target the X property of the transform in the animation), but last time I checked - this could animate the TextBlock in an already clipped form, so you still wouldn't see the part of it that doesn't fit on screen. You could try that though.
Putting the TextBlock in a ScrollViewer might work better, but it would suffer from similar problem as the Canvas solution since the ScrollViewer doesn't even have an animatable offset property. In Windows 8.1 you get built in animations when you call ScrollViewer.ChangeView(), but that would likely animate too quickly. It is possible with the help of a proxy dependency property or other per-frame dependent animation as in the ScrollToHorizontalOffsetWithAnimation() ScrollViewer extension method in WinRT XAML Toolkit.
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.