Xamarin формирует панировочные сухари с горизонтальной раскруткой

Question

У меня есть приложение xamarin.forms, в котором я пытаюсь добиться определенного c пользовательского интерфейса. Пожалуйста, найдите привязанное изображение.

.

Как вы можете видеть, это представление списка и под ним есть хлебные крошки. Я пытаюсь добиться того, чтобы пользователь щелкнул любой из других элементов, таких как «магазины» или «пользователи» в хлебных крошках, а затем верхний макет переместился по горизонтали и показал другой вид списка. Где я застрял, я хочу исправить хлебные крошки внизу и для изменения нужен только верхний макет т.е. макет представления списка. Как я могу этого добиться. Любые идеи будут очень полезны.

Что я думаю, помещая четыре списка в горизонтальный вид прокрутки. Но это лучший подход?

Answer 1

Этого можно добиться с помощью простой анимации перевода.

Простая реализация идеи использования перевода. Изменяйте по необходимости.

Макет XAML:

<StackLayout>
    <Grid x:Name="rotatingView">
        <ListView
            ...../>
        <ListView
            TranslationX="{Binding Width, Source={x:Reference rotatingView}}"
            ...../>
        <ListView
            TranslationX="{Binding Width, Source={x:Reference rotatingView}}"
            ...../>
        <ListView
            TranslationX="{Binding Width, Source={x:Reference rotatingView}}"
            ...../>
    </Grid>
    <Button
        Text="0"
        Clicked="Button_Clicked"/>
    <Button
        Text="1"
        Clicked="Button_Clicked"/>
    <Button
        Text="2"
        Clicked="Button_Clicked"/>
    <Button
        Text="3"
        Clicked="Button_Clicked"/>
</StackLayout>

Xaml.cs нажал:

    int previousSelectedIndex = 0;

    private async void Button_Clicked(System.Object sender, System.EventArgs e)
    {
        Button selectedtab = (sender as Button);
        int selectedViewIndex = int.Parse(selectedtab.Text);
        VisualElement previousView = rotatingView.Children[previousSelectedIndex];
        VisualElement selectedView = rotatingView.Children[selectedViewIndex];
        bool isMovingForward = true;

        if (previousSelectedIndex < selectedViewIndex)
        {
            isMovingForward = true;

        }
        else if(previousSelectedIndex > selectedViewIndex)
        {
            isMovingForward = false;
        }

        if (selectedViewIndex != previousSelectedIndex)
        {
            selectedView.TranslationX = rotatingView.Width * (isMovingForward ? 1 : -1);

            await Task.WhenAll(
                selectedView.TranslateTo(0, 0),
                previousView.TranslateTo(rotatingView.Width * (isMovingForward ? -1 : 1), 0));

        }

        this.previousSelectedIndex = selectedViewIndex;
    }

Здесь я использовал текст кнопок для выбора индекса вида. Надеюсь, это поможет.

Answer 2

, если вы ищете навигационный элемент управления. Я создал элемент управления, который будет генерировать его автоматически, и его можно настраивать.

https://github.com/IeuanWalker/Xamarin.Forms.Breadcrumb