如何使ScrollViewer正常工作 - Windows Phone 8

时间:2013-12-04 12:23:32

标签: c# windows-phone-8 scrollviewer

我在我的应用程序页面上添加了一个ScrollViewer对象,并且我在ScrollViewer对象上添加了许多控件对象,但使用该应用程序的最终用户无法查看所有元素,因为Scroll滚动不够低,而且页面在用户有机会输入任何信息之前,它会一直回到原来的位置。

我的XAML代码在这里:

<phone:PhoneApplicationPage
x:Class="ChronosMobile.PhoneApp.OrçamentoPage"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent" Margin="0,0,0,-153">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid x:Name="LayoutRoot1" Background="#FF4F8899" Margin="0,0,0,59">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->

    <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ScrollViewer Margin="-10,0,10,169">
                <StackPanel Height="916">
                    <TextBox x:Name="txtNomeCliente" Height="Auto" TextWrapping="Wrap"    
                        Text="" Background="White" BorderBrush="White" IsReadOnly="True"/>
                    <Button x:Name="BotaoCatalogo" Content="Catálogo"
                        Width="Auto" Height="80" VerticalAlignment="Top" Background="#FF3FAACA" BorderBrush="#FF3FAACA" Click="BotaoCatalogo_Click"/>
                    <Button x:Name="BotaoItens" Content="Itens"
                        Width="Auto" Height="80" VerticalAlignment="Top" Background="#FF3FAACA" BorderBrush="#FF3FAACA" Click="BotaoItens_Click"/>
                    <Grid Background="#FF0F3B48" Margin="12,0,12,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel Grid.Column="0"
                            VerticalAlignment="Center"
                            Orientation="Horizontal"
                            Margin="5">
                            <TextBlock Text="Qtde. de Itens:" 
                                FontSize="{StaticResource PhoneFontSizeMedium}"/>
                            <TextBlock x:Name="lblQuantidadeProdutos" Text="0" Margin="10,0,0,0" FontSize="{StaticResource PhoneFontSizeMedium}" Width="43"/>
                        </StackPanel>
                        <StackPanel Grid.Column="1"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Right"
                            Orientation="Horizontal"
                            Margin="2">

                            <TextBlock x:Name="lblValorTotal" FontSize="{StaticResource PhoneFontSizeMedium}"/>

                        </StackPanel>
                    </Grid>
                    <Button x:Name="BotaoPagamentos" Content="Adicionar Pagamento"
                        Width="Auto" Height="80" VerticalAlignment="Top" Background="#FF3FAACA" BorderBrush="#FF3FAACA" Click="BotaoPagamentos_Click"/>
                    <ListBox x:Name="ListaPagamentos" ItemsSource="{Binding ListaPagamentos}"/>
                    <ListBox x:Name="ListaEntrega" ItemsSource="{Binding ListaEntrega}"/>
                    <Grid Background="#FF0F3B48" Margin="12,0,12,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel Grid.Column="0"
                            VerticalAlignment="Center"
                            Margin="5">
                            <TextBlock 
                                FontSize="16" FontWeight="Bold">
                                <Run FontWeight="Normal" Text="Forma de pagamento: A vista"/>
                            </TextBlock>
                            <TextBlock 
                                FontSize="16">
                                <Run Text="Parcela(s):"/>
                                <Run Text=" "/>
                                <Run Text="1"/>
                            </TextBlock>
                            <TextBlock 
                                FontSize="16">
                                <Run Text="Vencimento"/>
                                <Run Text=":"/>
                                <Run Text=" "/>
                                <Run Text="25/05/2013"/>
                            </TextBlock>
                        </StackPanel>
                        <StackPanel Grid.Column="1"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Right"
                            Margin="2">
                            <TextBlock 
                                FontSize="{StaticResource PhoneFontSizeMedium}" Margin="0">
                                <Run Text="    "/>
                                <Run Text="Valor"/>
                            </TextBlock>
                            <TextBlock Text="R$ 399,00" 
                                FontSize="{StaticResource PhoneFontSizeMedium}"/>
                        </StackPanel>
                    </Grid>

                    <Button x:Name="cmdEntrega" Content="Entrega" Width="Auto" Height="80" VerticalAlignment="Top" Background="#FF3FAACA" BorderBrush="#FF3FAACA" Click="BotaoEntrega_Click"/>

                    <Grid Background="#FF0F3B48" Margin="12,0,12,0" Height="50">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="5*"/>
                            <ColumnDefinition Width="4*"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel Grid.Column="0"
                            VerticalAlignment="Center"
                            Orientation="Horizontal"
                            Margin="5,12,81,0" Height="38" Grid.ColumnSpan="2">
                            <TextBlock x:Name="lblTransportadora" 
                                FontSize="{StaticResource PhoneFontSizeMedium}" Width="149">
                                <Run FontSize="20" Text="Transportadora"/>
                                <Run FontSize="20" Text=":"/>
                            </TextBlock>
                        </StackPanel>
                    </Grid>
                    <Grid Height="13" Width="437"/>
                    <Grid Background="#FF0F3B48" Margin="12,0,12,0" Height="135">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="5*"/>
                            <ColumnDefinition Width="4*"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel Grid.Column="0"
                            VerticalAlignment="Center"
                            Orientation="Horizontal"
                            Margin="5,12,81,0" Height="38" Grid.ColumnSpan="2">
                            <TextBlock x:Name="lblTransportadora1" 
                                FontSize="{StaticResource PhoneFontSizeMedium}" Width="58" Margin="0,-2,0,12">
                                <Run FontSize="20" Text="Rua:"/>
                            </TextBlock>
                        </StackPanel>
                        <TextBlock FontSize="{StaticResource PhoneFontSizeMedium}" Margin="5,11,128,85">
                            <Run FontSize="20" Text="Descrição:"/>
                        </TextBlock>
                        <TextBlock FontSize="{StaticResource PhoneFontSizeMedium}" Margin="5,96,165,10">
                            <Run FontSize="20" Text="Cidade:"/>
                        </TextBlock>
                        <TextBlock x:Name="lblDescricao" Grid.ColumnSpan="2" HorizontalAlignment="Left" Height="26" Margin="113,16,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="315"/>
                        <TextBlock x:Name="lblRua" Grid.ColumnSpan="2" HorizontalAlignment="Left" Height="26" Margin="113,57,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="317"/>
                        <TextBlock x:Name="lblCidade" Grid.ColumnSpan="2" HorizontalAlignment="Left" Height="26" Margin="113,99,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="319"/>
                    </Grid>
                    <Grid Height="20" Width="437"/>
                    <TextBlock Text="Informações Adicionais:" Margin="15,10,0,0"/>
                    <TextBox x:Name="TxtInfoAdicional" Height="Auto" TextWrapping="Wrap"    
                        Text="{Binding InfoAdicional, Mode=TwoWay}" Background="White" BorderBrush="White"/>
                    <Button x:Name="BotaoFinalizar" Content="Salvar Orçamento"
                        Width="238" Height="80" VerticalAlignment="Top"
                        HorizontalAlignment="Right" BorderBrush="#FF3FAACA" Background="#FF3FAACA"/>
                </StackPanel>
            </ScrollViewer>
        </Grid>
    </Grid>

    <!--TitlePanel contains the name of the application and page title-->

    <!--ContentPanel - place additional content here-->
</Grid>

2 个答案:

答案 0 :(得分:1)

我有同样的问题。但最后我解决了它,我只是使用了Height属性来做到这一点。请执行以下步骤

  • 首先创建一个ScrollViewer
  • 让ScrollViewer创建一个容器(例如:Grid / StackPanel / Border等...)并将每个控件放入其中。
  • 为ScrollViewer和Container设置固定高度(注意:容器的高度应该大于ScrollViewer的高度)

请参阅以下代码

<ScrollViewer Height="500">
        <Grid Name="Container" Height="700">
            <TextBox/>
            <TextBox/>
            <TextBox/>
        </Grid>
</ScrollViewer>

现在您可以滚动容器Grid甚至显示的KeyBoard,甚至可以将焦点放在TextBox上。

答案 1 :(得分:0)

您必须设置ScrollViewer的高度。它应该比StackPanel小,以实现您想要的滚动效果。如果你想看到它的全部内容,它也应该小于屏幕尺寸。