Всегда отображать стрелки навигации на элементе управления FlipView в UWP - PullRequest
Новая
       49

Всегда отображать стрелки навигации на элементе управления FlipView в UWP

0 голосов
/ 21 февраля 2019

При использовании мыши и наведении курсора на универсальную платформу Windows (UWP) FlipView отображаются предыдущие / следующие кнопки навигации.

Однако при использовании касания или пера они остаются скрытыми, что может привести к путаницепользователи не ожидают дополнительного контента.

Я бы хотел, чтобы кнопки навигации всегда были видны.Как я могу это сделать?

1 Ответ

0 голосов
/ 21 февраля 2019

Нам нужно создать кастом 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;
    }
}

Создайте проект перед открытием файла XAML, в который необходимо вставить CustomFlipView.Затем добавьте элемент управления в свой 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"/>

Примечание Iпереименовали свойства x:Name из PreviousButtonHorizontal в MyPreviousButtonHorizont * и NextButtonHor Horizontal * в MyNextButtonHorizontal , чтобы соответствовать коду кода, который мы написали ранее.

Теперь CustomFlipView должны отображать стрелки навигации при использовании касания и пера, а не только мыши.

...