I am trying to build a scene in my 2D game which has a panel whose elements are arranged as in this image:
The ScrollRect should dynamically add rows after users provide values to the InputField, select an option from the Dropdown, and then click the Button. This all works fine, except that the viewable area of for the ScrollRect has the same vertical size as its siblings within the parent panel.
This happens because the GridLayoutGroup of the parent panel requires the child cell sizes to be specified, and if I specify a value which makes sense for the top two panels it is too short for the ScrollRect. Putting a ContentSizeFitter on the parent panel does not help (also, despite Unity warning against it, there is a ContentSizeFitter on the content of the ScrollRect since without one the newly added rows will not appear when scrolling).
So my question is:
what do I need to do to allow the vertical sizing of the children of the top level panel to be based on their sizes, when one child's vertical size will change dynamically?
Thanks!
For grid layout you cannot control the cell sizes dynamically . Instead you can use horizantal / vertical layout groups where you can find an option control child size . And as mentioned in above ans add Layout element to child component and adjust the sizes
Both #Programmer and #Salma572 answers are true. If you want that size to be a fixed number or pixels, use a LayoutElement. However, It doesn't seem you can use a scale (in percent) or anything else dynamic.
It's a shame but you'll probably need to write a script.
It is possible. Attach Layout Element component to each child GameObject. You can then dynamically change the size of each child GameObject by modifying the Layout Element's Preferred Width and Height variable.
Related
/home/benjaminz/Pictures/Screenshot from 2020-02-15 10-01-31.png
That's a really trivial UI.
It can be implemented in multiple ways. E.g. the top line can be tabs with tabs on TOP mode. This will implicitly swap all the lower content for you.
You can place the tabs in the center, add four tabs and the content for each one. In that case you will need a new banner for each page (indicating the sale). Below that you just have a scrollable grid layout that's trivial.
Alternatively the top can be a row of buttons either with grid layout or BoxLayout.X_AXIS.
The page in that case would be a box layout on the Y axis.
The present is a FloatingActionButton style component.
The content would be a grid either way.
Each element would be a lead component. With a parent container in a layered layout containing two children One is a border layout containing the image layout in the center and a box y in the south containing both labels. The second one is a top/right aligned flow layout with the discount label.
I would like to have two labels in my tableview.
but the label resize option is disabled.
How to have the two labels horizontally?
Select UIlabel instead of the cell and then you can set Auto resize like follow.
You may need AutoLayout and Custom Tableview Call. Use two different labels, e.g. one for username (left aligned text) and another for garbage text (right aligned text).
Now, set Content Compression Resistance Priority for one of both label, according to your requirement for data visibility when there is long texts in user name.
Look at these snapshots:
Labels with default content compression resistance priority
I changed content compression resistance priority for label blablabla blablabla, from 750 to 749.
Result is:
For more details see Apple document: Setting Content-Hugging and Compression-Resistance Priorities
Drag a horizontal UIStackView from object library and set it's constraints like this inside the cell
//
drag 2 labels inside it and make the distribution .FillEqually
//
Are you sure you have selected Label?
If you know about Layout constraints, it will be easier than this auto resizer.
Label 1==> Set Leading, Top & Bottom constraints to SuperView. Set Trailing constraint to Label2.
Label2==> Set Trailing, Top & Bottom constraints to SuperView. Set Trailing constraint to Label2.
Now, after this, it will show Red error arrow. Now, you have to decide which Lable width is a priority. After deciding, select that Lable and set Horizontal Content Hugging to 251(High) and Comprehensive to 751(High). Also, change lower priority label Content Hugging and Comprehensive to 249 and 749 respectively. Now, Red error arrow will not be shown and in the cell it will show all text in both labels without and cut.
if you want a easy and quick fix for it, implement a stack view inside the tableview cell. You can change the stackview as you want and also you dont have to worry about applying constraints.
This is Layout I'd like to draw in my ContentPage(ListView is just added)
I tried to use a Grid with a row and two columns in which to place two BoxView inside the first one a further Grid with 3 rows and two columns for the Label in the second Box a Label but the result was disappointing
There are a few options. You can use Grid with Margin and Padding properties so the contents won't be too close to one another. Or you can use AbsoluteLayout or RelativeLayout so you can position every single elements as the way you want to. You can read the documentation for layouts for more information.
I am developing a win32 application and I want to use my own images instead of default + and - signs in tree view.
I also found here that I can use images in four cases-
1)An image, such as an open folder, displayed when the item is selected.
2)An image, such as a closed folder, displayed when the item is not selected.
3)An overlay image that is drawn transparently over the selected or nonselected image.
4)A state image, which is an additional image displayed to the left of the selected or nonselected image. You can use state images, such as checked and cleared check boxes, to indicate application-defined item states.
I found some examples like this one(uses state images) but it seems it is not related to my query.
But I can't find how to replace default + and - signs of tree view with my images.
Please help me out of it. Thanks in advance.
The "expansion" buttons are not drawn using an assigned image list; instead they come from the current theme (or in XP/non-themed, are hard-coded glyphs).
The only way to customize them is to use Custom Draw and draw the tree items yourself.
I was looking for a custom image grid and found a similar question that had a really sweet component in an answer.
I downloaded the code and after some fiddling, I managed to get it to compile in DXE2. It looks really cool, but I can't get either scrollbar to show up. I also can't figure out how to dynamically control the images displayed. Or how to update the grid based on keyboard events.
Also, to get it to compile I had to remove the GR32 references; the library I downloaded had too many incompatibilities with DXE2 for me to resolve.
Any help would be greatly appreciated. This really looks like a killer component.
Update from Bill:
Here is a screenshot of incorrect thumbnail painting. I can not get the thumbnails to look like the screenshot from the component in question.
If the thumbnails were painted at the same XY as the rects painted in the first pass they would look much better. Any idea on what is going on?
... but I can't get either scrollbar to show up.
Well, there is no horizontal scrollbar. There is the property ColWidth that controls how much images are drawn in one row, depending on the control's width. You might update ColWidth in an OnResize event handler due to anchor settings, for example.
The vertical scroll bar appears automatically when not all images (incl. spacing) fit in the clientrect. The images are drawn on a TPaintBox and that paint box' size is updated as soon as the image count changes:
procedure TImageGrid.RearrangeImages;
begin
...
FPainter.Height := Max(ClientHeight,
FRowCount * (FRowHeight + FImageSpacing) - FImageSpacing);
The component inherites from TScrollingWinControl, so the scroll bar should modify accordingly. If not, then Bill has a workaround found as commented:
VertScrollBar.Range := FRowCount * (FRowHeight + FImageSpacing) - FImageSpacing;
I understand this obviously also works, but I really wonder why the scroll bar's range should be modified manually. Here in D7 I have no problem with a hidden vertical scroll bar.
... I also can't figure out how to dynamically control the images displayed. ...
The most easy way to fill the component is by assigning the Folder property to a path with images. Only the images with the file formats in the FileFormats property will be loaded. To specify the images manually (e.g. to combine multiple folders), use the FileNames property. When the Folder property is set, then the FileNames property is updated accordingly, but those file names are not stored in the DFM. When you change the file names (e.g. you delete one from the folder), then the Folder property is cleared and the component uses the FileNames property instead.
... Or how to update the grid based on keyboard events. ...
The only keystrokes currently implemented are Up, Down, PageUp, PageDown, Home and End which all scroll the control. What more key actions do you wish? It's a viewer.
Here is a screenshot of incorrect thumbnail painting. I can not get the thumbnails to look like the screenshot from the component in question. ... If the thumbnails were painted at the same XY as the rects painted in the first pass they would look much better.
While loading the images, a temporary rect is drawn with size ColWidth * RowHeight. All images are stretchdrawn within that size, so adjust your ratio of these properties to make the spacing equal everywhere. Note that you can also influence appearance with the ImageHorzAlign and ImageVertAlign properties.
Update:
The component you refer to is recently completely rewritten, and some of the answers above are outdated.
It now has a Propertional property that defaults to True, but when set False, it will stretch up the thumbs to whatever cell size you have set, independent from the original image sizes. Small images could remain narow though, unless you set the new Stretch property to True.
It now distinguishes between RowHeight and CellHeight, and ColWidth and CellWidth. The difference between both is CellSpacing.
The component does not descend from TScrollingWinControl anymore, but from TCustomControl and only the vertical scroll bar is added.