I have created a custom canvas which I would need to stretch behind two textblocks.
Heres the entire code
<Grid VerticalAlignment="Top" HorizontalAlignment="Right">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Canvas HorizontalAlignment="Stretch" Height="45" VerticalAlignment="Top" Grid.ColumnSpan="2" >
<Rectangle Height="30" Stroke="Black" Width="70" RadiusY="17.167" RadiusX="17.167" Canvas.Top="15">
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF096016"/>
<GradientStop Color="#FF0FEF6F" Offset="1"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Ellipse Height="5" Width="5" RenderTransformOrigin="0.5,0.45" Fill="White" Stroke="Gray" Canvas.ZIndex="2" Canvas.Left="33"/>
<Ellipse Height="5" Stroke="Black" Width="5" RenderTransformOrigin="-0.45,0.2" Fill="#FF99A19A" Canvas.Left="17" Canvas.Top="18"/>
<Ellipse Height="5" Stroke="Black" Width="5" RenderTransformOrigin="-0.45,0.2" Fill="#FF99A19A" Canvas.Left="48" Canvas.Top="18"/>
<Path Data="M143.5,193.5 C127.75,210.5 127.75,210.5 127.75,210.5" Height="17" Stretch="Fill" UseLayoutRounding="False" Width="15.75" Canvas.Left="19.75" Canvas.Top="3.5"/>
<Path Data="M128,209 L141.99998,192.16666" Height="17.833" Stretch="Fill" Stroke="#FF99A19A" UseLayoutRounding="False" Width="15" Canvas.Left="20" Canvas.Top="2.167"/>
<Path Data="M143.5,192.16699 L158.08334,210.25" Height="19.083" Stretch="Fill" Stroke="#FF99A19A" UseLayoutRounding="False" Width="15.583" Canvas.Left="35.5" Canvas.Top="2.167"/>
</Canvas>
<TextBlock Height="30" Margin="0,20,0,0" TextAlignment="Right" Name="priceTextblock" Text="{Binding Price}" VerticalAlignment="Top" FontFamily="Calibri" FontWeight="Bold"/>
<TextBlock Width="50" Margin="5,20,0,0" Height="30" TextAlignment="Left" Name="currencyTextblock" Text="{Binding SelectedCurrency.code}" VerticalAlignment="Top" Grid.Column="1" FontFamily="Calibri" FontWeight="Bold"/>
</Grid>
though the horizontal alignment is set to stretch nothing is happening. What am I missing, please help.
Thanks in advance
EDITS
Using Grid instead of canvas
<Grid VerticalAlignment="Top" HorizontalAlignment="Right">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid HorizontalAlignment="Stretch" Height="45" VerticalAlignment="Top" Width="70">
<Rectangle Margin="0,15,0,0" Stroke="Black" RadiusY="17.167" RadiusX="17.167">
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF096016"/>
<GradientStop Color="#FF0FEF6F" Offset="1"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Ellipse Height="5" Margin="33,0,32,0" VerticalAlignment="Top" Stroke="Gray" RenderTransformOrigin="0.5,0.45" Fill="White" Canvas.ZIndex="2"/>
<Ellipse HorizontalAlignment="Left" Margin="17,18,0,22" Stroke="Black" Width="5" RenderTransformOrigin="-0.45,0.2" Fill="#FF99A19A"/>
<Ellipse HorizontalAlignment="Right" Margin="0,18,17,22" Stroke="Black" Width="5" RenderTransformOrigin="-0.45,0.2" Fill="#FF99A19A"/>
<Path Data="M143.5,193.5 C127.75,210.5 127.75,210.5 127.75,210.5" Height="17" Margin="19.75,3.5,34.5,0" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top"/>
<Path Data="M128,209 L141.99998,192.16666" HorizontalAlignment="Left" Height="17.833" Margin="20,2.167,0,0" Stretch="Fill" Stroke="#FF99A19A" UseLayoutRounding="False" VerticalAlignment="Top" Width="15"/>
<Path Data="M143.5,192.16699 L158.08334,210.25" HorizontalAlignment="Right" Height="19.083" Margin="0,2.167,18.917,0" Stretch="Fill" Stroke="#FF99A19A" UseLayoutRounding="False" VerticalAlignment="Top" Width="15.583"/>
</Grid>
<TextBlock Height="30" Margin="0,20,0,0" TextAlignment="Right" Name="priceTextblock" Text="{Binding Price}" VerticalAlignment="Top" FontFamily="Calibri" FontWeight="Bold"/>
<TextBlock Width="50" Margin="5,20,0,0" Height="30" TextAlignment="Left" Name="currencyTextblock" Text="{Binding SelectedCurrency.code}" VerticalAlignment="Top" Grid.Column="1" FontFamily="Calibri" FontWeight="Bold"/>
</Grid>
You need to set column width to *. It tells to get all available space
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
Related
I'm coding a simple windows phone 7.5 localization application.
I've changed the default pushpin template as :
<ControlTemplate TargetType="maps:Pushpin" x:Key="allPushpinsTemplate">
<Grid Height="26" Width="26" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" >
<Grid.RenderTransform>
<CompositeTransform Rotation="-45"/>
</Grid.RenderTransform>
<Rectangle Fill="Black" HorizontalAlignment="Center" Margin="0" Stroke="White" VerticalAlignment="Center" Height="26" Width="26"/>
<Ellipse HorizontalAlignment="Center" Height="16" Margin="0" VerticalAlignment="Center" Fill="Red" Width="16"/>
</Grid>
</ControlTemplate>
When I click on a pushpin, I handle the event and change the template of the selected pin as :
<ControlTemplate TargetType="maps:Pushpin" x:Key="detailedPushpinTemplate">
<Grid x:Name="ContentGrid" Background="Transparent" Margin="-4,0,0,0">
<StackPanel >
<Grid Background="Black">
<StackPanel Margin="5,5,0,0">
<TextBlock Text="{Binding Adress}" Foreground="White" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ZipCode}" Foreground="White" />
<TextBlock Text="-" Foreground="White" Padding="3,0"/>
<TextBlock Text="{Binding City}" Foreground="White" />
</StackPanel>
<TextBlock Text="{Binding TelStd}" Foreground="White" />
<TextBlock Text="{Binding Email}" Foreground="White" />
<StackPanel Orientation="Horizontal">
<Button BorderBrush="Transparent" Click="Button_Click" CommandParameter="email" ClickMode="Press">
<Button.Content>
<Image Source="/Images/Icons/icon-mail.png" Width="40" Height="40" />
</Button.Content>
</Button>
<Button BorderBrush="Transparent" Click="Button_Click" CommandParameter="phone" ClickMode="Press">
<Button.Content>
<Image Source="/Images/Icons/icon-phone.png" Width="40" Height="40" />
</Button.Content>
</Button>
</StackPanel>
</StackPanel>
</Grid>
<Polygon Fill="Black" Points="0,0 29,0 0,29" Width="29" Height="29" HorizontalAlignment="Left" />
<Grid Height="26" Width="26" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left">
<Grid.RenderTransform>
<CompositeTransform Rotation="-45"/>
</Grid.RenderTransform>
<Rectangle Fill="Black" HorizontalAlignment="Center" Margin="0" Stroke="White" VerticalAlignment="Center" Height="26" Width="26" />
<Ellipse HorizontalAlignment="Center" Height="16" Margin="0" VerticalAlignment="Center" Fill="Green" Width="16" />
</Grid>
</StackPanel>
</Grid>
</ControlTemplate>
So that I can display some info and some commands. The result works perfectly and display a black rectangle with all my custom data.
But, the other pins (default template) overlap the rectangle and appears on the top of my selected pin and hide information.
Has anyone an idea to force the selected pin template to be always on top of the other pins ?
for information the XAML of my map :
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Canvas >
<maps:Map ZoomBarVisibility="Visible" ZoomLevel="4" Center="46.8821,2.2697" Name="map1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Canvas.Top="0" Height="600" Width="460">
<maps:MapItemsControl x:Name="mapControl"/>
<maps:MapItemsControl ItemsSource="{Binding Locations}" >
<maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<maps:Pushpin Location="{Binding Location}" Template="{StaticResource allPushpinsTemplate}" MouseLeftButtonDown="Pushpin_MouseLeftButtonDown"/>
</DataTemplate>
</maps:MapItemsControl.ItemTemplate>
</maps:MapItemsControl>
<maps:MapLayer Name="imageLayer"/>
</maps:Map>
<Button Content="some action" Height="70" HorizontalAlignment="Left" Margin="0" Name="button1" VerticalAlignment="Top" Width="170" Canvas.Left="140" />
</Canvas>
</Grid>
The only way I've been able to work around this default behaviour is to remove the original pin and then add a new one in the same position with the different template.
The newly added pin appears at the top in the Z-Order but I haven't been able to alter the Z-Order of existing pins once created.
Also remember to "reset" any pins in the selected state when the user clicks on another.
I guess this should help you: http://social.msdn.microsoft.com/Forums/en-US/wpdevelop/thread/c4055dba-3efd-4bf7-98b3-cd8e24d175ea
I am using a Grid and in my page. The page should be equally partitioned like a ice cube tray.
The each grid column contains a image.
For partitioning into 3 equal parts i am using this code:
<ListBox SelectionChanged="listBox1_SelectionChanged" HorizontalContentAlignment="Stretch" Height="720" HorizontalAlignment="Left" Margin="1,5,0,0" Name="listBox1" VerticalAlignment="Top">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center" VerticalAlignment="Top" Margin="3" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Border CornerRadius="6" BorderBrush="Gray" BorderThickness="2" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="border1">
<toolkit:WrapPanel x:Name="wp">
<Image Source="{Binding ImagePicture}" Margin="0,10,0,0" Height="110" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Margin="0,0,0,5" TextAlignment="Center" Text="{Binding categoryname}" Foreground="Black" FontStyle="Normal" Height="Auto" Width="140" HorizontalAlignment="Center" VerticalAlignment="Stretch"/>
</toolkit:WrapPanel>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Now when i use this, sometimes the images are small i face this problem i have shown.
This is what i Want:
This is my problem:
Can you please share the solution for this problem.
This xaml will work-
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
I am trying to create listbox with images wrapped in a wrappanel. I want to show the items fit to screen. like if the items width is less than the available screen width then the items should be stretched and if the items width is greater than the available screen width then the items should jump to next row and empty space should be filled.
Code:
<ListBox x:Name="lst" Grid.Row="3" HorizontalAlignment="Left">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Width="Auto" Height="Auto" ite ItemWidth="Auto" ItemHeight="Auto"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<Border BorderThickness="2" Width="Auto" Margin="5,5,5,5" Height="Auto" BorderBrush="Cornsilk">
<StackPanel Orientation="Vertical" Height="150" Width="150">
<Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
<TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
<Border BorderThickness="2" Margin="5,5,5,5" Width="Auto" Height="Auto" BorderBrush="Cornsilk">
<StackPanel Orientation="Vertical" Height="150" Width="150">
<Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
<TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
<Border BorderThickness="2" Margin="5,5,5,5" Width="Auto" Height="Auto" BorderBrush="Cornsilk">
<StackPanel Orientation="Vertical" Height="150" Width="150">
<Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
<TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
<Border BorderThickness="2" Margin="5,5,5,5" Width="Auto" Height="Auto" BorderBrush="Cornsilk">
<StackPanel Orientation="Vertical" Height="150" Width="150">
<Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
<TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
</ListBox>
Try adding the following container style to your ListBox:
<UserControl x:Class="MyClass"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<UserControl.Resources>
<Style x:Key="myContainerStyle" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</UserControl.Resources>
<ListBox ItemContainerStyle="{StaticResource myContainerStyle}">
</ListBox>
</UserControl>
(Eventually you have to use PhoneApplicationPage instead of UserControl)
UPDATE: Removed HorizontalAlignment as proposed by Jared Bienz
like in title:)
I wrote from tutorial: http://msdn.microsoft.com/en-us/wp7trainingcourse_yourfirstwp7applab_topic3
does everything like there.
my code:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="120"/> <!-- Problem resolved -->
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- this i can not see any ideas what is wrong? -->
<StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
<Button x:Name = "SolveButton" Content="Solve" Margin="10"
HorizontalAlignment="Center" Click="SolveButton_Click" />
<StackPanel x:Name="StatusPanel" Orientation="Horizontal"
HorizontalAlignment="Center" Visibility="Collapsed">
<TextBlock HorizontalAlignment="Center" Text="Your Moves: " TextWrapping="Wrap"
Foreground="#FFD0D0D0" FontSize="17.333"/>
<TextBlock x:Name="TotalMovesTextBlock" HorizontalAlignment="Center" Text="N"
TextWrapping="Wrap" Foreground="#FFFFB000" FontSize="17.333"/>
</StackPanel>
</StackPanel>
<!-- Here i can see anything under this comment -->
<StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Row="1">
<Border x:Name="CongratsBorder" Height="30" Background="#FFF10DA2"
HorizontalAlignment="Center"
Width="443" RenderTransformOrigin="0.5,0.5"
UseLayoutRounding="False" Opacity="0">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</Border.RenderTransform>
<TextBlock HorizontalAlignment="Center" Text="CONGRATULATIONS!" TextWrapping="Wrap"
Foreground="White" FontSize="17.333" VerticalAlignment="Center"
FontWeight="Bold"/>
</Border>
<Border x:Name="border" BorderThickness="3" Background="#FF262626"
HorizontalAlignment="Center" VerticalAlignment="Center" Padding="1"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</Border.RenderTransform>
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" >
<GradientStop Color="#FFF10DA2" Offset="0" />
<GradientStop Color="#FFEE7923" Offset="1" />
</LinearGradientBrush>
</Border.BorderBrush>
<Canvas Height="435" Width="435">
<Image x:Name="PreviewImage" Height="435" Width="435" Opacity="0.2" />
<Canvas x:Name="GameContainer" Height="435" Width="435" />
</Canvas>
</Border>
<TextBlock x:Name="TapToContinueTextBlock" HorizontalAlignment="Center"
Text="Tap the picture to start the puzzle"
TextWrapping="Wrap" Foreground="#FFD0D0D0" FontSize="17.333" />
</StackPanel>
<!--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="MY APPLICATION"
Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>
</Grid>
<!--Sample code showing usage of ApplicationBar-->
<!--<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1"/>
<shell:ApplicationBarMenuItem Text="MenuItem 2"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>-->
You've got a Grid
And you've got multiple things in the first row of that Grid - so they are being drawn on top of each other.
Try putting things into different Grid Rows
Or Try replacing your outermost Grid by a StackPanel instead?
Also <RowDefinition Height="0.2"/> seems quite small for a height - try using Height="Auto"
Your first stackpanel doesn't have a Grid.Row setting. It's probably behind the TitlePanel in Row 0.
here is the xaml for it when i try to scroll using the scroll viewer the second items control doesn't stretch to accomodate all of the data.
<phone:PhoneApplicationPage xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
x:Class="CheeroJusa.Views.RecipeView"
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"
d:DataContext="{d:DesignData ../SampleData/MainViewModelSampleData.xaml}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" shell:SystemTray.IsVisible="True" d:DesignHeight="696" d:DesignWidth="480">
<!--LayoutRoot is the root grid where all page content is placed-->
<ScrollViewer x:Name="LayoutRoot" Background="Transparent">
<!--ContentPanel - place additional content here-->
<StackPanel x:Name="TitlePanel" Width="480" >
<TextBlock x:Name="PageTitle" Text="{Binding SelectedRecipe.Name}" Margin="0,-7,-4,0" Style="{StaticResource PhoneTextTitle2Style}" Height="44" />
<Canvas x:Name="grid1" Height="2000" VerticalAlignment="Top" Margin="8,0">
<TextBlock Height="30" HorizontalAlignment="Left" x:Name="textBlock1" Text="Prep Time" Width="93" Foreground="{StaticResource PhoneForegroundBrush}" Canvas.Left="17" Canvas.Top="1" />
<TextBlock Height="30" x:Name="textBlock2" Text="Cook Time" Foreground="{StaticResource PhoneForegroundBrush}" Canvas.Left="158" Canvas.Top="1" Width="113" />
<TextBlock Height="30" HorizontalAlignment="Left" x:Name="textBlock3" Text="Serves" Width="58" Foreground="{StaticResource PhoneForegroundBrush}" Canvas.Left="353" Canvas.Top="1" />
<TextBlock Height="44" HorizontalAlignment="Left" x:Name="txtPrep" Text="{Binding SelectedRecipe.PrepTime}" Width="90" TextAlignment="Center" Canvas.Left="17" Canvas.Top="28" />
<TextBlock Height="44" HorizontalAlignment="Left" x:Name="txtCook" Text="{Binding SelectedRecipe.CookTime}" Width="90" TextAlignment="Center" Canvas.Left="162" Canvas.Top="29" />
<TextBlock Height="44" HorizontalAlignment="Left" x:Name="txtServe" Text="{Binding SelectedRecipe.Serves}" Width="58" TextAlignment="Center" Canvas.Left="353" Canvas.Top="28" />
<Grid x:Name="gridScrollView" Height="Auto" Canvas.Left="8" Canvas.Top="59" Width="481">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Margin="0,0,8,0" Grid.Row="0" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="textBlock5" Text="Ingredients" HorizontalAlignment="Left" Margin="0" FontSize="29.333" Height="59" VerticalAlignment="Top" d:LayoutOverrides="HorizontalAlignment">
<TextBlock.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</TextBlock.Foreground></TextBlock>
<ItemsControl x:Name="ingList" ItemsSource="{Binding SelectedRecipe.ingredients}" Background="Transparent" Margin="9,59,0,0" d:LayoutOverrides="Height">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid5" Height="Auto" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Text}" Style="{StaticResource PhoneTextLargeStyle}" Margin="12,0,12,11" d:LayoutOverrides="Height" />
<!--<toolkit:Separator BorderThickness="1" Width="410" Margin="20,0,19,4" VerticalAlignment="Bottom">
<toolkit:Separator.BorderBrush>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</toolkit:Separator.BorderBrush>
</toolkit:Separator>-->
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
<!--<toolkit:Separator Height="12" Margin="0,221,0,0" VerticalAlignment="Top" d:LayoutOverrides="Width" />-->
<Grid d:LayoutOverrides="GridBox" Margin="0,0,0,0" Grid.Row="2" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="textBlock4" Text="Instructions" HorizontalAlignment="Left" FontSize="29.333" Height="55" VerticalAlignment="Top" d:LayoutOverrides="HorizontalAlignment">
<TextBlock.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</TextBlock.Foreground></TextBlock>
<ItemsControl x:Name="lstSteps" ItemsSource="{Binding SelectedRecipe.steps}" HorizontalContentAlignment="Stretch" UseLayoutRounding="True" Margin="5,55,0,0" d:LayoutOverrides="Height" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding StepOrder}" TextWrapping="Wrap" Style="{StaticResource PhoneTextLargeStyle}" HorizontalAlignment="Left" Margin="12,0,0,0" Width="23" d:LayoutOverrides="GridBox" />
<TextBlock Text="{Binding Text}" TextWrapping="Wrap" Style="{StaticResource PhoneTextLargeStyle}" Margin="35,0,19,0" d:LayoutOverrides="GridBox" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
<!--<toolkit:Separator Margin="0,221,0,0" Height="12" BorderThickness="1" VerticalAlignment="Bottom" Grid.Row="3">
<toolkit:Separator.BorderBrush>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</toolkit:Separator.BorderBrush>
</toolkit:Separator>-->
</Grid>
</Canvas>
</StackPanel>
</ScrollViewer>
<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardOut"/>
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardOut"/>
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1"/>
<shell:ApplicationBarMenuItem Text="MenuItem 2"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>
Put in latest code 12/31/2010
the height 2000 for the canvas is just there to test stuff doing it "auto" reduces is to be much much shorter.
Try wrapping the contents of your ScroillViewer in a single container. ie StackPanel or another Grid.
Ok I've finally fixed it by setting the vertical alignment to top for second itemscontrol and it seems tobe stretching fine.. though can't really answer why :(..