Always show the navigation arrows on a FlipView control in UWP

Question

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?

Answer 1

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

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.

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.

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.

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"/>

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

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