How to replace detail pane with specific pages in MasterDetailsView on master item click

Question

Whenever the user clicks an item in the Master pane, how can I show a specific page in the details pane? I created a Frame in the Details pane for easier & efficient page loading, but I don't know if it is more efficient to do this from a click event or specify the page names in the item class and read the value from there.

Destination pages: Page A, Page B, Page C, Page D

MainPage.xaml

https://pastebin.com/rYZd3zHp

MainPage.xaml.cs

public sealed partial class MainPage : Page  
    {  
        public List<Email> Emails { get; set; }  
        public MainPage()  
        {  
            this.InitializeComponent();  
            this.DataContext = this;  
            Emails = MyEmailManager.GetEmails();  
        }  
        public ICommand OpenDialog  
        {  
            get  
            {  
                return new CommadEventHandler<Email>((s) => OpenDialogCommandFun(s));  
            }  
        }  
        private async void OpenDialogCommandFun(Email s)  
        {  
            ContentDialog dialogServiceUpdates = new ContentDialog  
            {  
                Title = s.From,  
                Content = s.Body,  
                CloseButtonText = "OK"  
            };  
  
            ContentDialogResult result = await dialogServiceUpdates.ShowAsync();  
        }  
        private void MoreBtn_Click(object sender, RoutedEventArgs e)  
        {  
  
        }  
    }  
  
    public class Email  
    {  
        public string From { get; set; }  
        public string Body { get; set; }  
        public bool ShowButton { get; set; }  
    }  
  
    public class MyEmailManager  
    {  
        public static List<Email> GetEmails()  
        {  
            var MyEmails = new List<Email>  
        {  
            new Email  
            {  
                From = "Steve Johnson",  
                Body = "Are you available for lunch tomorrow? A client would like to discuss a project with you.",  
                ShowButton = true  
            },  
            new Email  
            {  
                From = "Pete Davidson",  
                Body = "Don't forget the kids have their soccer game this Friday. We have to supply end of game snacks.",  
                ShowButton = false  
            },  
            new Email  
            {  
                From = "OneDrive",  
                Body = "Your new album.\r\nYou uploaded some photos to your OneDrive and automatically created an album for you.",  
                ShowButton = false  
            },  
            new Email  
            {  
                From = "Twitter",  
                Body = "Here are some people we think you might like to follow:\r\n.@randomPerson\r\nAPersonYouMightKnow",  
                ShowButton = true  
            }  
        };  
  
            return MyEmails;  
        }  
    }  
  
    public class CommadEventHandler<T> : ICommand  
    {  
        public event EventHandler CanExecuteChanged;  
  
        public Action<T> action;  
        public bool CanExecute(object parameter)  
        {  
            return true;  
        }  
  
        public void Execute(object parameter)  
        {  
            this.action((T)parameter);  
        }  
        public CommadEventHandler(Action<T> action)  
        {  
            this.action = action;  
  
        }  
    }  

Answer 1

Frame has SourcePageType property that use to bind the specific page type in mvvm model. So you could insert Frame into DetailsTemplate. And binding with model From property then use converter to return the matched page type.

Example Code.

Converter

public class PageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        Type page = null;
        switch (value as string)
        {
            case "Steve Johnson":
                page = typeof(FistPage);
                break;
            case "Pete Davidson":
                page = typeof(SecondPage);
                break;
            case "OneDrive":
                page = typeof(FistPage);
                break;
            case "Twitter":
                page = typeof(SecondPage);
                break;
            default:
                break;
        }

        return page;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

And here is code sample

Thanks
Nico Zhu