Click here to Skip to main content
15,893,814 members
Articles / Programming Languages / C# 4.0

Expression Blend 4 for Windows Phone

Rate me:
Please Sign up or sign in to vote.
4.53/5 (13 votes)
31 May 2010CPOL5 min read 43.3K   766   23  
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...
<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)


Written By
Technical Lead
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions