在UWP中如何通过自定义按钮实现多项目FlipView的翻页功能

实现方案 #

1. XAML布局配置 #

你原来设置的IsHitTestVisible="False"可以保留，作用是禁用FlipView自带的直接交互，仅通过自定义按钮控制切换。你需要先给FlipView设置唯一标识名，同时新增切换按钮：

<!-- FlipView 基础配置 -->
<FlipView x:Name="DemoFlipView" 
          IsHitTestVisible="False"
          PointerWheelChanged="DemoFlipView_PointerWheelChanged">
    <!-- 此处替换为你自己的FlipView子项内容 -->
    <FlipViewItem Content="第一页内容" />
    <FlipViewItem Content="第二页内容" />
    <FlipViewItem Content="第三页内容" />
</FlipView>

<!-- 自定义切换按钮组 -->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,20,0,0">
    <Button x:Name="PrevBtn" Content="上一项" Click="PrevBtn_Click" Margin="0,0,10,0"/>
    <Button x:Name="NextBtn" Content="下一项" Click="NextBtn_Click"/>
</StackPanel>

2. 切换逻辑实现 #

在对应页面的后台代码中添加按钮点击事件处理，如果你需要保留滚轮切换能力，同时补充PointerWheelChanged的逻辑即可：

// 上一项按钮点击逻辑
private void PrevBtn_Click(object sender, RoutedEventArgs e)
{
    if (DemoFlipView.Items.Count == 0) return;
    // 此处默认开启翻页循环，不需要循环可把三元运算替换为<0时直接return
    DemoFlipView.SelectedIndex = DemoFlipView.SelectedIndex > 0 
        ? DemoFlipView.SelectedIndex - 1 
        : DemoFlipView.Items.Count - 1;
}

// 下一项按钮点击逻辑
private void NextBtn_Click(object sender, RoutedEventArgs e)
{
    if (DemoFlipView.Items.Count == 0) return;
    // 此处默认开启翻页循环，不需要循环可把三元运算替换为超过最大索引时直接return
    DemoFlipView.SelectedIndex = DemoFlipView.SelectedIndex < DemoFlipView.Items.Count - 1 
        ? DemoFlipView.SelectedIndex + 1 
        : 0;
}

// 滚轮切换逻辑（不需要滚轮切换可直接删除该事件和对应绑定）
private void DemoFlipView_PointerWheelChanged(object sender, PointerRoutedEventArgs e)
{
    var delta = e.GetCurrentPoint(sender as UIElement).Properties.MouseWheelDelta;
    if (delta > 0)
    {
        PrevBtn_Click(null, null);
    }
    else
    {
        NextBtn_Click(null, null);
    }
    e.Handled = true;
}

注意事项 #

• 不需要滚轮切换功能时，直接删掉PointerWheelChanged事件绑定和对应处理逻辑即可
• 不要修改FlipView的SelectionMode属性，保持默认的Single即可正常触发SelectedIndex变更

内容的提问来源于stack exchange，提问作者Shashank Singh