XAML Markup Improvements

I have a Windows Store and Windows Phone app, and in this app I have many pages like this:





Some text here:












These pages are loaded into a Frame to be displayed when needed. Now, however, I have many pages, and I was wondering if there is a better way to do this. I have been doing it like this so far because easy to make the page content dynamically reload to fit the screen/app size the best with VisualStates and because it is easy to use XAML markup to style my text, image borders (not always there), and layout perfectly, and any solution provided must support everything this does and work in both Windows Store and Phone apps.

Just for reference, this is the C# that loads this page into the frame:

DataFrame.Navigate(Data.Pages[Items.SelectedIndex]);


DataFrame is the Frame, obviously; Data.Pages is an ObservableCollection in my ViewModel (Data is an instance of the VM class); Items is the ListBox that contains the selectable options.

This image shows the context of what I am doing, with the content in one of these pages outlined in black:

There isn't much to say about the markup here - it looks like much was stripped from the markup. One thing though:

I wouldn't hard-code paths into the XAML like this; instead, bind to an ImageSource property on your ViewModel. If/when that image needs to change, you'd certainly rather modify C# code than dig up the path in the XAML markup.

StackExchange Code Review Q#74887, answer score: 6