Click here to Skip to main content
15,896,606 members
Articles / Mobile Apps / Windows Phone 7

Weekly Thai Recipe! for Windows Phone

Rate me:
Please Sign up or sign in to vote.
4.92/5 (37 votes)
6 Jul 2012CPOL12 min read 80.2K   1.8K   82  
A complete WP7 application with a central management website (ASP.NET MVC4) for recipe management and push notifications
<phone:PhoneApplicationPage 
    x:Class="WeeklyThaiRecipe.Views.RecipeDetailView2"
    Style="{StaticResource DefaultPage}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    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"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:my="clr-namespace:Microsoft.Advertising.Mobile.UI;assembly=Microsoft.Advertising.Mobile.UI"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    DataContext="{Binding Source={StaticResource ViewModelLocator}, Path=RecipeDetailViewModel}"
    shell:SystemTray.IsVisible="True">

    <phone:PhoneApplicationPage.Resources>
        <DataTemplate x:Key="IngredientDataTemplate">
            <StackPanel Orientation="Horizontal">
                <TextBlock HorizontalAlignment="Left" Margin="10,0,0,0" TextWrapping="Wrap" Text="•" VerticalAlignment="Center"/>
                <TextBlock HorizontalAlignment="Left" Margin="10,6" TextWrapping="Wrap" Text="{Binding Mode=OneWay}" VerticalAlignment="Center" Width="325"/>
            </StackPanel>
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="80"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="WEEKLY THAI RECIPE" Style="{StaticResource PhoneTextNormalStyle}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ScrollViewer BorderThickness="0" Margin="12,0,0,12">
                <StackPanel Orientation="Vertical">
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding RecipeViewModel.ImageSource}" Width="196" Height="196" VerticalAlignment="Top" HorizontalAlignment="Left" />
                        <TextBlock Text="{Binding RecipeViewModel.Model.Title}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" Margin="7,0,12,5" FontSize="40" FontFamily="Segoe WP Light" Foreground="{StaticResource PhoneForegroundBrush}" VerticalAlignment="Top" HorizontalAlignment="Left" Width="205"/>
                    </StackPanel>
                    <TextBlock Text="Ingredients" FontSize="48" />
                    <ListBox x:Name="Ingedrients" ItemsSource="{Binding RecipeViewModel.Model.Ingredients}" ItemTemplate="{StaticResource IngredientDataTemplate}"  toolkit:TiltEffect.IsTiltEnabled="True" ScrollViewer.VerticalScrollBarVisibility="Disabled"/>
                    <TextBlock Text="Directions" FontSize="48" />
                    <TextBlock Text="{Binding RecipeViewModel.Model.Directions}" TextWrapping="Wrap" />
                </StackPanel>
            </ScrollViewer>
        </Grid>
        <Grid x:Name="AdvertisementRow" Grid.Row="2">
            <my:AdControl AdUnitId="Your ad unit id" ApplicationId="Your application Id" Height="80" HorizontalAlignment="Left" Margin="0,-6,0,0" Name="adControl1" VerticalAlignment="Top" Width="480" />
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect http://www.simpletechture.nl
Netherlands Netherlands
Patrick Kalkman is a senior Software Architect with more than 20 years professional development experience. He works for SimpleTechture where he helps teams develop state of the art web applications.

Patrick enjoys writing his blog. It discusses agile software development. Patrick can be reached at patrick@simpletechture.nl.

Published Windows 8 apps:


Published Windows Phone apps:


Awards:

Best Mobile article of March 2012
Best Mobile article of June 2012

Comments and Discussions