Problem Statement
How to add multiple columns & rows with gallery control. So I have taken an example with four (4) column structure designs to demonstrate.
Solution
Let's follow the below steps to design multiple columns and rows in Gallery Control.
Step 1. Select the Blank Vertical Gallery
Step 2. DataSoruce List
Step 3. Set vertical Gallery below Properties.
- Data Source with SharePoint List with two columns i.e. Title (Event Name) & Event Date.
- Size as "Parent.Width" to capture the entire screen.
- WRAP count as 4 i.e. Gallery item will be in one row with 4 columns, and the rest will continue similarly into the next rows.
- Template Size can be set as per desired height.
- Template Padding can be added as the gap between gallery items.
Step 4. Add other fields to Gallery.
- Add Vertical Container.
- Add two labels under the container.
- Set the value of the first label i.e. ThisItem.Title & Set Width of the label as Parent.Width & Height as Parent.Height/2.
- Set the value of the second label i.e. DateDiff( Today(), ThisItem.EventDate, TimeUnit.Days ) & " day(s) ago" & Set the Width of the label as Parent.Width & Hight as Parent.Height/2.
- Set Container Width as Parent.Width/4-10 and Height as desired height. In this example, I used 150.
This is how the Vertical Gallery can be designed with multiple desired rows and column. Hope you have learned something useful here