Home.xaml

<?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:ExpenseTracker.viewModel"
             x:Class="ExpenseTracker.views.home.Home"
              NavigationPage.HasNavigationBar="False"
             >
    <ContentPage.BindingContext>
        <local:CategoryViewModel></local:CategoryViewModel>
    </ContentPage.BindingContext>
    <ContentPage.Content>
        
        
        <Grid VerticalOptions="FillAndExpand">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Image Source="overlay.png" Aspect="Fill" HeightRequest="300" VerticalOptions="StartAndExpand"/>
            <StackLayout Orientation="Horizontal" Spacing="20" HorizontalOptions="Start" VerticalOptions="Start" Margin="20,50">
                <ImageButton Source="menu.png" WidthRequest="23" HeightRequest="15" HorizontalOptions="Start" VerticalOptions="Center" />
               
            </StackLayout>
            
            <StackLayout Orientation="Vertical" Margin="0,20" HorizontalOptions="Center" VerticalOptions="Center">
                <StackLayout Orientation="Horizontal" HorizontalOptions="Center">
                    <!--<Image Source="weather.png" WidthRequest="50" HeightRequest="50" VerticalOptions="Center"/>-->
                    <Label Text="GHC" TextColor="White" FontSize="20" VerticalOptions="Center"/>
                    <Label Text="0.00" x:Name="totalAmount" TextColor="White" FontSize="70" FontAttributes="Bold" VerticalOptions="Center"/>
                    
                </StackLayout>
                <Label Text="Total Expenses" TextColor="White" FontSize="25" HorizontalOptions="Center"/>
                <Label x:Name="currentTime" Text="June 15, 09:03 AM" TextColor="White" FontSize="12" HorizontalOptions="Center"/>
            </StackLayout>
            <Grid HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand">
                <Grid.ColumnDefinitions>
                   
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <StackLayout Orientation="Vertical" Spacing="10" HorizontalOptions="CenterAndExpand">
                <Button HorizontalOptions="Center" VerticalOptions="Center" Clicked="btnPopupAddExpense" Text="Add Expense"></Button>
                </StackLayout>
                <StackLayout Grid.Column="2" Orientation="Vertical" Spacing="10" HorizontalOptions="CenterAndExpand">
                    <Button HorizontalOptions="Center" VerticalOptions="Center" Clicked="btnPopupAddCategory" Text="Add Catergory"></Button>
                </StackLayout>

            </Grid>
            <Frame Grid.Row="1" HasShadow="True" CornerRadius="10" Margin="20,-40,20,0" Padding="0" HeightRequest="120" VerticalOptions="Start">
                <Grid HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <StackLayout Orientation="Vertical" Spacing="10" HorizontalOptions="CenterAndExpand">
                        <Image Source="humidity.png" HeightRequest="25" HorizontalOptions="Center"/>
                        <StackLayout Spacing="7" HorizontalOptions="CenterAndExpand">
                            <Label Text="50%" TextColor="Black" FontSize="14" FontAttributes="Bold" HorizontalOptions="Center"/>
                            <Label Text="Humidity" TextColor="#7D7D7D" FontSize="11" HorizontalOptions="Center"/>
                        </StackLayout>
                    </StackLayout>
                    <StackLayout Grid.Column="1" Orientation="Vertical" Spacing="10" HorizontalOptions="CenterAndExpand">
                        <Image Source="wind.png" HeightRequest="25" HorizontalOptions="Center"/>
                        <StackLayout Spacing="7" HorizontalOptions="CenterAndExpand">
                            <Label Text="2.6 m/s" TextColor="Black" FontSize="14" FontAttributes="Bold" HorizontalOptions="Center"/>
                            <Label Text="Wind" TextColor="#7D7D7D" FontSize="11" HorizontalOptions="Center"/>
                        </StackLayout>
                    </StackLayout>
                    <StackLayout Grid.Column="2" Orientation="Vertical" Spacing="10" HorizontalOptions="CenterAndExpand">
                        <Image Source="pressure.png" HeightRequest="25" HorizontalOptions="Center"/>
                        <StackLayout Spacing="7" HorizontalOptions="CenterAndExpand">
                            <Label Text="1011 hpa" TextColor="Black" FontSize="14" FontAttributes="Bold" HorizontalOptions="Center"/>
                            <Label Text="Pressure" TextColor="#7D7D7D" FontSize="11" HorizontalOptions="Center"/>
                        </StackLayout>
                    </StackLayout>
                    <StackLayout Grid.Column="3" Orientation="Vertical" Spacing="10" HorizontalOptions="CenterAndExpand">
                        <Image Source="cloudiness.png" HeightRequest="25" HorizontalOptions="Center"/>
                        <StackLayout Spacing="7" HorizontalOptions="CenterAndExpand">
                            <Label Text="24%" TextColor="Black" FontSize="14" FontAttributes="Bold" HorizontalOptions="Center"/>
                            <Label Text="Cloudiness" TextColor="#7D7D7D" FontSize="11" HorizontalOptions="Center"/>
                        </StackLayout>
                    </StackLayout>
                </Grid>
                
            </Frame>
            <StackLayout Grid.Row="2" BackgroundColor="Transparent" Orientation="Horizontal" Margin="20" HorizontalOptions="End">
                <ImageButton x:Name="ListBtn" Source="listColor.png" WidthRequest="15" HeightRequest="15" />
                <ImageButton x:Name="GridBtn" Source="grid.png" WidthRequest="15" HeightRequest="15"/>
            </StackLayout>
            <!--Popup Area Add Expense-->
            
            <ContentView x:Name="popupLoginView" BackgroundColor="#C0808080" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
                <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
                    <StackLayout Orientation="Vertical" HeightRequest="250" WidthRequest="300" BackgroundColor="White">
                        <Entry x:Name="amt" Keyboard="Numeric"  Margin="20,20,20,10" Placeholder="Amount"></Entry>
                        <Label  Margin="20,0,20,0"  x:Name="AmountError" TextColor="Red" IsVisible="false"/>
                        <Entry x:Name="narration"  Margin="20,0,20,0" Placeholder="Narration"></Entry>
                        <Label  Margin="20,0,20,0"  x:Name="NarationError" TextColor="Red" IsVisible="false"/>
                        <Picker  Margin="20,0,20,0" ItemDisplayBinding="{Binding name}" x:Name="CategoryEntry" Title="Select Category"></Picker>
                        <Label  Margin="20,0,20,0"  x:Name="CategoryError" TextColor="Red" IsVisible="false"/>
                        <Button Margin="20,0,20,0"  Text="Add Expense" Clicked="BtnAddExpense"/>
                    </StackLayout>
                </StackLayout>
            </ContentView>
            <!--End Popup -->


            <!--Popup Area Add Expense-->

            <ContentView x:Name="popupCategoryView" BackgroundColor="#C0808080" Padding="30, 20" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
                <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
                    <StackLayout Orientation="Vertical" Padding="0, 40" HeightRequest="100" WidthRequest="300" BackgroundColor="White">
                        
                        <Entry x:Name="name"  Margin="20,0,20,0" Placeholder="Name"></Entry>
                        <Label  Margin="20,0,20,0"  x:Name="CategoryNameError" TextColor="Red" IsVisible="false"/>
                        <Button Margin="20,0,20,0" BackgroundColor="Purple" TextColor="White"  Text="Add Category" Clicked="BtnAddCategory"/>
                    </StackLayout>
                </StackLayout>
            </ContentView>
            <!--End Popup -->

            <ListView x:Name="AllExpense" ItemsSource="{Binding Weathers}"  SeparatorVisibility="None"
                  Grid.Row="3" Margin="20,0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                <ListView.ItemTemplate>
                    <DataTemplate >
                        <ViewCell>
                            <Frame BackgroundColor="White" BorderColor="#F0F0F0" Padding="5" Margin="0,0,0,5" HasShadow="False">
                                <Grid HeightRequest="70" HorizontalOptions="FillAndExpand" VerticalOptions="Start">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Label Text="{Binding narration}" TextColor="#757575" FontSize="12" VerticalOptions="Center" Margin="20,0"/>
                                    <Image Grid.Column="1" Source="{Binding Icon}" WidthRequest="38" HeightRequest="38" HorizontalOptions="Center" VerticalOptions="Center"/>
                                    <StackLayout Grid.Column="2" Orientation="Horizontal" Margin="20,0" HorizontalOptions="End" VerticalOptions="Center">
                                        <Label Text="Ghc" TextColor="Black" FontSize="12" VerticalOptions="Center"/>
                                        <Label Text="{Binding amount}" TextColor="Black" FontSize="20" FontAttributes="Bold" VerticalOptions="Center"/>
                                        
                                    </StackLayout>
                                </Grid>
                            </Frame>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>
    </ContentPage.Content>
    
</ContentPage>