如何在 Pivot Control UWP 上启用拖放

Question

我真的很喜欢 Pivot Control 以及如何在触摸屏上的页面之间滑动。它像 Tab 控件一样响应并且运行良好。我的问题是我想拖放以重新排序枢轴项目。任何帮助将不胜感激。这是我的枢轴代码。

<Pivot x:Name="PivotMain" CanDrag="True" AllowDrop="True" FontFamily="Segoe UI" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0" BorderBrush="Black"  >
                <Pivot.HeaderTemplate>
                    <DataTemplate>
                        <Grid Margin="0,0,0,0">
                            <TextBlock Text="{Binding}" FontSize="13" Margin="0,0,0,0" />
                        </Grid>
                    </DataTemplate>
                </Pivot.HeaderTemplate>
                <PivotItem x:Name="Main" Header="Home" CanDrag="True" FontSize="11" Margin="10,10,10,10" FontFamily="Segoe UI" HorizontalAlignment="Stretch">
                    <WebView x:Name="Home" DefaultBackgroundColor="Transparent" NavigationCompleted="NavigationCompleted"  NewWindowRequested="NewWindowRequested" VerticalAlignment="Stretch" />
                </PivotItem>
            </Pivot>

Answer 1

Pivot 控件继承自 ItemsControl 但不是 ListViewBase。所以它不包含CanDragItemsCanReorderItems 属性，你不能像ListView 那样对它们重新排序。 Pivot 有ItemsSource 属性，这意味着你可以绑定ObservableCollection。并使用重新排序的数据源对其进行重新排序。

<Pivot
    x:Name="PivotMain"
    Margin="0,0,0,0"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    AllowDrop="True"
    BorderBrush="Black"
    FontFamily="Segoe UI"
    >
    <Pivot.ItemTemplate>
        <DataTemplate>
            <PivotItem
                CanDrag="True"
                FontFamily="Segoe UI"
                FontSize="11"
                Header="{Binding}"
                >
                <Frame />
            </PivotItem>
        </DataTemplate>
    </Pivot.ItemTemplate>
    <Pivot.HeaderTemplate>
        <DataTemplate>
            <Grid Margin="0,0,0,0">
                <TextBlock
                    Margin="0,0,0,0"
                    FontSize="13"
                    Text="{Binding}"
                    />
            </Grid>
        </DataTemplate>
    </Pivot.HeaderTemplate>
</Pivot>

背后的代码

 ObservableCollection<string> Items;
 public MainPage()
 {
     Items = new ObservableCollection<string>() { "first", "second", "third", "forth" };
     PivotMain.ItemsSource = Items;
     this.InitializeComponent();
 }

重新排序

var _timer = new Timer(async _ =>
{
    Random r = new Random();
    var randomIndex = r.Next(0, Items.Count - 1);
    await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => {
        Items.Insert(4, Items[randomIndex]);
        Items.RemoveAt(randomIndex);
    });
}
, null, 0, 1000);