始终在 UWP 中的 FlipView 控件上显示导航箭头

Question

当使用鼠标悬停在通用 Windows 平台 (UWP) FlipView 控件上时，会显示 previous/next 导航按钮。

但是，当使用触摸或笔时，它们会保持隐藏状态，这可能会使用户感到困惑，因为他们不期待额外的内容。

我希望导航按钮始终可见。我该怎么做？

Answer 1

我们需要创建自定义 FlipView。从下面显示的代码开始：

public class CustomFlipView : FlipView
{
    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        SelectionChanged += (s,e) => UpdateNavigationButtonsVisibility();

        Button prev = GetTemplateChild("MyPreviousButtonHorizontal") as Button;
        prev.Click += OnBack;
        prev.Visibility = Visibility.Collapsed;

        Button next = GetTemplateChild("MyNextButtonHorizontal") as Button;
        next.Click += OnNext;
        next.Visibility = Visibility.Collapsed;
    }

    private void OnBack(object sender, RoutedEventArgs e)
    {
        if (Items.Any())
        {
            SelectedIndex--;
            UpdateNavigationButtonsVisibility();
        }
    }

    private void OnNext(object sender, RoutedEventArgs e)
    {
        if (Items.Any())
        {
            SelectedIndex++;
            UpdateNavigationButtonsVisibility();
        }
    }

    private void UpdateNavigationButtonsVisibility()
    {
        Button prev = GetTemplateChild("MyPreviousButtonHorizontal") as Button;
        Button next = GetTemplateChild("MyNextButtonHorizontal") as Button;

        if (SelectedIndex < 1)
            prev.Visibility = Visibility.Collapsed;
        if (SelectedIndex == Items.Count - 1)
            next.Visibility = Visibility.Collapsed;
        if (Items.Count > 1 && SelectedIndex != Items.Count - 1)
            next.Visibility = Visibility.Visible;
        if (Items.Count > 1 && SelectedIndex > 0)
            prev.Visibility = Visibility.Visible;
    }
}

在打开需要插入 CustomFlipView 的 XAML 文件之前构建项目。然后将控件添加到您的 XAML;您可能需要根据创建 CustomFlipView class.

的位置添加命名空间声明

默认 FlipView 的问题是滚动按钮只有在指向它时才会显示自己，而在触摸设备的情况下我们没有。使事情变得更复杂的是，内部代码在加载时将模板的按钮不透明度设置为零，因此我们需要更改两个导航按钮的名称，以便内部代码优雅地降级并允许它们一直可见。然后我们添加代码来处理单击导航按钮时的情况，这样我们就不会在第一页上显示上一个按钮或在最后一页上显示下一个按钮。

要覆盖导航按钮的名称，我们需要编辑控件的模板。最快的方法是打开 Document Outline 窗格，右键单击 CustomFlipView → Edit Template → 编辑副本.

很多代码会出现在您的 XAML 中，但要查找的重要部分如下所示：

<Button x:Name="MyPreviousButtonHorizontal" HorizontalAlignment="Left" Height="70" IsTabStop="False" Template="{StaticResource HorizontalPreviousTemplate}" UseSystemFocusVisuals="False" VerticalAlignment="Center" Width="40"/>
<Button x:Name="MyNextButtonHorizontal" HorizontalAlignment="Right" Height="70" IsTabStop="False" Template="{StaticResource HorizontalNextTemplate}" UseSystemFocusVisuals="False" VerticalAlignment="Center" Width="40"/>

注意我将 x:Name 属性从 PreviousButtonHorizontal 重命名为 MyPreviousButtonHorizontal 和 NextButtonHorizontal 到 MyNextButtonHorizontal 以匹配我们之前编写的代码隐藏。

现在 CustomFlipView 应该在使用触摸和笔时显示导航箭头，而不仅仅是鼠标。

Answer 2

谢谢你上面的解决方案，对我很有用。我解决了你提到的问题，通过以下方式修改 OnApplyTemplate 方法，总是在你指向后显示按钮：

protected override void OnApplyTemplate() {
    base.OnApplyTemplate();
    SelectionChanged += (s, e) => UpdateNavigationButtonsVisibility();

    Button prev = GetTemplateChild("MyPreviousButtonHorizontal") as Button;
    prev.Click += OnBack;
    Button next = GetTemplateChild("MyNextButtonHorizontal") as Button;
    next.Click += OnNext;
            
    UpdateNavigationButtonsVisibility();
}

所以现在，随着控件的显示，箭头也会显示。

始终在 UWP 中的 FlipView 控件上显示导航箭头

Always show the navigation arrows on a FlipView control in UWP

c#

xaml

flipview

uwp

windows-10-universal