asked on

Windows Mobile 7.1 - Screen layout question

Been developing a Windows Mobile 7.1 application. I have a screen which has a number of text boxes within a vertical stack panel and then I want to display a list of items beneath that so I have used a ListBox.

My problem is that it looks a bit odd as I really want the whole page to scroll and not just the list of items as the list starts very close to the bottom of the display. How can I achieve this?

Mikal613

If I understand what your saying, you can use a scroll viewer. It allows you to scroll a long object in a defined size.

Mikal613

something like this?

http://devlicio.us/blogs/derik_whittaker/archive/2010/06/06/creating-scrollable-edit-content-in-wp7.aspx

ChrisMDrew

ASKER

That's what I thought as well after a biit of research. I have attached my XAML file though and I just can't see what is wrong. I guess it could be the Telerik controls causing issues however what happens is that I cannot scroll the screen up to see the last of the Radloopinglist controls or the text boxes which follow...

<phone:PhoneApplicationPage 
    x:Class="Blu3.ViewPatchPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
	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:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
	xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
    xmlns:telerikPrimitivesLoopingList="clr-namespace:Telerik.Windows.Controls.LoopingList;assembly=Telerik.Windows.Controls.Primitives" DataContext="{Binding}"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">


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

		<!--TitlePanel -->
		<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="0,0,0,5">
			<Image Source="Images/viewpatch.jpg" Width="480" Height="100"  />
		</StackPanel>

		<ScrollViewer Grid.Row="1" Margin="0,0,0,0">

			<StackPanel Margin="0,0,0,0">
			
				<ListBox Name="lbPatchData" Margin="0,0,0,0">

					<StackPanel Margin="0,0,0,0" Width="480">
						<TextBlock Text="Patch ID: 12345" Name="lblPatchID" FontWeight="Bold" FontSize="24" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>

						<TextBlock Text="Task Type:" VerticalAlignment="Center"></TextBlock>
						<TextBox Name="tbTaskType" TextWrapping="Wrap" IsEnabled="False" Text="{Binding TaskType}"></TextBox>

						<TextBlock Text="Road Class:" VerticalAlignment="Center"></TextBlock>
						<TextBox Name="tbRoadClass" IsEnabled="False" Text="{Binding RoadClass}"></TextBox>

						<StackPanel Margin="0,0,0,0" Width="480">
							<TextBlock Text="Surface:" VerticalAlignment="Center"></TextBlock>
					
							<telerikInput:RadListPicker Name="rlpSurface" SelectionChanged="rlpSurface_SelectionChanged">
								<sys:String>Surface 1</sys:String>
								<sys:String>Surface 2</sys:String>
								<sys:String>Surface 3</sys:String>
								<sys:String>Surface 4</sys:String>
							</telerikInput:RadListPicker>
						
							<TextBlock Text="Status:" VerticalAlignment="Center"></TextBlock>
							<telerikInput:RadListPicker Name="rlpStatus" SelectionChanged="rlpStatus_SelectionChanged">
								<sys:String>Not Visited</sys:String>
								<sys:String>Visited (Complete)</sys:String>
								<sys:String>Visited (Not Complete)</sys:String>
								<sys:String>Abandoned</sys:String>
							</telerikInput:RadListPicker>

							<TextBlock Text="Depth:" VerticalAlignment="Center"></TextBlock>
							<StackPanel Orientation="Horizontal" Margin="10,10,0,0" Height="90">
								<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="depthList1" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32" HorizontalAlignment="Center" />
								<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="depthList2" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32" HorizontalAlignment="Center" />
								<TextBlock Text="." FontSize="40" VerticalAlignment="Center" Height="75" Padding="20, 0, 0, 0" Width="50" />
								<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="depthList3" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32" HorizontalAlignment="Center" />
								<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="depthList4" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32" HorizontalAlignment="Center" />
							</StackPanel>
					
							<TextBlock Text="Width:" VerticalAlignment="Center"></TextBlock>
							<StackPanel Orientation="Horizontal" Margin="10,10,0,0" Height="90">
								<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="widthList1" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32" />
								<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="widthList2" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32" />
								<TextBlock Text="." FontSize="40" VerticalAlignment="Center" Height="75" Padding="20, 0, 0, 0" Width="50"/>
								<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="widthList3" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32" />
								<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="widthList4" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32"/>
							</StackPanel>

							<TextBlock Text="Length:" VerticalAlignment="Center"></TextBlock>
							<StackPanel Orientation="Horizontal" Margin="10,10,0,0" Height="90">
								<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="lengthList1" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32" />
								<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="lengthList2" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32" />
								<TextBlock Text="." FontSize="40" VerticalAlignment="Center" Height="75" Padding="20, 0, 0, 0" Width="50" />
								<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="lengthList3" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32" />
								<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="lengthList4" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32"/>
							</StackPanel>
						</StackPanel>

						<TextBlock Text="Notes:" VerticalAlignment="Center"></TextBlock>
						<TextBox Name="tbNotes" Text="{Binding Path=Notes, Mode=TwoWay}" Height="120" TextChanged="tbNotes_TextChanged"></TextBox>

					</StackPanel>

				</ListBox>
			
			</StackPanel>
		</ScrollViewer>

	</Grid>

</phone:PhoneApplicationPage>

Open in new window

Mikal613

try setting a height to the scrollviewer.

