始終在 UWP 中的 FlipView 控件上顯示導航箭頭

Question

使用鼠標並將鼠標懸停在通用 Windows 平台 (UWP) FlipView控件上時，會顯示上一個/下一個導航按鈕。

但是，在使用觸摸或筆時，它們會保持隱藏狀態，這可能會使用戶誤以為不需要其他內容。

我希望導航按鈕始終可見。 我怎樣才能做到這一點？

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類的位置添加名稱空間聲明。

默認FlipView的問題在於，滾動按鈕僅在指向它時才顯示出來，而對於觸摸設備，這是我們沒有的。 為了使事情變得更復雜，內部代碼在加載時將模板按鈕的不透明度設置為零，因此我們需要更改兩個導航按鈕的名稱，以使內部代碼優雅地降級並使它們始終可見。 然后，當單擊導航按鈕時，我們添加了處理代碼，因此我們不會在首頁上顯示上一個按鈕，也不在最后一頁上顯示下一個按鈕。

要覆蓋導航按鈕的名稱，我們需要編輯控件的模板。 最快的方法是打開“ 文檔大綱”窗格，右鍵單擊CustomFlipView → 編輯模板 → 編輯副本 。

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應該在使用觸摸和筆（而不僅僅是鼠標）時顯示導航箭頭。

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();
}

所以現在，當顯示控件時，箭頭也會顯示。