Windows Phone 8.1网格行自动滚动

时间:2015-09-11 11:12:52

标签: xaml silverlight windows-phone-8.1 silverlight-5.0

我创建了Page,其中有三行网格。在第一行中,我有两个按钮作为切换按钮。此按钮将显示或折叠第二行和第三行的内容。

在第二行中,我的格式比屏幕大,在第三行中,ListView使用Sticky和Grouped Style Header

现在的问题是,由于第二个网格行中的内容更多,我保持页面级别滚动,但是当我将页面级别滚动时,它将在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>-->

P.S。 : - 这是Silverlight Windows Phone 8.1应用程序

1 个答案:

答案 0 :(得分:2)

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

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