ChrisMDrew

ASKER

tried simplifying it a bit but still no luck getting it to scroll. Any thoughts?

<TextBlock Text="Notes:" VerticalAlignment="Center"></TextBlock>
				<TextBox Name="tbNotes" Text="{Binding Path=Notes, Mode=TwoWay}" Height="120" TextChanged="tbNotes_TextChanged"></TextBox>

Open in new window

ChrisMDrew

ASKER

I'm also getting a strange effect sometimes when I click on one of fields on the page all of the text gets displayed in red - I suspect that this is a selection effect but its neither consistent or desired...

Mikal613

Yes there is a selected event that needs to be handled on the listbox items.

I dont think all your code was posted on the above comment...

ChrisMDrew

ASKER

Thanks - no for some reason it didn't all paste - here's the XAML again...

<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="1200"/>
        </Grid.RowDefinitions>

		<!--TitlePanel -->
		<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="0,0,0,5">
			<Image Source="Images/viewpatch.jpg" Width="480" Height="100"  />
		</StackPanel>

		<ScrollViewer Grid.Row="1" Margin="0,0,0,0" Height="1200">

			<StackPanel Margin="0,0,0,0" Width="480">
				<TextBlock Text="Patch ID: 12345" Name="lblPatchID" FontWeight="Bold" FontSize="24" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>

				<TextBlock Text="Task Type:" VerticalAlignment="Center"></TextBlock>
				<TextBox Name="tbTaskType" TextWrapping="Wrap" IsEnabled="False"></TextBox>

				<TextBlock Text="Road Class:" VerticalAlignment="Center"></TextBlock>
				<TextBox Name="tbRoadClass" IsEnabled="False"></TextBox>

				<TextBlock Text="Surface:" VerticalAlignment="Center"></TextBlock>
					
				<telerikInput:RadListPicker Name="rlpSurface" SelectionChanged="rlpSurface_SelectionChanged">
					<sys:String>Surface 1</sys:String>
					<sys:String>Surface 2</sys:String>
					<sys:String>Surface 3</sys:String>
					<sys:String>Surface 4</sys:String>
				</telerikInput:RadListPicker>
						
				<TextBlock Text="Status:" VerticalAlignment="Center"></TextBlock>
				<telerikInput:RadListPicker Name="rlpStatus" SelectionChanged="rlpStatus_SelectionChanged">
					<sys:String>Not Visited</sys:String>
					<sys:String>Visited (Complete)</sys:String>
					<sys:String>Visited (Not Complete)</sys:String>
					<sys:String>Abandoned</sys:String>
				</telerikInput:RadListPicker>

				<TextBlock Text="Depth:" VerticalAlignment="Center"></TextBlock>
				<StackPanel Orientation="Horizontal" Margin="10,10,0,0" Height="90">
					<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="depthList1" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32" HorizontalAlignment="Center" />
					<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="depthList2" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32" HorizontalAlignment="Center" />
					<TextBlock Text="." FontSize="40" VerticalAlignment="Center" Height="75" Padding="20, 0, 0, 0" Width="50" />
					<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="depthList3" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32" HorizontalAlignment="Center" />
					<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="depthList4" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32" HorizontalAlignment="Center" />
				</StackPanel>
					
				<TextBlock Text="Width:" VerticalAlignment="Center"></TextBlock>
				<StackPanel Orientation="Horizontal" Margin="10,10,0,0" Height="90">
					<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="widthList1" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32" />
					<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="widthList2" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32" />
					<TextBlock Text="." FontSize="40" VerticalAlignment="Center" Height="75" Padding="20, 0, 0, 0" Width="50"/>
					<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="widthList3" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32" />
					<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="widthList4" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32"/>
				</StackPanel>

				<TextBlock Text="Length:" VerticalAlignment="Center"></TextBlock>
				<StackPanel Orientation="Horizontal" Margin="10,10,0,0" Height="90">
					<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="lengthList1" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32" />
					<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="lengthList2" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32" />
					<TextBlock Text="." FontSize="40" VerticalAlignment="Center" Height="75" Padding="20, 0, 0, 0" Width="50" />
					<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="lengthList3" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32" />
					<telerikPrimitives:RadLoopingList ItemWidth="75" ItemHeight="75" x:Name="lengthList4" IsCentered="True" IsExpanded="False" Height="90" Width="90" FontSize="32"/>
				</StackPanel>

				<TextBlock Text="Notes:" VerticalAlignment="Center"></TextBlock>
				<TextBox Name="tbNotes" Text="{Binding Path=Notes, Mode=TwoWay}" Height="120" TextChanged="tbNotes_TextChanged"></TextBox>

			</StackPanel>

		</ScrollViewer>

	</Grid>

Open in new window

ASKER CERTIFIED SOLUTION

Mikal613

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ChrisMDrew

ASKER

Thanks - that's the one. I thought by allocating more space I would be sure to include all controls but I see my mistake now!

ChrisMDrew

ASKER

Think I should get you to write my app for me as you have answered pretty much all of my questions!

Mikal613

Wheres the fun in that??

HAHAHAHAHA

Mikal613

If you want me to look at any other questions, you can email me at mikal613 {AT} experts-exchange.com

ChrisMDrew

ASKER

Thanks - I'm just learning this stuff and its very different from my usual area of Visual C# / WinForms