The width limit for an element using
- Fuse.Elements 2.4.0
The @(Element.BoxSizing:box sizing) algorithm is what converts the various layout properties, such as
Alignment, into an actual position and size. As the
Standard setting is general purpose, you generally only change the
BoxSizing mode in special layouts.
Standardis the common layout model. This interprets the layout properties basically as they are described.
NoImplicitMaxis a small modification to the
Standardmodel. This removes the implied limits of
MaxHeight="100%". This is useful to create oversized elements which should not be limited by their parent size.
Limituses the basic model of
Standardbut then restricts the final size. This is primarily used for sliding panels, or overhanging elements.
FillAspectenforces an aspect ratio on the size of the element. It is used when the aspect is most important sizing consideration, such as creating a square grid.
LayoutMastershould not be used directly, it is set implicitly when setting the Element.LayoutMaster property.
The standard layout rules interpret the layout properties fairly directly.
By default elements are expanded in both directions to fill the available space. An element that has an explicit
Height will be not be expanded to fill its parent in that dimension. An element that has an explicit
Alignment will not be expanded in the direction of the alignment (for example
Left will not stretch horizontally, but still verticall,y whereas
Center will not expand in either direction). When an element is not expanded it will use with the explicit size (
Height) or use the natural size (enough to contain itself and its children).
Elements have an implied
This works like
Standard but removes the implied
This is useful for elements that are generally larger than their parent. Usually this is for adding panels beside an element, or decorations near an element.
<Panel Alignment="Center"> <Text Value="A Notice"/> <Image BoxSizing="NoImplicitMax" File="star.png" Alignment="TopLeft" Anchor="50%,50%"/> </Panel>
This creates a text label with a star in the upper-left corner. The
BoxSizing="NoImplicitMax" ensures that the star is it's natural size even if the label is smaller than it.
Limit allows you to restrict the resulting size of an element without modifying the layout of the element itself. It's primary use-case is for drawers (panels that slide in/out).
<Panel Alignment="Center" Height="30" Color="#AFF"> <StackPanel Alignment="TopLeft" Anchor="0%,100%" BoxSizing="Limit" LimitHeight="0%" ux:Name="theStack" Color="#AFA" ClipToBounds="true"> <Text Value="One"/> <Text Value="Two"/> <Text Value="Three"/> </StackPanel> <WhileTrue ux:Name="showMenu"> <Change theStack.LimitHeight="100%" Duration="0.5"/> </WhileTrue> <Clicked> <Toggle Target="showMenu"/> </Clicked> </Panel>
If you click on the box in the example a list of items will slide out from the top. This is done by starting with a
LimitHeight="0%" and animating to
100%. The percentage here refers to the calculated size of the element based on the
Standard model. The height of the parent does not influence the children however (the available size in the limited dimensions is erased).
ClipToBounds="true". Though the size is limited it doesn't prevent an element from being oversized, thus we clip to hide to oversized part.
If you just want to do edge panels use an Controls.EdgeNavigator instead, or consider a Gestures.SwipeGesture to move it in/out. Panels at the edges don't need to be reduced in size since they can simply move out of the view area instead.
The size of the element is calculated to meet the specified Element.Aspect ratio. This is based on the available space in the parent element, but also considers any explicit
<Grid BoxSizing="FillAspect" Aspect="2" ColumnCount="4" RowCount="2">
This creates a 4x2 grid that fills the available space but enforces the aspect of
2, which causes it to be twice as wide as tall. This results in the cells being square.
Unlike the standard sizing model the content of the element, it's children, are not considered when calculating the size. It's strictly a calculation derived from the parent layout and the element's own layout properties.
You can use the
Element.AspectConstraint to fine tune the sizing if your are relying on minimum and maximum sizes.