Xamarin: Tutorial - Page 05

ContentView

ContentView simply occupies a rectangular area of space. It can be a parent to other layouts/widgets/controls (views) thereby defining a new custom view. It is also a good choice for creating overlays as demonstrated in the next section.

AbsoluteLayout

AbsoluteLayout allows the placing of widgets/controls by their absolute value. This is not unlike the position: absolute property and value setting of CSS.

The AbsoluteLayout children can overlap.

The LayoutBounds is in the order of "x, y, width, height" so AbsoluteLayout.LayoutBounds="0, 1, 75, 25" is at position x = 0, y = 1, width = 75, height = 25.

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
		xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
		xmlns:local="clr-namespace:HelloXamarinForms"
		x:Class="HelloXamarinForms.MainPageXaml"
		BackgroundColor="Black">

	<ContentPage.Padding>
		<OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" />
	</ContentPage.Padding>

	<AbsoluteLayout Padding="40">
		<!--top line-->
		<BoxView Color="Blue"
				AbsoluteLayout.LayoutBounds="0, 10, 75, 5" />
		<!--bottom line-->
		<BoxView Color="Gray"
				AbsoluteLayout.LayoutBounds="195, 45, 75, 5" />
		<!--left line-->
		<BoxView Color="Blue"
				AbsoluteLayout.LayoutBounds="10, 0, 5, 50" />
		<!--right line-->
		<BoxView Color="Gray"
				AbsoluteLayout.LayoutBounds="255, 10, 5, 50" />
		<Label Text="Header Goes Here"
				TextColor="White"
				FontSize="24"
				FontAttributes="Italic"
				AbsoluteLayout.LayoutBounds="20, 15, AutoSize, AutoSize" />
		<Label Text="B Bo Bod Body B Bo Bod Body B Bo Bod Body B Bo Bod Body B Bo Bod Body B Bo Bod Body"
				TextColor="White"
				FontSize="12"
				AbsoluteLayout.LayoutBounds="0, 75, AutoSize, AutoSize" />
	</AbsoluteLayout>

</ContentPage>

Now, an example that uses AbsoluteLayout and ContentView together. Notice the AbsoluteLayout.LayoutFlags. Valid values are All None HeightProportional PositionProportional SizeProportional WidthProportional XProportional YProportional.

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
		xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
		xmlns:local="clr-namespace:HelloXamarinForms"
		x:Class="HelloXamarinForms.MainPageXaml">

	<ContentPage.Padding>
		<OnPlatform x:TypeArguments="Thickness" iOS="10, 20, 10, 0" Android="10, 0" />
	</ContentPage.Padding>

	<AbsoluteLayout>

		<StackLayout AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
						AbsoluteLayout.LayoutFlags="All">

			<Button Text="Be Busy for 3 Seconds"
						 VerticalOptions="CenterAndExpand"
						 HorizontalOptions="Center"
						 Clicked="On3SecButtonClicked" />
			<Button Text="Be Busy for 7 Seconds"
						 VerticalOptions="CenterAndExpand"
						 HorizontalOptions="Center"
						 Clicked="On7SecButtonClicked" />

		</StackLayout>

		<!--Use ContentView as an Overlay-->
		<ContentView x:Name="overlay"
						AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
						AbsoluteLayout.LayoutFlags="All"
						IsVisible="False"
						BackgroundColor="#CC888888"
						Padding="10, 0">

			<ActivityIndicator IsRunning="True"
									VerticalOptions="Center"
									HorizontalOptions="Center" />
		</ContentView>

	</AbsoluteLayout>

</ContentPage>

using Xamarin.Forms;

namespace HelloXamarinForms
{
	public partial class MainPageXaml : ContentPage
	{
		public MainPageXaml()
		{
			InitializeComponent();
		}

		void On3SecButtonClicked(object sender, System.EventArgs e)
		{
			overlay.IsVisible = true;

			Device.StartTimer(System.TimeSpan.FromSeconds(3), () =>
			{
				overlay.IsVisible = false;
				return false;
			});
		}

		void On7SecButtonClicked(object sender, System.EventArgs e)
		{
			overlay.IsVisible = true;

			Device.StartTimer(System.TimeSpan.FromSeconds(7), () =>
			{
				overlay.IsVisible = false;
				return false;
			});
		}
	}
}

Images

To load an image from the Internet, set the Source property to the URI of the Image. This applies to C# code as well: Image.Source = "http://...".

