Layout

Layout

This example app shows how to construct advanced layouts.

The markup

<App>
	<Image ux:Class="Icon" Density="2" StretchMode="PointPrecise" />
	<Font File="Assets/OpenSans-SemiBold.ttf" ux:Global="SemiBold" />

	<Grid ColumnCount="1" Rows="4.5*,100,4*">
		<Fuse.iOS.StatusBarConfig Style="Light" />

		<Text ux:Class="DefaultText" Color="#fff" Font="SemiBold" />

		<Grid Row="1" RowCount="1" Columns="Auto,Auto,1*" Color="#00000088">
			<DefaultText Margin="20,0,0,20" Alignment="Bottom" FontSize="70">73°</DefaultText>
			<Icon Margin="15,0,15,25" Alignment="Bottom" File="Assets/PartlyCloudyIconWhite.png" />
			<WrapPanel Margin="0,0,0,20" Alignment="Bottom">
				<DefaultText Value="SUNDAY, "/>
				<DefaultText Value="MARCH "/>
				<DefaultText Value="23" />
			</WrapPanel>
		</Grid>
		<Image Row="0" RowSpan="2" File="Assets/PaloAlto.png" StretchMode="UniformToFill" />
		<DockPanel Row="2" Color="#f3f3f3">
			<Grid ColumnCount="6" RowCount="1" Dock="Top" Height="80">
				<DefaultText ux:Class="StatText" Color="#1c1c1c" FontSize="14" Alignment="CenterLeft" />
				<Icon ux:Class="StatIcon" Margin="6" Alignment="CenterRight" />

				<Rectangle Alignment="Top" Height="1" Color="#999b9b" Layer="Background" />

				<StatIcon File="Assets/FlagIcon.png" />
				<StatText>4 MPH</StatText>
				<StatIcon File="Assets/CompassIcon.png" />
				<StatText>SOUTH</StatText>
				<StatIcon File="Assets/UmbrellaIcon.png" />
				<StatText>23%</StatText>
			</Grid>
			<Grid RowCount="4" ColumnCount="5">
				<Rectangle Alignment="Top" Height="1" Color="#999b9b" Layer="Background" />
				<DefaultText ux:Class="Weekday" Color="#939393" Alignment="Center" FontSize="12" />
				<DefaultText ux:Class="Temperature" Color="#333333" Alignment="Center" FontSize="20" Margin="6,0,0,0" />
				<Weekday>MON</Weekday>
				<Weekday>TUE</Weekday>
				<Weekday>WED</Weekday>
				<Weekday>THU</Weekday>
				<Weekday>FRI</Weekday>
				<Icon File="Assets/CloudsIcon.png" />
				<Icon File="Assets/SunnyIcon.png" />
				<Icon File="Assets/PartlyCloudyIcon.png" />
				<Icon File="Assets/PartlyCloudyIcon.png" />
				<Icon File="Assets/SunnyIcon.png" />
				<Temperature>83°</Temperature>
				<Temperature>85°</Temperature>
				<Temperature>81°</Temperature>
				<Temperature>82°</Temperature>
				<Temperature>86°</Temperature>
			</Grid>
		</DockPanel>
	</Grid>
</App>