始终在 UWP 中的 FlipView 控件上显示导航箭头 [英] Always show the navigation arrows on a FlipView control in UWP

问题描述

当使用鼠标并将鼠标悬停在通用 Windows 平台 (UWP) 上时 FlipView 控件将显示上一个/下一个导航按钮.

When using a mouse and hovering over a Universal Windows Platform (UWP) FlipView control the previous/next navigation buttons are shown.

但是，当使用触摸或笔时，它们会保持隐藏状态，这可能会使用户误以为不需要其他内容.

However, when using touch or pen, they remain hidden which may confuse users into not expecting additional content.

我希望导航按钮始终可见.我该怎么做?

I would like navigation buttons to always be visible. How can I do this?

推荐答案

我们需要创建一个自定义的 FlipView.从下面显示的代码开始:

We need to create a custom FlipView. Start with the code shown below:

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 类的位置添加命名空间声明.

Build the project before opening the XAML file where you need to insert the CustomFlipView. Then add the control to your XAML; you may need to add namespace declaration depending where you created the CustomFlipView class.

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

The problem with the default FlipView is the scroll buttons reveal themselves only when pointing over it, something we do not have in case of a touch device. To make things more complicated, internal code sets the template’s buttons opacity to zero when loaded, so we need to change the name of both navigation buttons so the internal code gracefully degrades and allows them to be visible all the time. Then we add code to handle when the navigation buttons are clicked so we don't show previous button on first page or show next button on last page.

要覆盖导航按钮的名称，我们需要编辑控件的模板.最快的方法是打开文档大纲窗格，右键单击您的CustomFlipView → 编辑模板 → 编辑副本.

To overwrite the names of navigation buttons, we need to edit the control's template. The quickest way is by opening the Document Outline pane, right-clicking your CustomFlipView → Edit Template → Edit a Copy.

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

A lot of code will appear in your XAML, but the important part to find looks like this:

<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 属性从 PreviousButtonHorizo​​ntal 重命名为 MyPreviousButtonHorizo​​ntal，将 NextButtonHorizo​​ntal 重命名为 MyNextButtonHorizo​​ntal 与我们之前编写的代码隐藏相匹配.

Note I renamed the x:Name properties from PreviousButtonHorizontal to MyPreviousButtonHorizontal and NextButtonHorizontal to MyNextButtonHorizontal to match with the code-behind we wrote earlier.

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

Now the CustomFlipView should display navigation arrows when using touch and pen, not just mouse.

这篇关于始终在 UWP 中的 FlipView 控件上显示导航箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！