test.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:InstitutionConnect;assembly=InstitutionConnect"
             xmlns:converters="clr-namespace:InstitutionConnect.Converters"
             xmlns:oxy="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms"
             x:Class="InstitutionConnect.Layouts.PaymentDashboardPage">

    <ContentPage.Resources>
        <ResourceDictionary>
            <converters:PieChartConverter x:Key="pieChartConverter" />
            <converters:PastDueConverter x:Key="pastDueConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout BackgroundColor="White">
        <ScrollView>
            <StackLayout>

                <StackLayout.Padding>
                    <OnPlatform x:TypeArguments="Thickness"
                                Android="10, 20, 10, 10"
                                iOS="10, 40, 10, 10"
                                WinPhone="10, 20, 10, 10"/>
                </StackLayout.Padding>
                
                <RelativeLayout 
                    x:Name="piePlease"
                    BindingContext="{Binding .}"
                    Padding="0,12, 3, 12"
                    HeightRequest="186"
                    WidthRequest="226"
                    HorizontalOptions="Fill"
                    VerticalOptions="Start">

                    <oxy:PlotView
                        x:Name="pieView"
                        BackgroundColor="Transparent" 
                        Model="{Binding PieChartModel, Mode=OneWay, Converter={StaticResource pieChartConverter}}" />
                    <Label 
                        FontSize="Micro" 
                        Text="Starting Balance"
                        HorizontalTextAlignment="Center"
                        VerticalTextAlignment="Center"
                        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pieView, Property=Width, Factor=0}"
                        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pieView, Property=Height, Factor=-0.1}"
                        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pieView, Property=Width, Factor=1}"
                        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pieView, Property=Height, Factor=1}"
                        />

                    <Label 
                        FontSize="12"
                        Text="{Binding StartingBalance, Mode=OneWay, StringFormat='${0:N}'}"
                        TextColor="Black"
                        HorizontalTextAlignment="Center"
                        VerticalTextAlignment="Center"
                        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pieView, Property=Width, Factor=0}"
                        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pieView, Property=Height, Factor=-0.04}"
                        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pieView, Property=Width, Factor=1}"
                        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pieView, Property=Height, Factor=1}"
                        />

                    <Label 
                        x:Name="currentBalance"
                        FontSize="Micro" 
                        Text="Current Balance"
                        HorizontalTextAlignment="Center"
                        VerticalTextAlignment="Center"
                        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pieView, Property=Width, Factor=0}"
                        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pieView, Property=Height, Factor=0.05}"
                        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pieView, Property=Width, Factor=1}"
                        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pieView, Property=Height, Factor=1}"
                        />

                    <Label 
                        FontSize="12"
                        Text="{Binding CurrentBalance, Mode=OneWay, StringFormat='${0:N}'}"
                        TextColor="Black"
                        HorizontalTextAlignment="Center"
                        VerticalTextAlignment="Center"
                        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=currentBalance, Property=Width, Factor=0}"
                        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=currentBalance, Property=Height, Factor=0.11}"
                        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=currentBalance, Property=Width, Factor=1}"
                        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=currentBalance, Property=Height, Factor=1}"
                        />

                    <!--RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pieView, Property=X, Factor=1,Constant=5}"-->
                </RelativeLayout>



                <Label 
                    Text="Upcoming Payments" 
                    TextColor="#4990e2" 
                    Margin="7,12"
                    FontSize="Large" 
                    HorizontalOptions="Start"
                    />

                <ListView 
                    x:Name="paymentsList"
                    ItemsSource="{Binding Payments, Mode=OneWay}"
                    CachingStrategy="RecycleElement"
                    ItemSelected="PaymentsList_ItemSelected"
                    Margin="0, 15"
                    
                    WidthRequest="453"
                    HorizontalOptions="Center"
                    >

                    <ListView.Header>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="2*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="40" />
                            
                            </Grid.RowDefinitions>
                            <Label Grid.Column="0" Grid.Row="0" Text="Date" HorizontalOptions="Center" FontAttributes="Bold" />
                            <Label Grid.Column="1" Grid.Row="0" Text="Description" HorizontalOptions="Center" FontAttributes="Bold" />
                            <Label Grid.Column="2" Grid.Row="0" Text="Amount in $" HorizontalOptions="End" FontAttributes="Bold" />
                        </Grid>
                    </ListView.Header>

                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell Height="40">
                                <Grid BackgroundColor="{Binding IsPastDue, Mode=OneWay, Converter={StaticResource pastDueConverter}}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="2*" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>

                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />

                                    </Grid.RowDefinitions>

                                    <Label Grid.Column="0" Grid.Row="0" Text="{Binding DueDate, StringFormat='{0:M/d/yy}'}" TextColor="Black" HorizontalOptions="Center" />
                                    <Label Grid.Column="1" Grid.Row="0" Text="{Binding Description}" TextColor="Black" HorizontalOptions="Center" />
                                    <Label Grid.Column="2" Grid.Row="0" Text="{Binding Amount, StringFormat='${0:N}'}" TextColor="Black" HorizontalOptions="End"/>
                                </Grid>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>


            </StackLayout>

        </ScrollView>
        <Button x:Name="payButton" IsVisible="True" Text="Test" BackgroundColor="Green" TextColor="White" Clicked="PayButton_Clicked" WidthRequest="348" HeightRequest="62" Margin="38, 11" />


    </StackLayout>

</ContentView>