UWP: ScrollViewer inside an ItemsPanel

Question

I want to create a pivot, with a DataBinding to a List of PivotItems. Each of these items should be surrounded by a ScrollViewer. Unfortunately it doesn't work the way I was thinking....

My code:

MainPage:

<Page
x:Class="PivotSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PivotSample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Pivot Title="Pivot" SelectedItem="{Binding CurrentPivotItem, Mode=TwoWay}" ItemsSource="{Binding PivotItems}">
        <Pivot.ItemTemplate>
            <DataTemplate>
                <ScrollViewer>
                    <UserControl Content="{Binding Content}"/>
                </ScrollViewer>
            </DataTemplate>
        </Pivot.ItemTemplate>
    </Pivot>
</Grid>

UserControl (the second UserControl is the same):

<UserControl
x:Class="PivotSample.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PivotSample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

<StackPanel Background="Yellow">
    <TextBlock Text="Test" FontSize="30" HorizontalAlignment="Center"/>
    <TextBlock Text="Test" FontSize="30" HorizontalAlignment="Center"/>
    <TextBlock Text="Test" FontSize="30" HorizontalAlignment="Center"/>
    <TextBlock Text="Test" FontSize="30" HorizontalAlignment="Center"/>
    <TextBlock Text="Test" FontSize="30" HorizontalAlignment="Center"/>
    <TextBlock Text="Test" FontSize="30" HorizontalAlignment="Center"/>
    <TextBlock Text="Test" FontSize="30" HorizontalAlignment="Center"/>
    <TextBlock Text="Test" FontSize="30" HorizontalAlignment="Center"/>
    <TextBlock Text="Test" FontSize="30" HorizontalAlignment="Center"/>
    <TextBlock Text="Test" FontSize="30" HorizontalAlignment="Center"/>
    <TextBlock Text="Test" FontSize="30" HorizontalAlignment="Center"/>
    <TextBlock Text="Test" FontSize="30" HorizontalAlignment="Center"/>
    <TextBlock Text="Test" FontSize="30" HorizontalAlignment="Center"/>
    <TextBlock Text="Test" FontSize="30" HorizontalAlignment="Center"/>
    <TextBlock Text="Test" FontSize="30" HorizontalAlignment="Center"/>
    <TextBlock Text="Test" FontSize="30" HorizontalAlignment="Center"/>
    <TextBlock Text="Test" FontSize="30" HorizontalAlignment="Center"/>
</StackPanel>

ViewModel:

public class ViewModelMainPage : ViewModelBase
{
    private IList<PivotItem> _pivotItems;
    private PivotItem _currentPivotItem;

    public IList<PivotItem> PivotItems
    {
        get { return _pivotItems; }
        set { _pivotItems = value; }
    }

    public PivotItem CurrentPivotItem
    {
        get { return _currentPivotItem; }
        set
        {
            OnPropertyChanged(nameof(CurrentPivotItem));
            _currentPivotItem = value;

        }
    }
}

When I start the project comes following message: "The program '[2940] name.exe' has exited with code -1 (0xffffffff).

But when I replace the ScrollViewer with a Grid or StackPanel it will works but then I won't see all of my PivotItem.

Any ideas?

Kai Brummund Kai Brummund · Accepted Answer · 2016-06-02T15:20:49

(Putting a new answer, as the question has changed it's context.)

Looks like the Pivot Control screws up, if you use a list of PivotItems at it' s ItemsSource.

Anyway: That's not the way DataBindings are intended.

As the name suggests, you bind to Data, not to controls or UI Elements. PivotItems are UI Controls (although they are more of a logical than a visual representation) and should not be part of your ViewModel.

Just change the type in your ViewModel to some actual data (a List of String, Object, or whatever classes you create) and it works fine

Alternatively, if you want to place a fixed content inside a Pivot Control, you don't need to bind it at all and you can just place the PivotItems directly in Xaml:

<Pivot>
  <PivotItem Header="First Item">
    <!-- your content display here -->
  </PivotItem>
  <PivotItem Header="Secont Item">
    <!-- your content display here -->          
  </PivotItem>
</Pivot>

UWP: ScrollViewer inside an ItemsPanel

2 Answers