Getting Started with Windows Phone 8 Programming

Our Project – Windows Phone Panorama App

I have chosen this template as it is the nicest (in my opinion) to play around with. Our project is very basic and will contain very little code, if any, as this article’s purpose is just to get you started. Let us have a look at the design.

Design

Right, you know which project template to choose, so give it a proper name. I gave mine a name of Family. This little app will have photo’s of my wife, daughter, two dogs and myself. Think of a scrapbook, but just on your phone.

Once the project has been created, you will be greeted with the design window. Be careful here as the design window (specific for this type of app) is a bit difficult to know where you are. The default Panorama screen will be divided into three sections (screens). The first screen will be the main screen, whereas the other two screens (functions as one) will be a bit hidden from view. You will have to click on the desired screen’s outline in order to manipulate it. I have designed my three screens as follows:

Figure 2 – Screen 1

Figure 3 – Screen 2

Figure 4 – Screen 3

Code

You could go through the painstaking process of manually adding all your photos, or you could just simply add them in manually inside the XAML code window. The code that produces the above look is as follows:

<phone:PhoneApplicationPage
    x_Class="Family.MainPage"
    
    xmlns_x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns_phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns_shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns_d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns_mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc_Ignorable="d"
    d_DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x_Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="129*"/>
            <RowDefinition Height="71*"/>
        </Grid.RowDefinitions>

        <!-- LOCALIZATION NOTE:
            To localize the displayed strings copy their values to appropriately named
            keys in the app's neutral language resource file (AppResources.resx) then
            replace the hard-coded text value between the attributes' quotation marks
            with the binding clause whose path points to that string name.

            For example:

                Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"

            This binding points to the template's string resource named "ApplicationTitle".

            Adding supported languages in the Project Properties tab will create a
            new resx file per language that can carry the translated values of your
            UI strings. The binding in these examples will cause the value of the
            attributes to be drawn from the .resx file that matches the
            CurrentUICulture of the app at run time.
         -->

      <!--Panorama control-->
        <phone:Panorama Title="Family and Friends" Grid.RowSpan="2">
            <phone:Panorama.Background>
                <ImageBrush ImageSource="/Family;component/Assets/PanoramaBackground.png"/>
            </phone:Panorama.Background>

            <!--Panorama item one-->
            <phone:PanoramaItem Header="Close Family" Background="Black">
                <!--Single line list with text wrapping-->
                <phone:LongListSelector Margin="0,0,-22,0" ItemsSource="{Binding Items}" Foreground="#FF151414">
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Margin="0,-6,0,12">
                                <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Foreground="#FF131313"/>
                            </StackPanel>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>
            </phone:PanoramaItem>

            <!--Panorama item two-->
            <phone:PanoramaItem>
                <!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content-->
                <phone:LongListSelector Margin="0,-38,-22,2" ItemsSource="{Binding Items}">
                    <phone:LongListSelector.ListHeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="12,0,0,38">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <TextBlock Text="Details"
                                           Style="{StaticResource PanoramaItemHeaderTextStyle}"
                                           Grid.Row="0" Foreground="#FF151313"/>
                            </Grid>
                        </DataTemplate>
                    </phone:LongListSelector.ListHeaderTemplate>
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="105" Width="432">
                                <!--Replace rectangle with image-->
                                <Image Source="/Family;component/Assets/IMG_0010.JPG" Width="99" Height="99" />

                                <StackPanel Width="311" Margin="8,-7,0,0">
                                    <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" Foreground="#FF171515" />
                                    <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource PhoneTextSubtleStyle}" />
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>
            </phone:PanoramaItem>

            <!--Panorama item three-->
            <phone:PanoramaItem Header="pics" Orientation="Horizontal" Background="Black">
                <!--Double wide Panorama with large image placeholders-->
                <Grid>
                    <StackPanel Margin="0,4,16,0" Orientation="Vertical" VerticalAlignment="Top">
                        <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
                            <Image Source="/Family;component/Assets/IMG_0078.JPG" Height="173" Width="173" Margin="12,0,0,0"/>
                            <Image Source="/Family;component/Assets/IMG_0097.JPG" Height="173" Width="173" Margin="12,0,0,0"/>
                            <Image Source="/Family;component/Assets/20130330_114659.jpg" Height="173" Width="173" Margin="12,0,0,0"/>
                            <Image Source="/Family;component/Assets/20130621_165858.jpg" Height="173" Width="173" Margin="12,0,0,0"/>

                        </StackPanel>

                    </StackPanel>
                </Grid>
            </phone:PanoramaItem>
        </phone:Panorama>

        <!--Uncomment to see an alignment grid to help ensure your controls are
            aligned on common boundaries.  The image has a top margin of -32px to
            account for the System Tray. Set this to 0 (or remove the margin altogether)
            if the System Tray is hidden.

            Before shipping remove this XAML and the image itself.-->
        <!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0" Grid.Row="0" IsHitTestVisible="False" />-->

    </Grid>
</phone:PhoneApplicationPage>

You can now add any code in your VB file to make it more interactive. I will leave that part up to you.

Conclusion

I hope that you have learned how to get started with Windows Phone 8 programming and wish you much joy in your future endeavours. Until next time, this is me signing off.