UWP:在ItemsPanel内部的ScrollViewer

时间:2016-06-01 08:28:06

标签: c# xaml uwp windows-10-universal uwp-xaml

我想创建一个pivot,使用DataBinding到PivotItem列表。 这些项目中的每一项都应该由ScrollViewer包围。 不幸的是,它不像我想的那样工作....

我的代码:

的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(第二个UserControl是相同的):

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

视图模型:

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;

        }
    }
}

当我启动项目时出现以下消息:“程序'[2940] name.exe'已退出,代码为-1(0xffffffff)。

但是当我用Grid或StackPanel替换ScrollViewer时它会起作用但是我不会看到我的所有PivotItem。

有什么想法吗?

2 个答案:

答案 0 :(得分:0)

(过时,问题已更新)

您只能将ItemControls设置为ItemsPanelTemplate,而Scrollviewer不是ItemsControl,而是ContentControl(它只包装一个子项,不显示多个项目。)

此外,ItemsPanelTemplate是您尝试实现的目标的错误目标:如果要更改数据透视表内部的数据透视表项的内容,只需设置常规ItemTemplate

<Pivot>
  <Pivot.ItemTemplate>
    <DataTemplate>
      <ScrollViewer>
        <!-- your content display here -->
      </ScrollViewer>
    </DataTemplate>
  </Pivot.ItemTemplate>
</Pivot>

答案 1 :(得分:0)

(提出一个新的答案,因为问题改变了它的背景。)

如果你使用PivotItems的列表,看起来像Pivot Control一样搞砸了 s ItemsSource

无论如何:这不是DataBindings的用途。

顾名思义,您绑定到数据,而不是控件 UI元素PivotItems是UI控件(尽管它们更像逻辑而不是可视化表示),并且不应该是ViewModel的一部分。

只需将ViewModel中的类型更改为某些实际数据(String,Object或您创建的任何类的List),它就可以正常工作

或者,如果要在Pivot Control中放置固定内容,则根本不需要绑定它,只需将PivotItem直接放在Xaml中:

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