XAML Formatting and Code Behind

I added some padding and spacing to the parent StackLayout to move it down on the screen and put a bit of space between the individual elements. I also user the Orientation property of the individual elements to center them nicely on the screen.

<?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="Viand.AddItemPage"
	Title="Add Item">
		<ToolbarItem x:Name="saveItem"
		<StackLayout Orientation="Vertical"
			<Entry x:Name="itemEntry"
				Placeholder="Tap here to add a new item"/>
			<StackLayout Orientation="Horizontal"
				<Label x:Name="destinationLabel" VerticalOptions="Center">
					Save to Add list
				<Switch x:Name="destinationSwitch"

I’m not crazy about having to repurpose the Switch control as an Add/Buy option button but it will do for now (I also want to see if it’s possible to remove the “ON” text from Android version of the control or substitute some other text).

Viand-Add-Item-SaveToAdd-1  Viand-Add-Item-SaveToAdd-Android

In the XAML above I also added x:name properties to each of the controls so I could reference them in the screen’s code behind. I also tied the Clicked and Toggled events of two of the controls, saveItem and destinationSwitch, to methods in the XAML pages code behind.

Here’s the code in the code behind that handles changing the Text of destinationLabel when destinationSwitch is toggled.

public partial class AddItemPage : ContentPage
	public AddItemPage()

	void OnDestinationSwitchToggled(object sender, EventArgs args)
		if (destinationSwitch.IsToggled == true) {
			destinationLabel.Text = "Save to Add list";
		} else {
			destinationLabel.Text = "Save to Buy list";

Here’s how it looks.

Viand-Add-Item-SaveToAdd-1  Viand-Add-Item-SaveToBuy-1

This entry was posted in Side Projects, Software Development and tagged , , , , . Bookmark the permalink.