Windows Phone 8.1 Scrolling without Scrolling
I added a ScrollViewer object to my application page and I added a lot of text boxes and combobox to the ScrollViewer object, but the end user using the application cannot view all the items because the scrolling does not scroll low enough.
Here is my XAMLCode:
<Page x:Class="mobible.Views.Profile"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:mobible.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
Height="665">
<Page.Resources>
<Style TargetType="ComboBox">
<Setter Property="Foreground"
Value="Black" />
<Setter Property="Background"
Value="White" />
</Style>
</Page.Resources>
<Grid x:Name="LayoutRoot"
Background="{ThemeResource AppBarItemPointerOverForegroundThemeBrush}"
AllowDrop="True"
Height="Auto"
Width="Auto">
<ScrollViewer Foreground="#FF0F0D0D"
AllowDrop="True"
VerticalAlignment="Top"
HorizontalAlignment="Center"
VerticalScrollBarVisibility="Visible"
VerticalScrollMode="Enabled"
BringIntoViewOnFocusChange="True"
HorizontalScrollMode="Enabled"
IsHoldingEnabled="True"
Height="715"
Margin="0,0,0,-77">
<StackPanel Height="Auto"
Name="stackPanel1"
Width="Auto">
<Grid>
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition />
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Title Panel -->
<StackPanel Grid.Row="0"
Margin="19,0,0,508"
Grid.RowSpan="2">
<Image Height="126"
Margin="-19,0,-0.167,0"
RenderTransformOrigin="0.504,0.025"
Source="ms-appx:///Assets/mobible_logo.png"
Stretch="Fill"
HorizontalAlignment="Right" />
</StackPanel>
<!--TODO: Content should be placed within the following grid-->
<Grid Grid.Row="1"
x:Name="ContentRoot"
Margin="19,9.5,19,0"
HorizontalAlignment="Center">
<TextBox x:Name="txt_lastName"
HorizontalAlignment="Left"
Margin="0,238,0,0"
TextWrapping="Wrap"
Text=""
VerticalAlignment="Top"
Width="361"
Background="White"
BorderBrush="#FF0F0D0D" />
<Button x:Name="btn_save"
Content="Save"
HorizontalAlignment="Left"
Margin="-2,628,0,0"
VerticalAlignment="Top"
Width="360"
Height="53"
Foreground="#FF0F0D0D"
Background="#FFEEDA11"
FontSize="17" />
<TextBox x:Name="txt_dateofbirth"
HorizontalAlignment="Left"
Margin="1,321,0,0"
TextWrapping="Wrap"
Text=""
VerticalAlignment="Top"
Width="361"
Background="White"
BorderBrush="#FF0F0D0D" />
<TextBlock HorizontalAlignment="Left"
Margin="2,128,0,0"
TextWrapping="Wrap"
Text="First Name"
VerticalAlignment="Top"
Height="24"
Width="332"
FontSize="18"
Foreground="#FF0E0D0D"
RenderTransformOrigin="0.516,1.217" />
<TextBlock HorizontalAlignment="Left"
Margin="3,213,0,0"
TextWrapping="Wrap"
Text="Last Name"
VerticalAlignment="Top"
Height="22"
Width="200"
FontSize="18"
Foreground="#FF0E0D0D"
RenderTransformOrigin="0.516,1.217" />
<TextBlock HorizontalAlignment="Left"
Margin="3,292,0,0"
TextWrapping="Wrap"
Text="Date of birth"
VerticalAlignment="Top"
Height="31"
Width="142"
FontSize="18"
Foreground="#FF0E0D0D"
RenderTransformOrigin="0.516,1.217" />
<TextBlock HorizontalAlignment="Left"
Margin="1,372,0,0"
TextWrapping="Wrap"
Text="Gender"
VerticalAlignment="Top"
Height="31"
Width="347"
FontSize="18"
Foreground="#FF0E0D0D"
RenderTransformOrigin="0.516,1.217" />
<TextBlock HorizontalAlignment="Left"
Margin="3,456,0,0"
TextWrapping="Wrap"
Text="Country"
VerticalAlignment="Top"
Height="31"
Width="347"
FontSize="18"
Foreground="#FF0E0D0D"
RenderTransformOrigin="0.516,1.217" />
<TextBox x:Name="txt_firstName"
HorizontalAlignment="Left"
Margin="-2,157,0,0"
TextWrapping="Wrap"
Text=""
VerticalAlignment="Top"
Width="361"
Background="White"
BorderBrush="#FF0F0D0D" />
<TextBlock HorizontalAlignment="Left"
Margin="2,540,0,0"
TextWrapping="Wrap"
Text="Religious background"
VerticalAlignment="Top"
Height="31"
Width="347"
FontSize="18"
Foreground="#FF0E0D0D"
RenderTransformOrigin="0.516,1.217" />
<ComboBox x:Name="cmbCountry"
ItemsSource="{Binding}"
HorizontalAlignment="Left"
Height="71"
Margin="1,478,0,0"
VerticalAlignment="Top"
Width="361"
Background="White"
Foreground="Black"
BorderBrush="#FF0F0D0D" />
<ComboBox x:Name="cmbReligion"
ItemsSource="{Binding}"
HorizontalAlignment="Left"
Height="71"
Margin="1,564,0,0"
VerticalAlignment="Top"
Width="361"
Background="White"
Foreground="Black"
BorderBrush="#FF0F0D0D">
<TextBlock />
</ComboBox>
<ComboBox x:Name="cmbGender"
ItemsSource="{Binding}"
HorizontalAlignment="Left"
Height="148"
Margin="1,401,0,0"
VerticalAlignment="Top"
Width="361"
Background="White"
BorderBrush="#FF0F0D0D" />
</Grid>
</Grid>
</StackPanel>
</ScrollViewer>
</Grid>
</Page>
+3
source to share
1 answer
First of all: when you only have one row in your grid, you can remove it and just insert the ScrollViewer.
Second: just set the VerticalAlignment / HorizontalAlignment ScrollViewer to stretch. Or add a Rowdefinition to your grid that determines the height of your ScrollViewer. Here's an example that works for me:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0">
<StackPanel>
.... my elements ...
</StackPanel>
</ScrollViewer>
<Button Grid.Row="1" Content="MyButton" />
</Grid>
+1
source to share