?
Solved

Windows Mobile 7.1 - Screen layout question

Posted on 2011-10-24
14
Medium Priority
?
313 Views
Last Modified: 2013-12-27
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?
0
Comment
Question by:ChrisMDrew
  • 7
  • 7
14 Comments
 
LVL 48

Expert Comment

by:Mikal613
ID: 37017862
If I understand what your saying, you can use a scroll viewer. It allows you to scroll a long object in a defined size.
0
 
LVL 48

Expert Comment

by:Mikal613
ID: 37017877
0
 

Author Comment

by:ChrisMDrew
ID: 37017902
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

0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
LVL 48

Expert Comment

by:Mikal613
ID: 37017918
try setting a height to the scrollviewer.
0
 

Author Comment

by:ChrisMDrew
ID: 37018005
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

0
 

Author Comment

by:ChrisMDrew
ID: 37018015
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...
0
 
LVL 48

Expert Comment

by:Mikal613
ID: 37018055
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...
0
 

Author Comment

by:ChrisMDrew
ID: 37018094
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

0
 
LVL 48

Accepted Solution

by:
Mikal613 earned 2000 total points
ID: 37018114
<!--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="500">
-- Your content


You want to make the height of the scroll viewer in the realms of the page so the "500" will allow 500 px of space to scroll all the content in the scroll viewer.
0
 

Author Comment

by:ChrisMDrew
ID: 37018154
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!
0
 

Author Closing Comment

by:ChrisMDrew
ID: 37018155
Think I should get you to write my app for me as you have answered pretty much all of my questions!
0
 
LVL 48

Expert Comment

by:Mikal613
ID: 37018164
Wheres the fun in that??

HAHAHAHAHA
0
 
LVL 48

Expert Comment

by:Mikal613
ID: 37018166
If you want me to look at any other questions, you can email me at mikal613 {AT} experts-exchange.com
0
 

Author Comment

by:ChrisMDrew
ID: 37018203
Thanks - I'm just learning this stuff and its very different from my usual area of Visual C# / WinForms
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I think the most popular question in our Windows Mobile Programming zone is about the backlight - we all want to keep it on when our application is running. Few years ago the function SystemIdleTimerReset() did this job. On our side we had to detec…
You should read OS supplied guidelines before developing. I can't stress that enough. The guidelines will help you understand the reasons mobile app developers do what they do.  Apple is very particular when they review appstore submissions.
We’ve all felt that sense of false security before—locking down external access to a database or component and feeling like we’ve done all we need to do to secure company data. But that feeling is fleeting. Attacks these days can happen in many w…
When cloud platforms entered the scene, users and companies jumped on board to take advantage of the many benefits, like the ability to work and connect with company information from various locations. What many didn't foresee was the increased risk…
Suggested Courses
Course of the Month17 days, 9 hours left to enroll

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question