Platform independent styling

Hold on! What has happened with the MainPage—no button, no text?

What is happening here is we have not specified colors for these elements, so the default color of the text has come up as white. Open up MainPage.xaml and change the text colors accordingly:

<Label x:Name="DesciptionLabel" Text="{Binding DescriptionMessage}" TextColor="Black" Font="Arial, 20" Grid.Row="0" Grid.Column="0"/> 
 
<Button x:Name="SpeakButton" Text="{Binding SpeakTitle}" TextColor="Blue" Command="{Binding SpeakCommand}" Grid.Row="2" Grid.Column="0"/> 

It might be a good idea to color the background of the Entry object as well, so we can see the text definition:

<Entry x:Name="SpeakEntry" Placeholder="{Binding SpeakEntryPlaceholder}" BackgroundColor="Silver" Text="{Binding SpeakText, Mode=TwoWay}" Grid.Row="1" Grid.Column="0"/> 

Now run it again and see the text, button, and entry background display.

But wait! What if we don't want these colors to change for iOS and Android, or we want to set these colors differently based on the platform?

Here is another trick to try: in the MainPage.xaml sheet, we are going to change the background color of the entry based upon whether it is iOS, Android, or Windows Phone:

<Entry x:Name="SpeakEntry" Placeholder="{Binding SpeakEntryPlaceholder}" Text="{Binding SpeakText, Mode=TwoWay}" Grid.Row="1" Grid.Column="0"> 
            <Entry.BackgroundColor> 
                <OnPlatform x:TypeArguments="Color" 
                    Android="White" 
                    WinPhone="Silver" 
                    iOS="White"> 
                </OnPlatform> 
            </Entry.BackgroundColor> 
        </Entry> 

We start by specifying the property tag we are changing, and then a tag for OnPlatform in which we specify the argument type, which is Color. Let's take it a step further and change the text colors for the Button and Label as well:

<Label x:Name="DesciptionLabel" Text="{Binding DescriptionMessage}" Font="Arial, 20" Grid.Row="0" Grid.Column="0"> 
            <Label.TextColor> 
                <OnPlatform x:TypeArguments="Color" 
                    Android="Black" 
                    WinPhone="Black" 
                    iOS="Black"> 
                </OnPlatform> 
            </Label.TextColor> 
        </Label> 
 
        <Button x:Name="SpeakButton" Text="{Binding SpeakTitle}" Command="{Binding SpeakCommand}" Grid.Row="2" Grid.Column="0"> 
            <Button.TextColor> 
                <OnPlatform x:TypeArguments="Color" 
                    Android="Navy" 
                    WinPhone="Blue" 
                    iOS="Navy"> 
                </OnPlatform> 
            </Button.TextColor> 
        </Button> 

This is a nice little variation between styles for the first page. As you build more complex XAML sheets, you may find some areas where you will have to change pixel items, change color, and perform other styling to give it that extra edge.

Let's call it a day and end this project here; it's now time to build our GPS locator.