Xamarin 使用水平滚动布局形成面包屑答案

【问题标题】：Xamarin forms breadcrumbs with horizontal scroll layoutXamarin 使用水平滚动布局形成面包屑
【发布时间】：2020-04-08 00:28:23
【问题描述】：

我有一个 xamarin.forms 应用程序，我正在尝试在其中实现特定的 UI。请找到附加的图像。

。

如您所见，它是一个列表视图，其下方有一个面包屑。我想要实现的是当用户单击面包屑中的任何其他项目（例如“商店”或“用户”）时，上部布局水平滑动并显示另一个列表视图。我卡住的地方是我想修复面包屑在底部，更改只需要上部布局，即；列表视图布局。我怎样才能做到这一点。任何想法都会很有帮助。

我在想的是在水平滚动视图中放置四个列表视图。但这是更好的方法吗？

【问题讨论】：

您成功滑动视图了吗？如果不是，syncfusion 的SfRotator 可能对您有用。它负责滑动部分。向我们提供您为此尝试和取得的成果。
@Nikhileshwar 您好，感谢您的回复。目前它只是设计。除了同步融合还有其他控制吗？
其他控件我不太了解。您可以使用翻译动画滑动视图。但需要为其添加一些逻辑。我会尝试提供解决方案。
你可以看一下TabbedPage，设置tab底部，改变上面的内容，但是如果你想达到上面的效果，你应该自定义tab
@LeoZhu-MSFT 感谢您的想法。但是我认为使用 tab 是不可能实现这个 Ui 的，对吧？

标签： xamarin xamarin.forms

【解决方案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;
    }

这里我使用了按钮的文本来选择视图的索引。希望这会有所帮助。

【讨论】：

NRE具体扔在哪里？
谢谢老哥的解答。如果您不介意我们如何更改点击按钮的颜色？
我可以建议一个 ListView 并使用 TemplateSelector 根据 SelectedItem 更改颜色，因为您还需要将颜色从选中更改为未选中。如果可能，请检查我对此question 的回答

【解决方案2】：

如果您正在寻找面包屑导航控件。我创建了一个可以自动生成的控件，而且它是高度可定制的。

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

【讨论】：