Skip to content

Instantly share code, notes, and snippets.

@StephaneDelcroix

StephaneDelcroix/grid2.xaml

Last active November 21, 2018 09:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save StephaneDelcroix/da29dcbb1a1f7501bab387e76ad0be17 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save StephaneDelcroix/da29dcbb1a1f7501bab387e76ad0be17 to your computer and use it in GitHub Desktop.
Download ZIP
Xamarin.Forms FlexLayout + CSS samples
Raw
grid2.xaml
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Xamarin.Forms.Controls.XamlPage">
<ContentPage.Resources>
<StyleSheet>
<![CDATA[
.section-title {
color: #778;
font-style: bold;
font-size: 20;
margin: 6 0 0 6;
}
.grid {
flex-wrap: wrap;
color: #556;
}
.grid>* { /*all grid cells */
flex-grow: 0;
background-color: #eed;
text-align: center;
font-size: small;
height: 30;
color: #556;
}
.grid>.full { flex-basis: 100%; }
.grid>.half { flex-basis: 50%; background-color: cornflowerblue; }
.grid>.third { flex-basis: 33.33%; background-color: pink; }
.grid>.fourth { flex-basis: 25%; background-color: lightblue; }
.grid>.auto { flex-grow: 1; background-color: coral;}
.grid>.break { flex-basis: 100%; height: 0;}
]]>
</StyleSheet>
<Style TargetType="Label">
<Setter Property="VerticalTextAlignment" Value="Center" />
</Style>
</ContentPage.Resources>
<ScrollView>
<StackLayout>
<Label Text="Basic Grids" StyleClass="section-title"/>
<FlexLayout StyleClass="grid">
<Label StyleClass="full" Text="full" />
<Label StyleClass="half" Text="1/2" />
<Label StyleClass="half" Text="1/2" />
<Label StyleClass="fourth" Text="1/4" />
<Label StyleClass="half" Text="1/2" />
<Label StyleClass="fourth" Text="1/4" />
<Label StyleClass="third" Text="1/3" />
<Label StyleClass="third" Text="1/3" />
<Label StyleClass="third" Text="1/3" />
<Label StyleClass="fourth" Text="1/4" />
<Label StyleClass="fourth" Text="1/4" />
<Label StyleClass="fourth" Text="1/4" />
<Label StyleClass="fourth" Text="1/4" />
<Label StyleClass="fourth" Text="1/4" />
<Label StyleClass="third" Text="1/3" />
<Label StyleClass="auto" Text="left-over" />
<BoxView StyleClass="break" />
<Label StyleClass="fourth" Text="1/4" />
<Label StyleClass="auto" Text="left-over" />
</FlexLayout>
</StackLayout>
</ScrollView>
</ContentPage>
Raw
grids.xaml
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Xamarin.Forms.Controls.XamlPage">
<ContentPage.Resources>
<StyleSheet>
<![CDATA[
.section-title {
color: #778;
font-style: bold;
font-size: 20;
margin: 6 0 0 6;
}
.grid {
flex-wrap: wrap;
flex-direction: column;
align-items: stretch;
height: 180;
}
.grid-row {
width: 370;
flex-wrap: wrap;
flex-direction: row;
margin: 3 0;
flex-grow: 1;
}
.grid-cell {
flex-grow: 1;
background-color: #eed;
text-align: center;
font-size: small;
margin: 0 3;
color: #556;
}
]]>
</StyleSheet>
</ContentPage.Resources>
<ScrollView>
<StackLayout>
<Label Text="Basic Grids" StyleClass="section-title"/>
<FlexLayout StyleClass="grid">
<FlexLayout StyleClass="grid-row">
<Label StyleClass="grid-cell" Text="1/2" VerticalTextAlignment="Center" />
<Label StyleClass="grid-cell" Text="1/2" VerticalTextAlignment="Center" />
</FlexLayout>
<FlexLayout StyleClass="grid-row">
<Label StyleClass="grid-cell" Text="1/3" VerticalTextAlignment="Center" />
<Label StyleClass="grid-cell" Text="1/3" VerticalTextAlignment="Center" />
<Label StyleClass="grid-cell" Text="1/3" VerticalTextAlignment="Center" />
</FlexLayout>
<FlexLayout StyleClass="grid-row">
<Label StyleClass="grid-cell" Text="1/4" VerticalTextAlignment="Center" />
<Label StyleClass="grid-cell" Text="1/4" VerticalTextAlignment="Center" />
<Label StyleClass="grid-cell" Text="1/4" VerticalTextAlignment="Center" />
<Label StyleClass="grid-cell" Text="1/4" VerticalTextAlignment="Center" />
</FlexLayout>
<FlexLayout StyleClass="grid-row">
<Label StyleClass="grid-cell" Text="1/5" VerticalTextAlignment="Center" />
<Label StyleClass="grid-cell" Text="1/5" VerticalTextAlignment="Center" />
<Label StyleClass="grid-cell" Text="1/5" VerticalTextAlignment="Center" />
<Label StyleClass="grid-cell" Text="foo bar baz qux" VerticalTextAlignment="Center" />
<Label StyleClass="grid-cell" Text="1/5" VerticalTextAlignment="Center" />
</FlexLayout>
</FlexLayout>
</StackLayout>
</ScrollView>
</ContentPage>
Raw
login.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Xamarin.Forms.Controls.XamlPage">
<ContentPage.Resources>
<StyleSheet>
<![CDATA[
.body {
color: #fff;
align-items: center;
justify-content: center;
background-color: #16222a;
}
.container {
background-color: rgba(58,63,68,0.5);
width:300;
height:340;
flex-direction: column;
}
.login-form {
height:200;
flex-direction: column;
margin-top: 20;
}
.logo {
font-size: 20;
margin-top: 40;
text-align: center;
}
entry {
height: 40;
margin: 20 6 0;
}
button {
background-color: teal;
margin: 40 6 0;
}
]]>
</StyleSheet>
</ContentPage.Resources>
<FlexLayout StyleClass="body">
<FlexLayout StyleClass="container">
<Label Text="Hello, Flex" StyleClass="logo"/>
<FlexLayout StyleClass="login-form">
<Entry Placeholder="UserName"/>
<Entry Placeholder="Password" IsPassword="true"/>
<Button Text="Log in"/>
</FlexLayout>
</FlexLayout>
</FlexLayout>
</ContentPage>
Raw
showpage.xaml
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Xamarin.Forms.Controls.XamlPage">
<ContentPage.Resources>
<Style x:Key="FAStyle" TargetType="Label">
<Setter Property="FontFamily">
<Setter.Value>
<OnPlatform x:TypeArguments="x:String">
<On Platform="UWP" Value="Segoe MDL2 Assets"></On>
<On Platform="iOS" Value="FontAwesome"></On>
<On Platform="Android" Value="FontAwesome.otf#FontAwesome"></On>
</OnPlatform>
</Setter.Value>
</Setter>
</Style>
<StyleSheet>
<![CDATA[
.content{
background-color: black;
align-items: start;
align-content: start;
flex-wrap: wrap;
}
.poster {
flex-basis: 100%;
}
.summary {
background-color: black;
flex-direction: row;
justify-content: spacebetween;
height: 20;
margin: 10;
}
.popularity {
color: red;
margin: 5 10 0;
}
.year, .rating, .length {
font-size: 14;
color: #f1f1f1;
margin: 5 10 0;
}
.break { flex-basis: 100%; height: 0;}
.spacer {
flex-basis: 100%; height: 0;
}
.title {
color: #eee;
font-size: 24;
margin: 10;
}
.description {
color: #ddd;
margin: 10,0,10,10;
flex-basis: 100%;
}
.action {
color: #FFFFFF;
font-size: 48;
margin: 0 0 0 10;
}
]]>
</StyleSheet>
</ContentPage.Resources>
<ContentPage.Content>
<ScrollView>
<FlexLayout StyleClass="content" >
<Image StyleClass="poster" Source="ragnarok.jpg"/>
<Label Style="{StaticResource FAStyle}" StyleClass="popularity" Text="&#xf005;&#xf005;&#xf005;&#xf005;&#xf005;" />
<Label StyleClass="year" Text="2017" />
<Label StyleClass="rating" Text="PG-13" />
<Label StyleClass="length" Text="2hr 10m" />
<BoxView StyleClass="spacer"/>
<Label StyleClass="title" Text="Thor: Ragnarok" />
<Label StyleClass="description" Text="Thor is imprisoned on the other side of the universe and finds himself in a race against time to get back to Asgard to stop Ragnarok, the destruction of his homeworld and the end of ..."/>
<Label StyleClass="description">
<Label.FormattedText>
<FormattedString>
<Span Text="Cast: " FontAttributes="Bold" />
<Span Text="Chris Hemsworth, Tom Hiddleston, Cate Blanchett, Idris Elba, Jeff Goldblum..." />
</FormattedString>
</Label.FormattedText>
</Label>
<Label StyleClass="description">
<Label.FormattedText>
<FormattedString>
<Span Text="Director: " FontAttributes="Bold" />
<Span Text="Taika Waititi" />
</FormattedString>
</Label.FormattedText>
</Label>
<Label StyleClass="description">
<Label.FormattedText>
<FormattedString>
<Span Text="Writers: " FontAttributes="Bold" />
<Span Text="Eric Pearson, Craig Kyle, Christopher Yost" />
</FormattedString>
</Label.FormattedText>
</Label>
<Label StyleClass="action" Style="{StaticResource FAStyle}" Text="&#xf0fe;"/>
<Label StyleClass="action" Style="{StaticResource FAStyle}" Text="&#xf14d;"/>
<BoxView FlexLayout.Grow="1" />
</FlexLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>
Raw
wrap.xaml
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Xamarin.Forms.Controls.XamlPage" Padding="0,48,0,0">
<ContentPage.Resources>
<StyleSheet>
<![CDATA[
.section-title {
color: #778;
font-style: bold;
font-size: 20;
margin: 6 0 0 6;
}
.wrap {
flex-wrap: wrap;
flex-direction: row;
height: 350;
width: 370;
justify-content: space-around;
align-content: space-around;
}
.item {
background-color: #eee;
width: 100;
height:100;
flex-grow: 0;
margin: 0 3 3 0;
}
]]>
</StyleSheet>
</ContentPage.Resources>
<ScrollView>
<StackLayout>
<Label Text="Wrap Panel" StyleClass="section-title"/>
<FlexLayout StyleClass="wrap">
<Image StyleClass="item" Source="http://lorempixel.com/100/100/cats/" />
<Image StyleClass="item" Source="http://lorempixel.com/100/100/cats/" />
<Image StyleClass="item" Source="http://lorempixel.com/100/100/cats/" />
<Image StyleClass="item" Source="http://lorempixel.com/100/100/cats/" />
<Image StyleClass="item" Source="http://lorempixel.com/100/100/cats/" />
<Image StyleClass="item" Source="http://lorempixel.com/100/100/cats/" />
<Image StyleClass="item" Source="http://lorempixel.com/100/100/cats/" />
</FlexLayout>
</StackLayout>
</ScrollView>
</ContentPage>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment