DERS 1 VE DERS 2

Ders tanıtımı, Xamarin tanıtımı, kullanım alanları, içeriği, desteklediği sürümler, geliştirici araçları,
yüklemek, proje açma, kontroller, emülatör kurulum ve tanıtım, sayfa yapıları

Margin- Border- Padding- Content

DERS 3

ContenPage(içerik sayfası) kullanımı

QuotesPage örneği

1. Örnek
MyContentPage.xaml kodu
<?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="Ders3.Views.MyContentPage">
<ContentPage.Content>
<StackLayout>
<Label Text="İçerik Sayfası!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

MyContentPage.xaml.cs kodu

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace Ders3.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MyContentPage : ContentPage
{
public MyContentPage ()
{
InitializeComponent ();
 }
}
}

App.xaml.cs içerisinde yapılan değişiklik

MainPage = new MyContentPage();

2. Örnek
QuotesPage.xaml kodu:

<?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="Ders3.Views.QuotesPage">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness"
Android="20, 30, 20, 20">
</OnPlatform>
</ContentPage.Padding>
<ContentPage.Content>
<StackLayout>
 <Button Text="Next" Clicked="Handle_Clicked" />
<Label Text="{Binding
Source={x:Reference slider},
Path=Value,
StringFormat='Font Size: {0:N0}'}" />
<Slider
x:Name="slider"
Maximum="50"
Minimum="16" />
<Label
x:Name="currentQuote"
FontSize="{Binding
Source={x:Reference slider},
Path=Value}" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

QuotesPage.xaml.cs kodu:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace Ders3.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class QuotesPage : ContentPage
{
private int _index = 0;
private string[] _quotes = new string[]
{
"Life is like riding a bicycle. To keep your balance, you must keep
moving.",
"You can't blame gravity for falling in love.",
"Look deep into nature, and then you will understand everything
better."
};

public QuotesPage ()
{
InitializeComponent();
currentQuote.Text = _quotes[_index];
}
void Handle_Clicked(object sender, System.EventArgs e)
{
_index++;
if (_index >= _quotes.Length)
_index = 0;

currentQuote.Text = _quotes[_index];
}
}
}

App.xaml.cs içerisinde yapılan değişiklik

 MainPage = new QuotesPage();

DERS 4
Sayfa yapılarına devam (Tabbed Page, Carousel Page)

Carousel page de tab sayfaları arasındaki geçiş swipe(el hareketleri ile) olmaktadır.

1. Tabbed Sayfalar 1
MyTab1.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="Ders4.Tabbed_Sayfalar.MyTab1" Title="My Tab 1">
<ContentPage.Content>
<StackLayout>
<BoxView BackgroundColor="Blue" VerticalOptions="Center"
HorizontalOptions="Center"></BoxView>
</StackLayout>
</ContentPage.Content>
</ContentPage>

Tabbed Sayfalar 2 MyTab2.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="Ders4.Tabbed_Sayfalar.MyTab2" Title="My Tab 2"
BackgroundColor="Gray">
<ContentPage.Content>
<StackLayout>
<BoxView BackgroundColor="Red" VerticalOptions="Center"
HorizontalOptions="Center"></BoxView>
</StackLayout>
</ContentPage.Content>
</ContentPage>

Tabbed Sayfaları göstermek için MyTabbedPage1.xaml

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Ders4.MyTabbedPage1">
<!--Pages can be added as references or inline-->
<ContentPage Title="Tab 1" />
<ContentPage Title="Tab 2" />
<ContentPage Title="Tab 3" />
</TabbedPage>

Tabbed Sayfaları göstermek için MyTabbedPage1.xaml.cs

using Ders4.Tabbed_Sayfalar;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace Ders4
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MyTabbedPage1 : TabbedPage
{
public MyTabbedPage1 ()
{
//InitializeComponent();
Children.Add(new MyTab1());
Children.Add(new MyTab2());
}
}
}

App.xaml.cs içerisinde yapılan değişiklik

MainPage = new MyTabbedPage1();

2. Örnek
MyCarouselPage.xaml kodu:

using Ders4.Tabbed_Sayfalar;
using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
namespace Ders4
{
class MyCarouselPage: CarouselPage
{
public MyCarouselPage()
{
Children.Add(new MyTab1());
Children.Add(new MyTab2());
}
}

App.xaml.cs içerisinde yapılan değişiklik

MainPage = new MyCarouselPage();

3. Örnek
MyContentPage2.xaml kodu
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Xamarin.Forms;

namespace Ders4
{
public class MyContentPage2 : ContentPage
{
public MyContentPage2 ()
{
/*Content = new StackLayout {
Children = {
new Label { Text = "Welcome to Xamarin.Forms!"
}
}
};*/
Label lblPage = new Label();
lblPage.Text = "Ders 4 ";
lblPage.FontSize = 25;
lblPage.HorizontalOptions = LayoutOptions.Center;
lblPage.VerticalOptions = LayoutOptions.Center;
 Content = lblPage;
}
}
}

App.xaml.cs içerisinde yapılan değişiklik

MainPage = new MyContentPage2();

HorizontalOptions Örnek
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="StackLayoutDemos.Views.AlignmentPage"
Title="Alignment demo">
<StackLayout Margin="20">
<Label Text="Start"
BackgroundColor="Gray"
HorizontalOptions="Start" />
 <Label Text="Center"
BackgroundColor="Gray"
HorizontalOptions="Center" />
<Label Text="End"
BackgroundColor="Gray"
HorizontalOptions="End" />
<Label Text="Fill"
BackgroundColor="Gray"
HorizontalOptions="Fill" />
</StackLayout>
</ContentPage>

VerticalOptions Örnek
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="StackLayoutDemos.Views.ExpansionPage"
Title="Expansion demo">
<StackLayout Margin="20">
<BoxView BackgroundColor="Red"
HeightRequest="1" />
<Label Text="Start"
BackgroundColor="Gray"
VerticalOptions="StartAndExpand" />
<BoxView BackgroundColor="Red"
HeightRequest="1" />
<Label Text="Center"
BackgroundColor="Gray"
VerticalOptions="CenterAndExpand" />
<BoxView BackgroundColor="Red"
HeightRequest="1" />
<Label Text="End"
BackgroundColor="Gray"
VerticalOptions="EndAndExpand" />
<BoxView BackgroundColor="Red"
HeightRequest="1" />
<Label Text="Fill"
BackgroundColor="Gray"
VerticalOptions="FillAndExpand" />
<BoxView BackgroundColor="Red"
HeightRequest="1" />
</StackLayout>
</ContentPage>
DERS 5 ve DERS 6
Sayfa yapılarına devam (Master Detail Page) ve Tasarım yapıları (Tüm Layout yapılar – Relative
Layout, Absolute Layout, Grid, Stack Layout)
1. Örnek
MyDetail.xaml kodu:

<?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="Ders5.MasterSayfalar.MyDetail" BackgroundColor="Black">
<ContentPage.Content>
<StackLayout>
<Label Text="Detail Sayfam!" TextColor="Red"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

MyMenu.xaml kodu:
<?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="Ders5.MasterSayfalar.MyMenu" BackgroundColor="White">
<ContentPage.Content>
<StackLayout>
<!--<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />-->
 <StackLayout Padding="10" Spacing="5"
VerticalOptions="CenterAndExpand">
<Label Text="Eğitimler" TextColor="Black"
BackgroundColor="Blue"></Label>
<Label Text="Başarı Hikayeleri" TextColor="Black"
BackgroundColor="Blue"></Label>
<Label Text="Akademi" TextColor="Black"
BackgroundColor="Blue"></Label>
<Label Text="İlk 10" TextColor="Black"
BackgroundColor="Blue"></Label>
<Label Text="Soru-Cevap" TextColor="Black"
BackgroundColor="Blue"></Label>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>

MyMenu.xaml.cs kodu:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace Ders5.MasterSayfalar
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MyMenu : ContentPage
{
public MyMenu ()
{
InitializeComponent ();
Title = "Xamarin";
// Icon = "menu.jpg";
}
}
}

MyMasterPage.xaml.cs kodu:

using Ders5.MasterSayfalar;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace Ders5
{
[XamlCompilation(XamlCompilationOptions.Compile)]
 public partial class MyMasterPage : MasterDetailPage
{
public MyMasterPage()
{
//InitializeComponent();
// MasterPage.ListView.ItemSelected += ListView_ItemSelected;
Master = new MyMenu();
Detail = new MyDetail();
}

private void ListView_ItemSelected(object sender,

SelectedItemChangedEventArgs e)
{
var item = e.SelectedItem as MyMasterPageMenuItem;
if (item == null)
return;

var page = (Page)Activator.CreateInstance(item.TargetType);

page.Title = item.Title;
Detail = new NavigationPage(page);
IsPresented = false;
MasterPage.ListView.SelectedItem = null;
}
}
}

App.xaml.cs içerisinde yapılan değişiklik

MainPage = new MyMasterPage();

2. Örnek
GridOrnek.xaml kodu:

<?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="Ders6.Layouts.GridOrnek">
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<Label BackgroundColor="Red" Text="0,0" Grid.Row="0"
Grid.Column="0"/>
<Label BackgroundColor="Blue" Text="0,1" Grid.Row="0"
Grid.Column="1"/>
<Label BackgroundColor="Yellow" Text="0,2" Grid.Row="0"
Grid.Column="2"/>
<Label BackgroundColor="Purple" Text="1,0" Grid.Row="1"
Grid.Column="0"/>
<Label BackgroundColor="Silver" Text="1,1" Grid.Row="1"
Grid.Column="1"/>
<Label BackgroundColor="Lime" Text="1,2" Grid.Row="1"
Grid.Column="2"/>
</Grid>
</ContentPage.Content>
</ContentPage>
3. Örnek
Absolute.cs kodu:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Xamarin.Forms;

namespace Ders6.Layouts
{
public class Absolute : ContentPage
{
public Absolute ()
{
/*Content = new StackLayout {
Children = {
new Label { Text = "Welcome to
Xamarin.Forms!" }
}
};*/
AbsoluteLayout layout = new AbsoluteLayout();
BoxView blue = new BoxView();
blue.BackgroundColor = Color.Blue;
layout.Children.Add(blue);
BoxView red = new BoxView();
red.BackgroundColor = Color.Red;
layout.Children.Add(red,new Rectangle(50,50,100,150));
Content = layout;
}
}
}
4. Örnek
RelativeOrnek.cs kodu:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Xamarin.Forms;
namespace Ders6.Layouts
{ public class RelativeOrnek : ContentPage
{
public RelativeOrnek()
{ RelativeLayout layout = new RelativeLayout();
BoxView blue = new BoxView();
BoxView red = new BoxView();
blue.BackgroundColor = Color.Blue;
red.BackgroundColor = Color.Red;
red.Opacity = 0.6;
layout.Children.Add(blue, Constraint.Constant(50),
Constraint.Constant(50));
layout.Children.Add(red, Constraint.RelativeToParent((parent) =>
{
return parent.X + 70;

}), Constraint.RelativeToParent((parent) =>

{
return parent.Y + 70;
}));
Content = layout;
}
}
}
 5. Örnek
StackLayout1.xaml kodu:

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage BackgroundColor="#127ac7" xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Ders7.StackLayout1">
<ContentPage.Content>
<StackLayout VerticalOptions="Center" Spacing="20">
<Label
Text="Welcome to Xamarin"
TextColor="White"
FontSize="30"
FontAttributes="Bold"
HorizontalOptions="Center" />
<Label
Text="Cross-platform apps made easy"
TextColor="White"
FontSize="18"
HorizontalOptions="Center" />
<Button
Text="Login"
TextColor="White"
BackgroundColor="#1dabf0" />
<Button
Text="Register"
TextColor="White"
BackgroundColor="#1dabf0" />
</StackLayout>
 </ContentPage.Content>
</ContentPage>

6. Örnek
StackLayout2.xaml kodu:

<?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="Ders7.StackLayout2">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0">
</OnPlatform>
</ContentPage.Padding>
<ContentPage.Content>
<StackLayout>
<StackLayout Padding="10">
<Label Text="nyc_photographer" />
</StackLayout>
<Image Source="http://lorempixel.com/1920/1080/nature/3/" />
<StackLayout Orientation="Horizontal" Spacing="20" Padding="10, 0">
<Button Text="Like" />
<Button Text="Comment" />
<Button Text="Share" />
</StackLayout>
<StackLayout Padding="10">
<BoxView HeightRequest="1" Color="#f0f0f0" />
<Label Text="700 likes" FontAttributes="Bold" />
<Label TextColor="#444" Text="This is a shot yesterday in
Skanor, Sweden, when driving home, from a couple of days of work in Denmark." />
</StackLayout>
 </StackLayout>
</ContentPage.Content>
</ContentPage>

7. Örnek
Grid1.xaml kodu:

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage BackgroundColor="#354242"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Ders7.Grid1">
<ContentPage.Content>
<Grid RowSpacing="10" ColumnSpacing="10" Padding="40">
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.ColumnSpan="3" Text="1234"
TextColor="White" VerticalOptions="Center" HorizontalOptions="Center"
FontSize="50"></Label>

<Button BorderRadius="30" Grid.Row="1" Grid.Column="0" Text="1"

FontSize="15" TextColor="#28282c" BackgroundColor="#fff" />
<Button BorderRadius="30" Grid.Row="1" Grid.Column="1" Text="2"
FontSize="15" TextColor="#28282c" BackgroundColor="#fff" />
 <Button BorderRadius="30" Grid.Row="1" Grid.Column="2" Text="3"
FontSize="15" TextColor="#28282c" BackgroundColor="#fff" />

<Button BorderRadius="30" Grid.Row="2" Grid.Column="0" Text="4"

FontSize="15" TextColor="#28282c" BackgroundColor="#fff" />
<Button BorderRadius="30" Grid.Row="2" Grid.Column="1" Text="5"
FontSize="15" TextColor="#28282c" BackgroundColor="#fff" />
<Button BorderRadius="30" Grid.Row="2" Grid.Column="2" Text="6"
FontSize="15" TextColor="#28282c" BackgroundColor="#fff" />

<Button BorderRadius="30" Grid.Row="3" Grid.Column="0" Text="7"

FontSize="15" TextColor="#28282c" BackgroundColor="#fff" />
<Button BorderRadius="30" Grid.Row="3" Grid.Column="1" Text="8"
FontSize="15" TextColor="#28282c" BackgroundColor="#fff" />
<Button BorderRadius="30" Grid.Row="3" Grid.Column="2" Text="9"
FontSize="15" TextColor="#28282c" BackgroundColor="#fff" />

<Button BorderRadius="30" Grid.Row="4" Grid.Column="1" Text="0"

FontSize="15" TextColor="#28282c" BackgroundColor="#fff" />

<Button BorderRadius="30" Grid.Row="5" Grid.ColumnSpan="3"

