This is the continuation of “Simple Weather App in Xamarin Forms with MVVM using Weather API Part 2” where we’ll going to put our UI.

If you want to visit the Part 1, here’s the link: “Simple Weather App in Xamarin Forms with MVVM using Weather API Part 1”

This is the last part of building our simple weather app

Front-End Xaml Phase

11.0 The Xaml Page

11.1 Open the MainPage.xaml Page and reference the ViewModel inside the Xaml Page first.

1

xmlns:weatherVm="clr-namespace:SimpleCrossWeatherApp.ViewModels"

11.2 Add these following code snippets

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

<ContentPage.BindingContext>
    <weatherVm:WeatherViewModel/>
</ContentPage.BindingContext>

<StackLayout Padding="20,40,20,20">
    <Entry Text="{Binding City, Mode=TwoWay}"
           Placeholder="Search City"/>
    <ActivityIndicator IsRunning="{Binding IsBusy,Mode=TwoWay}"/>
    <StackLayout Orientation="Horizontal">
        <StackLayout HorizontalOptions="StartAndExpand">
            <Label Text="City:"/>
        </StackLayout>
        <StackLayout HorizontalOptions="EndAndExpand">
            <Label Text="{Binding WeatherMainModel.name}"/>
        </StackLayout>
    </StackLayout>

    <StackLayout Orientation="Horizontal">
        <StackLayout HorizontalOptions="StartAndExpand">
            <Label Text="Country:"/>
        </StackLayout>
        <StackLayout HorizontalOptions="EndAndExpand">
            <Label Text="{Binding WeatherMainModel.sys.country}"/>
        </StackLayout>
    </StackLayout>

    <StackLayout Orientation="Horizontal">
        <StackLayout HorizontalOptions="StartAndExpand">
            <Label Text="Temperature:"/>
        </StackLayout>
    <StackLayout HorizontalOptions="EndAndExpand">
            <Label Text="{Binding WeatherMainModel.main.temp}"/>
        </StackLayout>
    </StackLayout>

    <StackLayout Orientation="Horizontal">
        <StackLayout HorizontalOptions="StartAndExpand">
            <Label Text="Humidity:"/>
        </StackLayout>
    <StackLayout HorizontalOptions="EndAndExpand">
            <Label Text="{Binding WeatherMainModel.main.humidity}"/>
        </StackLayout>
    </StackLayout>

    <StackLayout Orientation="Horizontal">
        <StackLayout HorizontalOptions="StartAndExpand">
            <Label Text="Weather Main Status:"/>
        </StackLayout>
    <StackLayout HorizontalOptions="EndAndExpand">
            <Label Text="{Binding WeatherMainModel.weather[0].main}"/>
        </StackLayout>
    </StackLayout>

    <StackLayout Orientation="Horizontal">
        <StackLayout HorizontalOptions="StartAndExpand">
            <Label Text="Weather Status:"/>
        </StackLayout>
        <StackLayout HorizontalOptions="EndAndExpand">
            <Label Text="{Binding WeatherMainModel.weather[0].description}"/>           
        </StackLayout>
     </StackLayout>

    <StackLayout Orientation="Horizontal">
        <StackLayout HorizontalOptions="StartAndExpand">
            <Label Text="Weather Icon:"/>
        </StackLayout>
        <StackLayout HorizontalOptions="EndAndExpand">
            <Image Source="{Binding IconImageString}"
                   WidthRequest="30"
                   HeightRequest="30"/>
            </StackLayout>
    </StackLayout>
        
    <StackLayout Orientation="Horizontal">
        <StackLayout HorizontalOptions="StartAndExpand">
            <Label Text="Wind Speed:"/>
        </StackLayout>
        <StackLayout HorizontalOptions="EndAndExpand">
            <Label Text="{Binding WeatherMainModel.wind.speed}"/>
        </StackLayout>
    </StackLayout>
</StackLayout>

Final Step

Run the App

If you have some questions or comments, please drop it below. :)