CODEWITHSUNDEEP
xamllistviewscrollwin-universal-app
doubleJ
doubleJ

Reputation: 1216

XAML ListView Within Pivot Allows Diagonal Scrolling

I'm converting my old Windows Phone 7 app to a Windows 10 Universal app and a functionality change is irritating me.

My old app was all background logic pushing content to the UI (bad for maintainability and such) and I'm wanting to start separating those concerns.
Previously, I had a <StackPanel> that was filled with a bunch of <TextBlock>. Now, I'm working with <ObservableCollection> and <ListView>. The problem is that <ListView> is within <Pivot> and it's allowing me to scroll, diagonally. It's very confusing, for the user, and it just looks like an oversight.

XAML:

    <Pivot x:Name="PhoneUi" Title="Daily Bible Reading">
        <PivotItem Header="Today's Chapter">
            <ListView x:Name="todayschapter" ItemsSource="{Binding}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Margin="-10 0 0 16">
                            <TextBlock Text="{Binding Reference}" FontSize="16" FontWeight="SemiBold" TextWrapping="Wrap"/>
                            <TextBlock Text="{Binding Text}" FontSize="24" TextWrapping="Wrap"/>
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </PivotItem>
        <PivotItem Header="Reading Schedule">
            <ListView x:Name="readingschedule" ItemsSource="{Binding}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Margin="-10 0 0 16">
                            <TextBlock Text="{Binding Date}" FontSize="16" FontWeight="SemiBold" TextWrapping="Wrap"/>
                            <TextBlock Text="{Binding Chapter}" FontSize="24" TextWrapping="Wrap"/>
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </PivotItem>
    </Pivot>

Interestingly enough, the second <ListView> doesn't have the issue. Its content isn't long enough, to enable vertical scrolling. The first <ListView>, though, is always long enough.

With looking through the documentation, for Pivot and ListView, I haven't seen any property pertaining to scroll direction or disabling.

Any ideas on how to only allow horizontal scrolling, on <Pivot>, and vertical scrolling, on <ListView>?

Upvotes: 1

Views: 357

Answers (1)

doubleJ
doubleJ

Reputation: 1216

With the help of Universal App Live Chat Support, I found that I need to add the ScrollViewer.IsVerticalRailEnabled="True" attached property.

My code is, now...

<ListView x:Name="todayschapter" ItemsSource="{Binding}" ScrollViewer.IsVerticalRailEnabled="True">

The <Pivot> scrolls, horizontally, and the <ListView> scrolls, vertically.

Upvotes: 2

Related Questions