2015-09-11 1 views
1

J'ai créé Page où il y a une grille avec trois lignes. Dans la première rangée j'ai deux bouton fonctionnant comme bouton bascule. Ce bouton affichera ou réduira le contenu de la deuxième et troisième rangée.Windows Phone 8.1 Grille Ligne Auto Scroll

En deuxième ligne je forme plus grand que l'écran et en troisième ligne, il ListView avec Sticky and Groupés style en-tête

Maintenant, la question est que le contenu de la deuxième ligne de la grille est plus j'ai gardé défiler niveau Page mais quand je place le défilement au niveau de la page, cela arrêtera l'effet d'en-tête dans ListView et quand j'enlèverai le défilement au niveau de la page, l'en-tête ListView commencera à fonctionner correctement mais la seconde rangée qui aura une forme plus grande que l'écran ne défilera pas. Donc, je regardais quelque chose qui fait défiler mon deuxième rang automatique.

S'il vous plaît quelqu'un d'aider à le résoudre.

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>--> 

post-scriptum : - Il s'agit de l'application Silverlight Windows Phone 8.1

Répondre

2

Une solution simple serait de mettre le juste Grid dans votre deuxième rangée dans un ScrollViewer.

Cela fonctionnera mais l'expérience utilisateur serait vraiment, ayant une page avec deux parties défilantes distinctes. Je vous suggère de diviser à la page en deux pages distinctes, l'une avec le Grid de la deuxième rangée et l'autre avec le ListView de la troisième rangée.