diff --git a/manual/ui/control/media/anchor-presets.png b/manual/ui/control/media/anchor-presets.png new file mode 100644 index 00000000..ed457a96 Binary files /dev/null and b/manual/ui/control/media/anchor-presets.png differ diff --git a/manual/ui/control/media/anchor_presets.png b/manual/ui/control/media/anchor_presets.png deleted file mode 100644 index af50ac20..00000000 Binary files a/manual/ui/control/media/anchor_presets.png and /dev/null differ diff --git a/manual/ui/control/media/control-transform.png b/manual/ui/control/media/control-transform.png new file mode 100644 index 00000000..343ed17c Binary files /dev/null and b/manual/ui/control/media/control-transform.png differ diff --git a/manual/ui/control/transform.md b/manual/ui/control/transform.md index 17bdba83..5c987410 100644 --- a/manual/ui/control/transform.md +++ b/manual/ui/control/transform.md @@ -1,7 +1,24 @@ # Control Transform +![UI Control Transform](media/control-transform.png) + Every GUI control contains a set of properties related to transforming the control within the parent container. Every control location can be assigned and fixed, or depend on the parent container controls dimensions. Use the properties group **Transform** when editing selected **UI Control** in the editor to adjust its appearance. All these options can also be modified at runtime from C# code. +## Anchor + +![Anchor Presets](media/anchor-presets.png) + +The control has *anchor min* and *anchor max* properties which can be set manually or via the *Anchor Presets* editor. The control anchors are normalized (to range `0-1`) position in the parent control that the upper left and bottom right corners. + +This can be used to dock control inside the parent container so control location/size can depend on parent container bounds. + +Additional features: +* Hold *Shift* key to update control bounds to the certain anchor preset (eg. quickly fill the parent control area), +* Hold *Control* key to update the pivot point to the certain anchor preset (eg. to rotate the control around it). + +> [!Tip] +> A small `X` button under the control's `Height` field can be used to toggle UI control resizing based on where the pivot is rather than just the top-left. + ## Location The location of the upper-left corner of the control relative to the upper-left corner of its container. @@ -37,11 +54,3 @@ The shear transform angles (x, y). Defined in degrees. The control rotation angle (in degrees). ![Rotation](media/rotation.jpg) - -## Anchor - -The control has *anchor min* and *anchor max* properties which can be set manually or via the *Anchor Presets* editor. The control anchors are normalized (to range 0-1) position in the parent control that the upper left and bottom right corners. -This can be used to dock control inside the parent container so control location/size can depend on parent container bounds. - -![Anchor Presets](media/anchor_presets.png) - diff --git a/manual/ui/tutorials/blur-background.md b/manual/ui/tutorials/blur-background.md index 3b649b4d..a802d8c5 100644 --- a/manual/ui/tutorials/blur-background.md +++ b/manual/ui/tutorials/blur-background.md @@ -22,7 +22,9 @@ For the newly created GUI we will use a `Blur Panel` control. To do so, select t ## 4. Adjusting the panel -Now, set the **Blur Strength** to **8** for example and adjust the **bounds** of the control to cover the whole background of the interface (you can use *Dock Style* set to *Fill*). +![UI Control Stretch All](media/ui-stretch-all.png) + +Now, set the **Blur Strength** to **8** for example and adjust the **bounds** of the control to cover the whole background of the interface (you can use *Anchor Presets* set to *Stretch All* with *Shift* key pressed down to update bounds). ## 5. See the results diff --git a/manual/ui/tutorials/media/ui-stretch-all.png b/manual/ui/tutorials/media/ui-stretch-all.png new file mode 100644 index 00000000..c61737d1 Binary files /dev/null and b/manual/ui/tutorials/media/ui-stretch-all.png differ