Chapter 10 Remote Data

<VerticalStackLayout>

<Label

Text="Today"

FontSize="20"

VerticalOptions="Center"

HorizontalOptions="Start" TextTransform="Uppercase" />

<!-- Loading --> <VerticalStackLayout

IsVisible="{Binding State, Converter={StaticResource IsLoadingConverter}}">

<ActivityIndicator

IsRunning="{Binding State, Converter={Static Resource IsLoadingConverter}}" />

<Label

Text="Loading weather data" /> </VerticalStackLayout>

</VerticalStackLayout>

</ContentView>

Displaying the Loaded State

In order to handle the error state, you need to add another instance of your IsEqualToStateConverter, this time with the State property set to Loaded.

<converters:IsEqualToStateConverter

x:Key="HasLoadedConverter" State="Loaded" />

323

Chapter 10 Remote Data

You can then use this converter in a binding to show/hide the following UI:

<!-- Loaded --> <VerticalStackLayout

IsVisible="{Binding State, Converter={StaticResource HasLoadedConverter}}">

<Label

VerticalOptions="Center"

HorizontalOptions="Center">

<Label.FormattedText>

<FormattedString>

<Span

Text="{Binding Temperature, String Format='{0:F1}'}"

FontSize="60"/>

<Span

Text="°C" /> </FormattedString>

</Label.FormattedText>

</Label>

<Label

Text="{Binding Weather}" FontSize="20" VerticalOptions="Center" HorizontalOptions="Center" />

<Image

Source="{Binding IconUrl}" WidthRequest="100" HeightRequest="100"/>

</VerticalStackLayout>

324

Chapter 10 Remote Data

Displaying the Error State

In order to handle the error state, you need to add another instance of your

IsEqualToStateConverter, this time with the State property set to Error.

<converters:IsEqualToStateConverter

x:Key="HasErrorConverter" State="Error" />

You can then use this converter in a binding to show/hide the following UI:

<!-- Error --> <VerticalStackLayout

IsVisible="{Binding State, Converter={StaticResource HasErrorConverter}}">

<Label

Text="Unable to load weather data" />

<Button

Text="Retry"

Command="{Binding LoadWeatherCommand}" />

</VerticalStackLayout>

You may have noticed that you have added a Button and bound its command to the view model. You need to add this to your view model if you wish to compile and run the application. The aim of the Button is to allow the user to request a retry of loading the weather information if the Error state is being shown.

Inside your WeatherWidgetViewModel.cs file you need to make the following change:

public ICommand LoadWeatherCommand { get; }

Then you need to update the constructor with the changes in bold:

325