Text="Dial" FontSize="15" TextColor="#28282c" BackgroundColor="#96ca2d" />
</Grid>
</ContentPage.Content>
</ContentPage>
DERS 7
Tasarım yapılarına devam
1. Örnek
AbsoluteLayoutCredit.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="Ders7_2.AbsoluteLayoutCredit">
<ContentPage.Content>
<AbsoluteLayout>
<BoxView Color="#f7f7f7"
AbsoluteLayout.LayoutBounds="0, 0, 1, 0.3"
AbsoluteLayout.LayoutFlags="All" />
<StackLayout HorizontalOptions="Center" VerticalOptions="Center"
AbsoluteLayout.LayoutBounds="0, 0, 1, 0.3"
AbsoluteLayout.LayoutFlags="All">
<Label Text="$11.95" TextColor="#33353a" FontSize="60"
FontAttributes="Bold" HorizontalOptions="Center" />
<Button Text="Add $7.99 Credit" HeightRequest="30" BorderRadius="15"
FontSize="10" FontAttributes="Bold" BackgroundColor="#1695A3" TextColor="White" />
</StackLayout>
<StackLayout Padding="40, 0" Spacing="20"
AbsoluteLayout.LayoutBounds="0, 0.5, 1, 0.3"
AbsoluteLayout.LayoutFlags="All">
<Label Text="Why pay for credit?" HorizontalOptions="Center"
FontAttributes="Bold" FontSize="15" />
<Label HorizontalOptions="Center" HorizontalTextAlignment="Center"
FontSize="13">
Because you can reach people who aren't on
SkyApp by calling mobile and landline
numbers, or spending SMS, at low-cost rates.
</Label>
</StackLayout>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
 2. Örnek
RelativeLayoutCredit.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="Ders7_2.RelativeLayoutCredit">
<ContentPage.Content>
<RelativeLayout>
<BoxView BackgroundColor="#f7f7f7" x:Name="banner"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Height,
Factor=0.3}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor=1}" />
<StackLayout HorizontalOptions="Center" VerticalOptions="Center"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor=1}"

RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Height,
Factor=0.3}">
<Label Text="$11.95" TextColor="#33353a" FontSize="60"
FontAttributes="Bold" />
 <Button Text="Add $7.99 Credit" BackgroundColor="#1695a3"
BorderRadius="15" HeightRequest="30" FontSize="10" FontAttributes="Bold"
TextColor="White" />
</StackLayout>
<StackLayout
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor=1}"

RelativeLayout.YConstraint="{ConstraintExpression
Type=RelativeToView,
ElementName=banner,
Property=Height,
Factor=1,
Constant=30}">
<Label Text="Why pay for credit?" HorizontalOptions="Center"
FontAttributes="Bold" FontSize="15" />
<Label HorizontalOptions="Center" HorizontalTextAlignment="Center"
FontSize="13">
Because you can reach people who aren't on
SkyApp by calling mobile and landline
numbers, or spending SMS, at low-cost rates.
</Label>
</StackLayout>
</RelativeLayout>
</ContentPage.Content>
</ContentPage>
 3. Örnek
AbsoluteLayoutProfile.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="Ders7_2.AbsoluteLayoutProfile">
<ContentPage.Content>
<AbsoluteLayout>
<Image Source="Resources/cicek.jpg" Aspect="AspectFill"
AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
AbsoluteLayout.LayoutFlags="All" />
<Label Text="Relax" TextColor="White" FontSize="30"
HorizontalOptions="Center"
AbsoluteLayout.LayoutBounds="0, 20, 1, 50"
AbsoluteLayout.LayoutFlags="WidthProportional" />
<BoxView Color="Black" Opacity="0.5"
AbsoluteLayout.LayoutBounds="0, 1, 1, 100"
AbsoluteLayout.LayoutFlags="PositionProportional, WidthProportional" />
<StackLayout Orientation="Horizontal" Padding="30, 0"
AbsoluteLayout.LayoutBounds="0, 1, 1, 100"
AbsoluteLayout.LayoutFlags="PositionProportional, WidthProportional">
<Label Text="Profile" HorizontalOptions="Center"
VerticalOptions="Center" TextColor="White" FontSize="15" />
<Label Text="Meditate" HorizontalOptions="CenterAndExpand"
VerticalOptions="Center" TextColor="White" FontSize="15" />
<Label Text="Themes" HorizontalOptions="Center"
VerticalOptions="Center" TextColor="White" FontSize="15" />
</StackLayout>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>