The Aspect property modifies the rendering of the Image. There are three values, AspectFit Fill AspectFill.

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
		xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
		xmlns:local="clr-namespace:HelloXamarinForms"
		x:Class="HelloXamarinForms.MainPageXaml"
		BackgroundColor="White">

	<Image Aspect="AspectFit"
				Source="http://www.prowaretech.com/img/dog.jpg" />
	
</ContentPage>

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
		xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
		xmlns:local="clr-namespace:HelloXamarinForms"
		x:Class="HelloXamarinForms.MainPageXaml"
		BackgroundColor="White">

	<Image Aspect="Fill"
				Source="http://www.prowaretech.com/img/dog.jpg" />
	
</ContentPage>

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
		xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
		xmlns:local="clr-namespace:HelloXamarinForms"
		x:Class="HelloXamarinForms.MainPageXaml"
		BackgroundColor="White">

	<Image Aspect="AspectFill"
				Source="http://www.prowaretech.com/img/dog.jpg" />
	
</ContentPage>

To embed an image into the app, add it to the project's root and set its "Build Action" to "Embedded Resource" this way the program will be able to load it. Create an Image in the XAML file, as below, giving it the name "image".

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
		xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
		xmlns:local="clr-namespace:HelloXamarinForms"
		x:Class="HelloXamarinForms.MainPageXaml"
		BackgroundColor="White">

	<Image x:Name="image" />
	
</ContentPage>

Then load the embedded image using ImageSource.FromResource() in the code behind file. In this example, the embedded file is named "dog.jpg".

using Xamarin.Forms;

namespace HelloXamarinForms
{
	public partial class MainPageXaml : ContentPage
	{
		public MainPageXaml()
		{
			InitializeComponent();

			// To load from the Images folder, use "HelloXamarinForms.Images.dog.jpg"
			image.Source = ImageSource.FromResource("HelloXamarinForms.dog.jpg");
		}
	}
}

Animation

It is possible to animate widgest/controls. For example, it is possible to make a button bounce when it is tapped. To do this, always follow this code.

It may seem possible to do this by writing a class inheriting Button but the problem with this is that the animation will not finish before the code in the Clicked event executes. Later is this tutorial, there is an example of doing this using Triggers however the problem of the animation not finishing before the code in the Clicked event executes persists.

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
		xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
		xmlns:local="clr-namespace:HelloXamarinForms"
		x:Class="HelloXamarinForms.MainPageXaml"
		BackgroundColor="White">

	<ContentPage.Padding>
		<OnPlatform x:TypeArguments="Thickness" iOS="10, 20, 10, 10" Android="10" />
	</ContentPage.Padding>

	<StackLayout>

		<Button Text="Bounce Button"
				BorderColor="Black"
				BorderWidth="0"
				BackgroundColor="Silver"
				TextColor="Black"
				Clicked="OnBounceButtonClick" />

	</StackLayout>
 
</ContentPage>

using Xamarin.Forms;

namespace HelloXamarinForms
{
	public partial class MainPageXaml : ContentPage
	{
		public MainPageXaml()
		{
			InitializeComponent();
		}

		// this must be an async method so that the animation runs
		async void OnBounceButtonClick(object sender, System.EventArgs e)
		{
			Button button = (Button)sender;
			await button.ScaleTo(1.2, 100);
			await button.ScaleTo(0.9, 125);
			await button.ScaleTo(1.1, 150);
			await button.ScaleTo(1, 175);
			await DisplayAlert("Bounce Button", "You clicked a Bouncing Button", "OK");
		}
	}
}

It is also possible to rotate a widget/control using the RotateTo() method.

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
		xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
		xmlns:local="clr-namespace:HelloXamarinForms"
		x:Class="HelloXamarinForms.MainPageXaml"
		BackgroundColor="White">

	<ContentPage.Padding>
		<OnPlatform x:TypeArguments="Thickness" iOS="10, 20, 10, 10" Android="10" />
	</ContentPage.Padding>

	<StackLayout>

		<Button Text="Rotate Button"
				BorderColor="Black"
				BorderWidth="0"
				BackgroundColor="Silver"
				TextColor="Black"
				Clicked="OnRotateButtonClick" />

	</StackLayout>
 
</ContentPage>

using Xamarin.Forms;

namespace HelloXamarinForms
{
	public partial class MainPageXaml : ContentPage
	{
		public MainPageXaml()
		{
			InitializeComponent();
		}

		// this must be an async method so that the animation runs
		async void OnRotateButtonClick(object sender, System.EventArgs e)
		{
			Button button = (Button)sender;
			button.Rotation = 0;
			await button.RotateTo(360, 1000);
			await DisplayAlert("Rotate Button", "You clicked a Rotating Button", "OK");
		}
	}
}

Comment