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

时间:2019-02-21 18:27:28

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

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

但是,当使用触摸笔或笔时,它们保持隐藏状态,这可能使用户感到迷惑,不希望看到其他内容。

我希望导航按钮始终可见。我该怎么办?

1 个答案:

答案 0 :(得分:0)

我们需要创建一个自定义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类的位置来添加名称空间声明。

默认FlipView的问题在于,滚动按钮仅在指向其上方时才会显示出来,而对于触摸设备,这是我们所没有的。为了使事情变得更复杂,内部代码在加载时将模板按钮的不透明度设置为零,因此我们需要更改两个导航按钮的名称,以便内部代码正常降级并允许它们在所有时间。然后,我们添加了代码,以在单击导航按钮时进行处理,因此我们不会在首页上显示上一个按钮,也不在最后一页上显示下一个按钮。

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

edit CustomFlipView 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属性从 PreviousButtonHorizo​​ntal 重命名为 MyPreviousButtonHorizo​​ntal ,并将 NextButtonHorizo​​ntal 重命名为 MyNextButtonHorizo​​ntal 与我们之前编写的代码匹配。

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