2015-09-11 115 views
1

我已创建页面,其中有三行的网格。在第一行中,我有两个按钮用作切换按钮。此按钮将显示或折叠第二行和第三行的内容。Windows Phone 8.1网格行自动滚动

在第二行我有形式大于屏幕和第三排有ListView的更大的用粘和分组风格的头

现在的问题是,在第二个网格行的内容更我一直页水平滚动,但当我把页面级滚动比它会停止粘滞标题效果在ListView和当我删除页面级滚动然后ListView粘性标题开始工作正常,但形式比屏幕大的第二行不会滚动。所以我正在寻找让我第二排自动滚动的东西。

请有人帮忙解决它。

My XAML Code

<Page.Resources> 
     <Style TargetType="Button" x:Name="ToggleButtonStyle"> 
      <Setter Property="Width" Value="195"/> 
      <Setter Property="FontFamily" Value="Copperplate Gothic Light"/> 
      <Setter Property="FontSize" Value="15"/> 
      <Setter Property="BorderBrush" Value="#0c3757"/> 
      <Setter Property="BorderThickness" Value="1"/> 
      <Setter Property="VerticalAlignment" Value="Center"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Grid Background="{Binding Background, RelativeSource={RelativeSource Mode=TemplatedParent}}" 
         Height="40"> 
          <Border BorderBrush="{TemplateBinding BorderBrush}" 
          BorderThickness="{TemplateBinding BorderThickness}"/> 
          <TextBlock x:Name="ButtonTextElement" Foreground="{Binding Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}" 
          Text="{TemplateBinding Content}" VerticalAlignment="{TemplateBinding VerticalAlignment}" TextAlignment="Center" /> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <Style TargetType="TextBlock" x:Name="Label"> 
      <Setter Property="Foreground" Value="Black"/> 
      <Setter Property="Margin" Value="6,6"/> 
      <Setter Property="FontSize" Value="14"/> 
     </Style> 
     <Style TargetType="TextBox" x:Name="Text"> 
      <Setter Property="Margin" Value="6,0"/> 
      <Setter Property="Background" Value="#e6e6e6"/> 
      <Setter Property="HorizontalAlignment" Value="Stretch"/> 
     </Style> 
     <Style TargetType="Button" x:Name="DropDownButton"> 
      <Setter Property="Background" Value="#e6e6e6"/> 
      <Setter Property="Foreground" Value="Black"/> 
      <Setter Property="HorizontalAlignment" Value="Stretch"/> 
      <Setter Property="BorderThickness" Value="0"/> 
      <Setter Property="Margin" Value="{Binding Margin}"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Grid Background="{TemplateBinding Background}" Height="35"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="Auto"/> 
           <ColumnDefinition Width="Auto"/> 
           <ColumnDefinition Width="*"/> 
          </Grid.ColumnDefinitions> 
          <Image Source="{Binding Tag, RelativeSource={RelativeSource Mode=TemplatedParent}}" 
          Stretch="None" Grid.Column="0" HorizontalAlignment="Left"/> 
          <TextBlock x:Name="ButtonTextElement" 
         Text="{TemplateBinding Content}" 
         Foreground="{TemplateBinding Foreground}" Grid.Column="1" 
         VerticalAlignment="{TemplateBinding VerticalAlignment}" /> 
          <Image Source="{TemplateBinding local:BookAFlight.ImageSource}" 
             Stretch="Uniform" Grid.Column="2" HorizontalAlignment="Right" 
             Height="35"/> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <!--KAC Offices Style--> 
     <Style x:Key="RegionContainerStyle" TargetType="ListViewHeaderItem"> 
      <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
     </Style> 
     <DataTemplate x:Key="RegionTemplate"> 
      <Border Background="Red"> 
       <TextBlock Foreground="White" FontSize="28" 
            Text="{Binding Name}"/> 
      </Border> 
     </DataTemplate> 
     <DataTemplate x:Name="CityTemplate"> 
      <TextBlock Text="{Binding Name}" FontSize="24" MaxWidth="320" TextTrimming="WordEllipsis" 
           Foreground="Black"/> 
     </DataTemplate> 
     <model:GroupedModel x:Key="VM"/> 
     <CollectionViewSource x:Key="CVS" Source="{Binding Regions, Source={StaticResource VM}}" 
           IsSourceGrouped="True" 
           ItemsPath="Cities"/> 
    </Page.Resources> 
    <!--<ScrollViewer VerticalScrollBarVisibility="Auto">--> 
    <Grid x:Name="LayoutRoot" Background="#FFFFFF"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition /> 
     </Grid.RowDefinitions> 
     <Grid Grid.Row="0" HorizontalAlignment="Center"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto"/> 
       <ColumnDefinition Width="Auto"/> 
      </Grid.ColumnDefinitions> 
      <Button Content="$$Contact Us$$" x:Name="btnContactUs" x:Uid="ContactUs" 
       Style="{StaticResource ToggleButtonStyle}" Grid.Column="0" Foreground="White" 
       Margin="7,7,0,0" Click="ContactUs_Click" Background="#0c3757" /> 
      <Button Content="$$KACOffices$$" x:Name="KACOffices" x:Uid="KACOffices" Foreground="Gray" 
       Style="{StaticResource ToggleButtonStyle}" Grid.Column="1" 
       Margin="0,7,7,0" Click="KACOffices_Click"/> 
     </Grid> 
     <Grid Grid.Row="1" x:Name="grdContactUs" Visibility="Visible"> 
      <Grid.RowDefinitions> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
      </Grid.RowDefinitions> 
      <!--<StackPanel x:Name="spContactUs" ScrollViewer.VerticalScrollMode="Auto">--> 
       <TextBlock x:Uid="FullName" Text="$$Full Name$$" Grid.Row="0" 
           Style="{StaticResource Label}"/> 
       <TextBox x:Name="FullName" Style="{StaticResource Text}" Grid.Row="1" KeyDown="FullName_KeyDown"/> 
       <TextBlock x:Uid="Company" Text="$$Company$$" Grid.Row="2" 
           Style="{StaticResource Label}"/> 
       <TextBox x:Name="Company" Style="{StaticResource Text}" Grid.Row="3" KeyDown="Company_KeyDown"/> 
       <TextBlock x:Uid="Telephone" Text="$$Telephone$$" Grid.Row="4" 
           Style="{StaticResource Label}"/> 
       <TextBox x:Name="Telephone" Style="{StaticResource Text}" Grid.Row="5" KeyDown="Telephone_KeyDown"/> 
       <TextBlock x:Uid="Email" Text="$$Email$$" Grid.Row="6" 
           Style="{StaticResource Label}"/> 
       <TextBox x:Name="Email" Style="{StaticResource Text}" Grid.Row="7" KeyDown="Email_KeyDown"/> 
       <TextBlock x:Uid="ContactArea" Text="$$Contact Area$$" Grid.Row="8" 
           Style="{StaticResource Label}"/> 
       <Grid Grid.Row="9" Height="35"> 
        <Button Style="{StaticResource DropDownButton}" x:Name="ContactArea" 
       local:BookAFlight.ImageSource="/Assets/drop-down-icon.png" Margin="6,0"> 
         <Button.Flyout> 
          <ListPickerFlyout x:Name="contactAreaListPicker" ItemsSource="{Binding ContactAreas}"> 
           <ListPickerFlyout.ItemTemplate> 
            <DataTemplate> 
             <StackPanel> 
              <TextBlock> 
               <Run Text="{Binding contactArea}"/> 
              </TextBlock> 
              <Line X1="0" X2="480" Y1="0" Y2="0" Grid.Row="1" Grid.ColumnSpan="2" VerticalAlignment="Bottom" StrokeThickness="1" Stroke="LightGray" /> 
             </StackPanel> 
            </DataTemplate> 
           </ListPickerFlyout.ItemTemplate> 
          </ListPickerFlyout> 
         </Button.Flyout> 
        </Button> 
       </Grid> 
       <TextBlock x:Uid="Occupation" Text="$$Occupation$$" Grid.Row="10" 
           Style="{StaticResource Label}"/> 
       <TextBox x:Name="Occupation" Style="{StaticResource Text}" Grid.Row="11" KeyDown="Occupation_KeyDown"/> 
       <TextBlock x:Uid="Comments" Text="$$Comments$$" Grid.Row="12" 
           Style="{StaticResource Label}"/> 
       <TextBox x:Name="Comments" Style="{StaticResource Text}" Grid.Row="13" 
           AcceptsReturn="True" Height="80"/> 
       <Button x:Name="Submit" x:Uid="Submit" Background="#0c3757" Grid.Row="14" 
           Foreground="White" Content="$$Submit$$" Margin="25,0,25,0" 
           HorizontalAlignment="Stretch" Click="Submit_Click"/> 
      <!--</StackPanel>--> 
     </Grid> 
     <Grid Grid.Row="2" x:Name="grdKACOffices" Visibility="Collapsed"> 
      <lv:DebugListView x:Name="TheListView" 
      ItemsSource="{Binding Source={StaticResource CVS}}" 
      ItemTemplate="{StaticResource CityTemplate}"> 
       <ListView.GroupStyle> 
        <GroupStyle HeaderTemplate="{StaticResource RegionTemplate}" 
               HeaderContainerStyle="{StaticResource RegionContainerStyle}"/> 
       </ListView.GroupStyle> 
      </lv:DebugListView> 
     </Grid> 
    </Grid> 
    <!--</ScrollViewer>--> 

附: : - 这是Silverlight的Windows Phone 8.1应用程序

回答

2

一个简单的解决方案是将Grid在你的第二行放入ScrollViewer

它会工作,但用户体验将是真的,有一个页面有两个单独的可滚动部分。我建议你将页面分成两个单独的页面,一个从第二行开始,另一个从Grid开始,另一个从第三行开始,从ListView开始。

相关问题