Expanding panels in WrapPanel to max width of device

How-to Discussions
1

Hello,

I am new to Fuse, so apologies in advance if this is a repeat question. I’ve searched the forums and documentation high and low and I am coming up empty :frowning:

I am trying to create a dashboard with <Panel> elements that grow and shrink as needed. Each tile should not be narrower than 150pt. However, with the code below when the screen is too small for three columns of squares they overlap as seen in the attached screenshot. I’d like the third column to hide and the tiles to carry on in the next row, as would happen in a WrapPanel. However, replacing the Grid element with a WrapPanel element makes the DockPanels not resize.

Thanks! :slight_smile:

<App>
<ScrollView>
	<Grid ux:Name="itemGrid" Columns="1*,1*,1*" Margin="4" Padding="4" CellSpacing="4">
		<Each Count="20">
			<DockPanel Color="Green" MinWidth="150" BoxSizing="FillAspect" Aspect="1">
				<Panel Dock="Bottom" Color="#fafafa" Margin="1">
					<Text Value="Title" Alignment="CenterLeft" Margin="8,0" />
				</Panel>
				<Text Value="preview" Alignment="Center" TextColor="#bbb" />

				<Rectangle Color="#fff" Layer="Background">
					<Stroke Width="1" Color="Blue" />
				</Rectangle>
			</DockPanel>

			<Rectangle Color="#fff" Layer="Background">
				<Stroke Width="1" Color="Red" />
			</Rectangle>
		</Each>
	</Grid>
</ScrollView>
</App>

42

2

You can use WhileWindowSize trigger to determine when certain width of screen is changed. so in your case something like

<ScrollView>
<WhileWindowSize LessThan="458,9999" > <!-- width 458 (150*3 + 4*2), Height : set maximum numbers as you can if you don't care about height-->
	<Change itemGrid.Columns="1*,1*" />
</WhileWindowSize>
<Grid ux:Name="itemGrid" Columns="1*,1*,1*" Margin="4" Padding="4" CellSpacing="4">
	<Each Count="20">
		<DockPanel Color="Green" MinWidth="150" BoxSizing="FillAspect" Aspect="1">
			<Panel Dock="Bottom" Color="#fafafa" Margin="1">
				<Text Value="Title" Alignment="CenterLeft" Margin="8,0" />
			</Panel>
			<Text Value="preview {index()}" Alignment="Center" TextColor="#bbb" />

			<Rectangle Color="#fff" Layer="Background">
				<Stroke Width="1" Color="Blue" />
			</Rectangle>
		</DockPanel>

		<Rectangle Color="#fff" Layer="Background">
			<Stroke Width="1" Color="Red" />
		</Rectangle>
	</Each>
</Grid>
1 Like
3

@Hassan_M thank you for your help :slight_smile: I clearly still have a long way to go in terms of getting to know the ins and outs of Fuse.

Please confirm - is your width calculation based on the 3 150pt panels that I want (150*3) added to the 4pt margin and 4 pt padding applied to the <Grid> parent (4*2)? If yes, this would mean that if the <Grid> element was nested within other elements that have further padding or margin values applied that I would need to ad those to this WhileWindowSize calculation, correct?

4

yes it is, but i think for window size / screen size calculations you should determine it using more generic approach, such as small phone size (ex : iPhone 5s ), medium phone size (iPhone 6,7,8), big phone size (most android devices) and tablets if your app support Tablets, for portraits and landscapes orientation. You can read more detail in : https://fuseopen.com/docs/layout/responsive-layout.html

In Fuse Studio you can add Viewports as many as you can, so you can live test it with different screen size.

Hope it helps…

1 Like
5

Amazing! Thank you so much :slight_smile: