6
\$\begingroup\$

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

<Grid Background="Transparent">
    <ScrollViewer Style="{StaticResource DataPage}">
        <StackPanel>
            <TextBlock>
                Some text here:
                <LineBreak/>
            </TextBlock>
            <Viewbox MaxHeight="112">
                <Border BorderBrush="Black" BorderThickness="1">
                    <Image Source="MyImage.png"/>
                </Border>
            </Viewbox>
        </StackPanel>
    </ScrollViewer>
</Grid>

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<Type> 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:

enter image description here

\$\endgroup\$
6
\$\begingroup\$

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

            <Border BorderBrush="Black" BorderThickness="1">
                <Image Source="MyImage.png"/>
            </Border>

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.

\$\endgroup\$
  • \$\begingroup\$ There's not enough context in the OP to really address this... \$\endgroup\$ – Mathieu Guindon Jan 26 '15 at 16:28
  • \$\begingroup\$ Can you include the VM class? \$\endgroup\$ – Mathieu Guindon Jan 26 '15 at 16:33
  • \$\begingroup\$ A VM shouldn't be tied to a specific view - that's the whole beauty of it ;) \$\endgroup\$ – Mathieu Guindon Jan 26 '15 at 16:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy