|
|
@@ -86,6 +86,7 @@ The UI Layout Definition Format provides a standardized way to define user inter
|
|
|
7. **Modern UI Controls**
|
|
|
- Advanced Avalonia 11.0+ controls
|
|
|
- Enhanced WinForms .NET 6+ support
|
|
|
+ - New Gallery control for customizable item displays with box templates
|
|
|
- Touch and gesture support
|
|
|
- Animation and transition systems
|
|
|
- Responsive design patterns
|
|
|
@@ -406,6 +407,60 @@ ui-layout-migrate --from 1.2 --to 1.3 --input myapp.xml --output myapp-v13.xml
|
|
|
|
|
|
## Pattern Definitions
|
|
|
|
|
|
+### New Gallery Control
|
|
|
+
|
|
|
+The Gallery control is a specialized list control for displaying collections of items in customizable boxes with templates:
|
|
|
+
|
|
|
+```xml
|
|
|
+<patterns>
|
|
|
+ <control name="Gallery" type="list" category="basic" inherits="CommonControl">
|
|
|
+ <description>Gallery control for displaying collection of items in customizable boxes with templates</description>
|
|
|
+ <constraints>
|
|
|
+ <allowed-parents>Panel,SplitPanel,PopupPanel,TabPage</allowed-parents>
|
|
|
+ <allowed-children>GalleryItem</allowed-children>
|
|
|
+ <container>true</container>
|
|
|
+ <requires-structure>gallery-items,box-template</requires-structure>
|
|
|
+ </constraints>
|
|
|
+ <attributes>
|
|
|
+ <!-- Gallery-specific attributes -->
|
|
|
+ <attribute name="image-width" type="int" min="16" max="512" default="64" />
|
|
|
+ <attribute name="image-height" type="int" min="16" max="512" default="64" />
|
|
|
+ <attribute name="box-width" type="int" min="32" max="1024" default="120" />
|
|
|
+ <attribute name="box-height" type="int" min="32" max="1024" default="120" />
|
|
|
+ <attribute name="paging-enabled" type="bool" default="false" />
|
|
|
+ <attribute name="paging-page-size" type="int" min="1" max="1000" default="50" />
|
|
|
+ </attributes>
|
|
|
+ <structure>
|
|
|
+ <gallery-items max-count="unbounded" />
|
|
|
+ <box-template required="true" />
|
|
|
+ </structure>
|
|
|
+ </control>
|
|
|
+</patterns>
|
|
|
+```
|
|
|
+
|
|
|
+### Gallery Usage Example
|
|
|
+
|
|
|
+```xml
|
|
|
+<Gallery name="ProductGallery" box-width="150" box-height="180" paging-enabled="true">
|
|
|
+ <box-template name="ProductTemplate" width="140" height="170">
|
|
|
+ <template-elements>
|
|
|
+ <element name="ProductImage" type="image" x="10" y="10" width="120" height="80" data-binding="Image" />
|
|
|
+ <element name="ProductName" type="text" x="10" y="100" width="120" height="20" data-binding="Name" font-style="bold" />
|
|
|
+ <element name="ProductPrice" type="text" x="10" y="125" width="120" height="15" data-binding="Price" format-string="C2" />
|
|
|
+ </template-elements>
|
|
|
+ </box-template>
|
|
|
+ <items>
|
|
|
+ <GalleryItem text="Product 1" image="product1.jpg">
|
|
|
+ <data-fields>
|
|
|
+ <field name="Name" value="Premium Widget" />
|
|
|
+ <field name="Price" value="29.99" />
|
|
|
+ <field name="Image" value="images/widget.jpg" />
|
|
|
+ </data-fields>
|
|
|
+ </GalleryItem>
|
|
|
+ </items>
|
|
|
+</Gallery>
|
|
|
+```
|
|
|
+
|
|
|
### Enhanced Control Definitions
|
|
|
|
|
|
```xml
|
