Master Detail

Xamstrap include easy to use master detail page. As show in Quick Start first of all add master-detail page. Master content and detail content is filled in <Control:ResponsiveMasterDetailCheck.MasterContent></Control:ResponsiveMasterDetailCheck.MasterContent> and <Control:ResponsiveMasterDetailCheck.DetailContent></Control:ResponsiveMasterDetailCheck.DetailContent> tag respectively. Check out below sample code to know how to use master detail, where list of email is filled in master content and based on the selected email detail content will be changed.

Properties

Name	Use
IsMasterVisible	Used to control the visibility of master.

Sample Code

<Control:ResponsiveMasterDetail x:Name="masterDetail" BackgroundColor="White" Title="Primary" IsMasterVisible="{Binding IsMasterVisible, Mode=TwoWay}">

    <!--Master Header-->
    <Control:ResponsiveMasterDetail.MasterHeader>
        <Grid WidthRequest="400">
            <Label Text="Master Header" HorizontalOptions="Center" VerticalOptions="Center" FontSize="Medium" TextColor="Black"></Label>
        </Grid>
    </Control:ResponsiveMasterDetail.MasterHeader>

    <!--detail Header-->
    <Control:ResponsiveMasterDetail.DetailHeader>
        <Grid>
            <Label Text="Detail Header" HorizontalOptions="Center" VerticalOptions="Center" FontSize="Medium" TextColor="Black"></Label>
        </Grid>
    </Control:ResponsiveMasterDetail.DetailHeader>

    <!--Master Content-->
    <Control:ResponsiveMasterDetail.MasterContent>
        <StackLayout Orientation="Vertical">
            <ListView x:Name="CustomerList" ItemsSource="{Binding Emails}" HorizontalOptions="StartAndExpand" SeparatorVisibility="None"
                        SelectedItem="{Binding SelectedEmail, Mode=TwoWay}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Padding="10,0,10,0" Margin="0">
                            <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Label Text="{Binding .}"  TextColor="Black" Margin="0" VerticalOptions="Center" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
           </ListView>
       </StackLayout>
    </Control:ResponsiveMasterDetail.MasterContent>

    <!--Detail Content-->
    <Control:ResponsiveMasterDetail.DetailContent>
        <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
            <Label Text="{Binding SelectedEmail,StringFormat='Selected Email: {0}'}" HorizontalOptions="Center" VerticalOptions="Center"></Label>
        </StackLayout>
    </Control:ResponsiveMasterDetail.DetailContent>
</Control:ResponsiveMasterDetail>

Sample Data

public class MasterDetailData : INotifyPropertyChanged
{
    #region Properties
    public event PropertyChangedEventHandler PropertyChanged;

    private string _selectedEmail;

    public string SelectedEmail
    {
        get { return _selectedEmail; }
        set
        {
            
            SetProperty(ref _selectedEmail, value);
            IsMasterVisible = false;                
        }
    }

    private bool _isMasterVisible;

    public bool IsMasterVisible
    {
        get { return _isMasterVisible; }
        set
        {
            SetProperty(ref _isMasterVisible, value);
        }
    }

    #endregion
    public MasterDetailData()
    {
        SelectedEmail ="No email selected yet!!";
        Emails = new List<string>() {
            "a@b.com","b@c.com","c@d.com","d@e.com","e@f.com",
            "f@g.com","g@h.com","h@i.com","i@j.com","j@k.com",
            "k@l.com","l@m.com","m@n.com","n@o.com","o@p.com"
        };
    }
    public List<String> Emails { get; set; }

    #region Private Methods
    protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
    {
        if (Object.Equals(storage, value))
            return false;

        storage = value;
        OnPropertyChanged(propertyName);
        return true;
    }

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
    #endregion
}  

Output Screenshots

Extra Small(xs) screen size

Small(sm) screen size

For all other screen sizes