Click here to Skip to main content
11,642,381 members (65,747 online)
Click here to Skip to main content
Add your own
alternative version

Expression Blend 4 for Windows Phone

, 31 May 2010 CPOL 24.4K 722 22
An important thing in Blend for Windows Phone is that it is pretty much the same as in Silverlight with Blend. All the features work in the same way...
WindowsPhoneApplication1.zip
WindowsPhoneApplication1
WindowsPhoneApplication1.suo
WindowsPhoneApplication1
ApplicationIcon.png
Background.png
Bin
Debug
ApplicationIcon.png
Background.png
de
Microsoft.Expression.Interactions.resources.dll
System.Windows.Interactivity.resources.dll
en
Microsoft.Expression.Interactions.resources.dll
System.Windows.Interactivity.resources.dll
es
Microsoft.Expression.Interactions.resources.dll
System.Windows.Interactivity.resources.dll
fr
Microsoft.Expression.Interactions.resources.dll
System.Windows.Interactivity.resources.dll
it
Microsoft.Expression.Interactions.resources.dll
System.Windows.Interactivity.resources.dll
ja
Microsoft.Expression.Interactions.resources.dll
System.Windows.Interactivity.resources.dll
ko
Microsoft.Expression.Interactions.resources.dll
System.Windows.Interactivity.resources.dll
Microsoft.Expression.Interactions.dll
System.Windows.Interactivity.dll
WindowsPhoneApplication1.dll
WindowsPhoneApplication1.xap
zh-Hans
Microsoft.Expression.Interactions.resources.dll
System.Windows.Interactivity.resources.dll
zh-Hant
Microsoft.Expression.Interactions.resources.dll
System.Windows.Interactivity.resources.dll
Properties
SampleData
AwardSampleDataSource
ViewModels
<phoneNavigation:PhoneApplicationPage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone.Shell"
    xmlns:mpc="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" 
    x:Class="WindowsPhoneApplication1.MainPage"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800" 
    d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
    >
    
    <!--Page transition animation-->
    <phoneNavigation:PhoneApplicationPage.Resources>
    	<Storyboard x:Name="ResetPageTransitionList">
    		<DoubleAnimationUsingKeyFrames Storyboard.TargetName="TitleGrid" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
    			<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    		</DoubleAnimationUsingKeyFrames>
    		<DoubleAnimationUsingKeyFrames Storyboard.TargetName="TitleGrid" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationX)">
    			<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    		</DoubleAnimationUsingKeyFrames>
    		<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
    			<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    		</DoubleAnimationUsingKeyFrames>
    		<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationX)">
    			<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    		</DoubleAnimationUsingKeyFrames>
    	</Storyboard>
    	<Storyboard x:Name="PageTransitionList">
    		<DoubleAnimationUsingKeyFrames Storyboard.TargetName="TitleGrid" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
    			<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    			<EasingDoubleKeyFrame KeyTime="00:00:00.3" Value="90">
    				<EasingDoubleKeyFrame.EasingFunction>
    					<CircleEase EasingMode="EaseIn"/>
    				</EasingDoubleKeyFrame.EasingFunction>
    			</EasingDoubleKeyFrame>
    		</DoubleAnimationUsingKeyFrames>
    		<DoubleAnimationUsingKeyFrames Storyboard.TargetName="TitleGrid" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationX)">
    			<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    			<EasingDoubleKeyFrame KeyTime="00:00:00.3" Value="0">
    				<EasingDoubleKeyFrame.EasingFunction>
    					<CircleEase EasingMode="EaseIn"/>
    				</EasingDoubleKeyFrame.EasingFunction>
    			</EasingDoubleKeyFrame>
    		</DoubleAnimationUsingKeyFrames>
    		<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
    			<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    			<EasingDoubleKeyFrame KeyTime="00:00:00.3" Value="90">
    				<EasingDoubleKeyFrame.EasingFunction>
    					<CircleEase EasingMode="EaseIn"/>
    				</EasingDoubleKeyFrame.EasingFunction>
    			</EasingDoubleKeyFrame>
    		</DoubleAnimationUsingKeyFrames>
    		<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationX)">
    			<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    			<EasingDoubleKeyFrame KeyTime="00:00:00.3" Value="0">
    				<EasingDoubleKeyFrame.EasingFunction>
    					<CircleEase EasingMode="EaseIn"/>
    				</EasingDoubleKeyFrame.EasingFunction>
    			</EasingDoubleKeyFrame>
    		</DoubleAnimationUsingKeyFrames>
    	</Storyboard>
    	<DataTemplate x:Key="infoTemplate">
    		<StackPanel>
    			<TextBlock Text="{Binding award}"/>
    			<TextBlock Text="{Binding awardDate}"/>
    			<TextBlock Text="{Binding coe}"/>
    			<TextBlock Text="{Binding description}"/>
    			<TextBlock Text="{Binding imageurl}"/>
    			<TextBlock Text="{Binding name}"/>
    			<TextBlock Text="{Binding presenter}"/>
    			<TextBlock Text="{Binding title}"/>
    		</StackPanel>
    	</DataTemplate>
    	<DataTemplate x:Key="infoTemplate1">
    		<StackPanel>
    			<TextBlock Text="{Binding award}"/>
    			<TextBlock Text="{Binding awardDate}"/>
    			<TextBlock Text="{Binding coe}"/>
    			<TextBlock Text="{Binding description}"/>
    			<TextBlock Text="{Binding imageurl}"/>
    			<TextBlock Text="{Binding name}"/>
    			<TextBlock Text="{Binding presenter}"/>
    			<TextBlock Text="{Binding title}"/>
    		</StackPanel>
    	</DataTemplate>
    	<DataTemplate x:Key="infoTemplate2">
    		<StackPanel>
    			<Grid >
    				<Grid.RowDefinitions>
    					<RowDefinition Height="Auto"/>
    					<RowDefinition Height="Auto"/>
    					<RowDefinition Height="Auto"/>
    					<RowDefinition Height="Auto"/>
    					<RowDefinition Height="Auto"/>
    				</Grid.RowDefinitions>
    				<Grid.ColumnDefinitions>
    					<ColumnDefinition Width="78"/>
    					<ColumnDefinition Width="*"/>
    				</Grid.ColumnDefinitions>
    				<Border Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" BorderThickness="0.25" Margin="2">
    					<StackPanel Orientation="Vertical">

    						<Image Source="{Binding imageurl}" Width="78" Height="78"  Stretch="Fill" 
    							HorizontalAlignment="Left" Margin="0,0,0,0" />
    					</StackPanel>
    				</Border>
    				<StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Margin="15,5,5,5" VerticalAlignment="Center" HorizontalAlignment="Left">
    					<TextBlock TextAlignment="Left" Text="{Binding name}"  TextWrapping="Wrap" Height="25" Margin="0" Width="500" />
    					<TextBlock Text="{Binding title}" TextWrapping="Wrap" Height="42" Margin="0,5,0,0" FontSize="18.667" Style="{StaticResource PhoneTextNormalStyle}" Width="500"/>
    				</StackPanel>
    			</Grid>
    		</StackPanel>
    	</DataTemplate>
    	<DataTemplate x:Key="infoTemplate3">
    		<StackPanel>
    			<TextBlock Text="{Binding description}"/>
    			<TextBlock Text="{Binding name}"/>
    			<TextBlock Text="{Binding presenter}"/>
    			<TextBlock Text="{Binding title}"/>
    		</StackPanel>
    	</DataTemplate>
    </phoneNavigation:PhoneApplicationPage.Resources>

	<phoneNavigation:PhoneApplicationPage.FontFamily>
		<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
	</phoneNavigation:PhoneApplicationPage.FontFamily>
	<phoneNavigation:PhoneApplicationPage.FontSize>
		<StaticResource ResourceKey="PhoneFontSizeNormal"/>
	</phoneNavigation:PhoneApplicationPage.FontSize>
	<phoneNavigation:PhoneApplicationPage.Foreground>
		<StaticResource ResourceKey="PhoneForegroundBrush"/>
	</phoneNavigation:PhoneApplicationPage.Foreground>

    <!--Data context is set to sample data above-->
    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}" DataContext="{Binding Source={StaticResource AwardSampleDataSource}}">
    	<VisualStateManager.VisualStateGroups>
    		<VisualStateGroup x:Name="VisualStateGroup">
    			<VisualStateGroup.Transitions>
    				<VisualTransition GeneratedDuration="0:0:1"/>
    			</VisualStateGroup.Transitions>
    			<VisualState x:Name="List">
    				<Storyboard>
    					<PointAnimation Duration="0" To="0.5,0.5" Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="listBox" d:IsOptimized="True"/>
    					<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="listBox" d:IsOptimized="True"/>
    					<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="listBox" d:IsOptimized="True"/>
    					<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationY)" Storyboard.TargetName="listBox" d:IsOptimized="True"/>
    					<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="listBox" d:IsOptimized="True"/>
    					<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="listBox" d:IsOptimized="True"/>
    				</Storyboard>
    			</VisualState>
    			<VisualState x:Name="Details">
    				<Storyboard>
    					<DoubleAnimation Duration="0" To="77" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="listBox" d:IsOptimized="True"/>
    					<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationX)" Storyboard.TargetName="listBox" d:IsOptimized="True"/>
    					<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationY)" Storyboard.TargetName="listBox" d:IsOptimized="True"/>
    					<DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="listBox" d:IsOptimized="True"/>
    				</Storyboard>
    			</VisualState>
    		</VisualStateGroup>
    	</VisualStateManager.VisualStateGroups>
        <Grid.RowDefinitions>
        	<RowDefinition Height="Auto"/>
        	<RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitleGrid is the name of the application and page title-->
        <Grid x:Name="TitleGrid" Grid.Row="0">
            <Grid.Projection>
                <PlaneProjection/>
            </Grid.Projection>

            <TextBlock Text="BookMyShow" x:Name="textBlockPageTitle" Style="{StaticResource PhoneTextGroupHeaderStyle}" FontSize="24" Margin="20,0,0,0"/>
            <TextBlock Text="Book Movie Ticket Instantly" x:Name="textBlockListTitle" Style="{StaticResource PhoneTextTitle1Style}" FontSize="29.333" Margin="20,30,0,0">
            	<i:Interaction.Triggers>
            		<i:EventTrigger EventName="MouseLeftButtonUp">
            			<ic:GoToStateAction StateName="List"/>
            		</i:EventTrigger>
            	</i:Interaction.Triggers>
            </TextBlock>

        </Grid>

    	<Grid x:Name="ContentGrid" Grid.Row="1" Margin="0,5,0,0">
    		<Grid.Projection>
    			<PlaneProjection/>
    		</Grid.Projection>
    		<Grid x:Name="DetailGrid" Margin="20,0,0,0"  >
    			<Grid.RowDefinitions>
    				<RowDefinition Height="Auto"/>
    				<RowDefinition Height="Auto"/>
    				<RowDefinition Height="Auto"/>
    				<RowDefinition Height="Auto"/>
    				<RowDefinition Height="Auto"/>
    			</Grid.RowDefinitions>
    			<Grid.ColumnDefinitions>
    				<ColumnDefinition Width="78"/>
    				<ColumnDefinition Width="*"/>
    			</Grid.ColumnDefinitions>
    			<Border Grid.Column="0" Grid.Row="0" Grid.RowSpan="5" BorderThickness="0.25" Margin="2,9,2,-5.2">
    				<StackPanel Orientation="Vertical">

    					<Image Source="{Binding imageurl}" Width="78" Height="78"  Stretch="Fill" 
    						HorizontalAlignment="Left" Margin="0,0,0,0" />
    				</StackPanel>
    			</Border>
    			<StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Margin="15,5,0,5" VerticalAlignment="Center" HorizontalAlignment="Left">
    				<TextBlock TextAlignment="Left" Text="{Binding name}"  TextWrapping="Wrap" Height="25" Margin="0" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" Width="500" />
    				<TextBlock Text="{Binding title}"  TextWrapping="Wrap" Height="42" Margin="0,5,0,0" FontSize="18.667" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Left" Width="500"/>
    			</StackPanel>
    			<TextBlock Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2"   
    				Text="{Binding description}" TextWrapping="Wrap" HorizontalAlignment="Left" 
    				Margin="2,2,5,2" Padding="0" VerticalAlignment="Top" Style="{StaticResource PhoneTextSmallStyle}" Height="400"/>
				
    		</Grid>
    		<ListBox x:Name="listBox" ItemTemplate="{StaticResource infoTemplate2}" ItemsSource="{Binding infoCollection}" Margin="8" >
    			<ListBox.Projection>
    				<PlaneProjection/>
    			</ListBox.Projection>
    			<ListBox.RenderTransform>
    				<CompositeTransform/>
    			</ListBox.RenderTransform>
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="SelectionChanged">
    					<ic:GoToStateAction StateName="Details"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    		</ListBox>
    	</Grid>
    </Grid>


</phoneNavigation: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)

Share

About the Author

Somnath Mondal
Technical Lead
India India
No Biography provided

You may also be interested in...

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150731.1 | Last Updated 31 May 2010
Article Copyright 2010 by Somnath Mondal
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid